TypeScript教程（2）

typescript 的使用

用编辑器在文件夹test下生成创建一个hello.ts的文件，并写入如下内容：

export class hello{

}

在命令行下 tsc hell.ts就会生成hello.js的文件，这就是tytescript过程。

当然我们也可以在线的方式学习typescript的语法

https://www.typescriptlang.org/play/index.html。

（2）字符串

字符串的多行用``串起来处理

（3）字符串模板

var name="hello "

console.log(`thisi is ${name}')//注意只用  ``中的内容才会其作用

（4）自动拆封字符串

function test(one, two, three) {
    console.log(one)
    console.log(two)
    console.log(three)
}
var name = "hello world"
var getAge = x => x + 10;
test`this  is test ${name},age is ${getAge(20)}`

对应的js为：

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
function test(one, two, three) {
    console.log(one);
    console.log(two);
    console.log(three);
}
var name = "hello world";
var getAge = function (x) { return x + 10; };
test(__makeTemplateObject(["this  is test ", ",age is ", ""], ["this  is test ", ",age is ", ""]), name, getAge(20));

（5）参数特性

可指定参数类型：

var name: String = "hello world"
var lax :any = "helkjo"
var age: number = 21
var who: boolean = false
function test(anme: string): string{
   var new_name=`hello ${anme}`
}

对应的js

var name = "hello world";
var lax = "helkjo";
var age = 21;
var who = false;
function test(anme) {
    var new_name = "hello " + anme;
}

（6）默认值

function test(name: string, b: string, c: string = "default") {
    console.log(`${name}+${b}+${c}`)
}
function test2(name: string, b?: string, c: string = "default") {
    console.log(`${name}+${c}`)
    if(b!=null)console.log(b)
}

(7)多参数

function test(...args) {
    args.forEach(a=>console.log(a))
}

对应的js

function test() {
    var args = [];
    for (var _i = 0; _i < arguments.length; _i++) {
        args[_i] = arguments[_i];
    }
    args.forEach(function (a) { return console.log(a); });
}

function test(a,b,c) {
    console.log(`${a}+${b}+${c}`)
}
let arg = ['lkj', 'sd', 'ads', 'all', 'asdlkj']
//let arg=['kj','none']
let t=test(...arg)

(8)generator函数

function* dosomething() {
    console.log("start")
    yield;
    console.log("continue")
}
let fun1 = dosomething()
fun1.next()//start
fun1.next();//continue

(9)析构表达式

function test() {
    return {
        name: 'hello',
        age:23
    }
}
let { name, age } = test();

function test() {
    return {
        name: {
                a:'hello'
        }
        age:23
    }
}
var { name: {a}, age } = test();

let arr=[1,2,3,2,34,3,4,4,45]
function test([one, two, ...last]){
   console.log(`here you can get one,two and the last element of array`) 
}
test(arr)

(10)表达式

let sum = (arg1, arg2) => console.log(`${arg1}+${arg2}`)
let arr = [23, 23, 2, 4, 23, 2, 3, 42, 32, 3, 42, 3, 4, 43]
var filters=arr.filter(number=>number/2==0)//对于消除this很有效

对应的js

var sum = function (arg1, arg2) { return console.log(arg1 + "+" + arg2); };
var arr = [23, 23, 2, 4, 23, 2, 3, 42, 32, 3, 42, 3, 4, 43];
var filters = arr.filter(function (number) { return number / 2 == 0; }); //对于消除this很有效

（11）for循环

let arr = [23, 23, 2, 4, 23, 2, 3, 42, 32, 3, 42, 3, 4, 43]
arr.forEach(x => console.log(x))
for (var ele in arr) {
    console.log(ele)//ele is the postion of arr
}
for (var ele2 of arr) {
    console.log(ele2)//ele2 is the value of arr
}

(12)类特性

class Person{
    constructor(name: string) {
        this.name = name;
    }
    
    private name: String;
    public eat(): void{
        console.log(`oh my god,${this.name} is eating me`)
    }
}
let p = new Person('glost');
p.eat();
//p.name ;  //you cann't access to the property 

class Student extends Person{
    constructor(name: string) {
        super(name)
    }
    public eat() {
        console.log(`what the fuck that ${name}`)
    }
}

(12)泛型

let students: Array<Student> = [];
Student[0] = new Student('wang')
Student[1] = new Student('li')

(13)接口

interface IPerson{
    name: string;
    age: number
    eat();
}
class Person{
    constructor(public p: IPerson) { }
}
let p1 = new Person({
    name: 'wang',
    age: 2324, eat() {
    console.log('eatting anythings')
} })

(14）模块

通过export关键字来暴露给外面的调用者需要哪些；

eg:  test文件夹-》one.ts,two.ts

在one.ts中：

export class hello{

}

export var testVar;

在two.ts中：

import {hello} from "./one"

console.log(testVar)

(15)注解

angular2中；

@Component({selector:'app-root',templateUrl:'./otherCoponent.html',styleUrl:['./css'})

expolor class test{

    fucntion test =alert('hell')

}

(16)类型文件（*.d.ts)

如何调用其他的包来帮助我的开发，用在typescript中

eg：

class test{
   function testF(name:string){
     consolt.log(name)
     console.log(${getName}//jquery
}
}

可以在文件中定义一个文件test.d.ts，其中

declare module "jquery"{
   export=$
}
declare var jQuery:JQueryStatic
declare var $:JQueryStatic;

（17)

哦，好像没有17，have fun.....