TypeScript

自动拆分字符串

function test(templage, name, age) {
    console.log(templage);// ["hello,my name is ", ",i am ", ""]
    console.log(name);// Aaayang
    console.log(age);// 18
}

var myname = 'Aaayang';
var getAge = function() {
    return 18;
};
test`hello,my name is ${myname},i am ${getAge()}`;

参数类型

// 参数类型：在参数名称后面使用冒号来指定参数的类型
var myname: string = "Aaayang";
myname = "Bbb";

// 类型推断机制
var alias = "Jiangjun";
// 推断这里应该是字符串，赋值数字会报错
alias = 'a';

// 任意类型
var aaa: any = "Doudou";
// aaa赋值啥都行
aaa = 13;

var age: number = 13;
var man: boolean = true;

// 不需要任何返回值
function test() :void {

}
// 要返回string
function test2() :string {
    return "";
}

function test3(name: string) :string {
    return "";
}
// 只能传字符串
test3('aaa');

// 自定义类型
class Person {
    name: string;
    age: number;
}
var zhangsan: Person = new Person();
zhangsan.name = "zhangsan";
zhangsan.age = 18;

参数默认值

var myname: string = "Aaayang";

// 注意带默认值的参数要声明在后面
function test(a:string, b:string, c:string = 'Doudou') {
    console.log(a);
    console.log(b);
    console.log(c);
}

// 正常只有传3个参数才不会报错，第三个参数有默认值，这里传2个也行
test('111', '222', '333');
test('xxx', 'yyy');

可选参数

var myname: string = "Aaayang";

// 注意可选参数必须声明在必选参数的后面
function test(a:string, b?:string, c:string = 'Doudou') {
    console.log(a);
    console.log(b);
    console.log(c);
}

// 正常只有传3个参数才不会报错，第三个参数有默认值，这里传2个也行
test('xxx');// xxx,undefined,Doudou
test('aaa', 'bbb');// aaa,bbb,Doudou
test('111', '222', '333');// 111,222,333

Rest and Spread

// 把任意数量参数转为数组
function func1(...args) {
    args.forEach(function(arg) {
        console.log(arg);
    });
}

func1('a', 'b', 'c', 'd');

// 把任意数量参数转为数组
function func1(a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
}

var args = [1, 2];
func1(...args);// 1,2,undefined

var args2 = [6, 7, 8, 9];// 6,7,8
func1(...args2);

Generator方法

function* doSomething() {
    console.log("start");

    yield;

    console.log("finish");
}
var func1 = doSomething();
func1.next();// start
func1.next();// finish

yield写法研究

function* getStockPrice(stock) {
    while(true) {
        yield Math.random() * 100;// ??
    }
}

var priceGenerator = getStockPrice("IBM");
var limitPrice = 15;

var price = 100;

while(price > limitPrice) {
    price = priceGenerator.next().value;
    console.log(`the generator return ${price}`);
}
console.log(`buying at ${price}`);

解构赋值

function getStock() {
    return {
        code: "IBM",
        price: 100
    }
}

// var stock = getStock();
// var code = stock.code;
// var price = stock.price;

var {code, price} = getStock();
var {code: codex, price} = getStock();
console.log(code);// IBM
console.log(codex);// IBM
console.log(price);

箭头函数

// 单行
var sum = (arg1, arg2) => arg1 + arg2;
console.log(sum(1, 2));

// 多行
var sum2 = (arg1, arg2) => {
    var result = arg1 + arg2;
    console.log(result);
}
sum2(3, 4);

var sum3 = () => {
    console.log('无参数的');
}
sum3();

var sum4 = arg1 => {
    console.log(`只有一个参数也是不需要写括号的${arg1}`);
}
sum4('Aaayang');

var myArray = [1, 2, 3, 4, 5];
var aaa = myArray.filter(item => item % 2 == 0);
console.log(aaa);

箭头函数中的this

// 正常写
function getStock(name:string) {
    this.name = name;
    setInterval(function() {
        console.log("my name is " + this.name);
    }, 1000);
}
var stock = new getStock('Aaayang');// my name is

// 箭头函数写法
function getStock2(name:string) {
    this.name = name;
    setInterval(() => {
        console.log("my name is " + this.name);
    }, 1000);
}
var stock2 = new getStock2('Aaayang');// my name is Aaayang

forEach, for in, for of

var myArray = [1, 2, 3, 4];
myArray.desc = "four number";// tsc编译会报错，便宜JS是可以执行的

// forEach会忽略desc，不能用break跳出循环
myArray.forEach(value => console.log(value));

// desc属性也会被循环
for(var n in myArray) {
    // console.log(n);// 0, 1, 2, 3, desc
    console.log(myArray[n]);// 1, 2, 3, 4, four number
}

// 可以break，forEach一样不会循环desc
for(var n of myArray) {
    if(n > 2) break;
    console.log(n);
}

类

class Person {
    name;// 默认public
    // private name;// 私有的
    // protected name;// 内部和子类可以访问
    eat() {
        console.log("i am eating");
    }
}

var p1 = new Person();
p1.name = "Aaayang";
p1.eat();

var p2 = new Person();
p2.name = "Jiangjun";
p2.eat();

构造函数

class Person {
    /*constructor(public name: string) {
    }*/
    // 和上面等价
    constructor(name: string) {
        this.name = name;
    }
    name;
    eat() {
        console.log(this.name);
    }
}

var p1 = new Person('Aaayang');// 必须传参
p1.name = "Aaayang";
p1.eat();

继承

class Person {
    constructor(public name: string) {
        console.log('haha');
    }
    name;
    eat() {
        console.log('i am eating');
    }
}

class Employee extends Person {
    constructor(name: string, code: string) {
        super(name);// 子类的构造函数必须调用父类的构造函数
        console.log('xixi');
        this.code = code;
    }

    code: string;
    work() {
        super().eat();// 调用方法
        this.doWork();
    }
    private doWork() {// e1.doWork()不让直接干活，规定先吃饭再干活
        console.log('do work');
    }
}

var e1 = new Employee("Aaayang", "1");
e1.work();

泛型

...

接口

interface IPerson {
    name: string;
    age: number;
}

class Person {
    // 接口：作为方法的参数的类型声明
    constructor(public config: IPerson) {

    }
}

var p1 = new Person({
    name: "Aaayang",
    age: 18
});

interface Animal {
    eat();
}

class Sheep implements Animal {
    eat() {
        // 类必须要实现接口对应的方法
        console.log('i eating grass');
    }
}

模块

a.ts

export var prop1;

export function func1() {

}

export class Class1 {
    
}

index.ts

import {prop1, func1, Class1} from "./a";

注解

类型定义文件

// 在TypeScript中使用已有的工具包
// from github "DefinitelyTyped"
*.d.ts