typescript基础深入

发表于

深入了解ts的基础，才能更好的开发！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
// 具名函数
function add(x: number, y: number): number {
    return x + y;
}

let handle = (x: number, y: number): number => {
    return x + y;
}

// 这里表示handle1变量的类型为一个函数， 接收两个参数， 返回值为number类型
// 注意不要混淆了 TypeScript 中的 => 和 ES6 中的 =>。
// 在 TypeScript 的类型定义中，
//     => 用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。
// ES6 中箭头函数 => 左边是函数定义，右边是实现体。
let handle1: (x: number, y: number) => number;
handle1 = (xx, yy): number => {
    return xx + yy;
}
handle1(1, 2);

// 将变量类型抽取到接口中
// 函数类型的接口声明是匿名的。
interface IHandleType {
    (x: number, y: number): number;
}
let handle2: IHandleType = (xxx, yyy) => {
    return xxx + yyy;
}

// 但是对象的类型声明的函数是具名的。
interface UIElement {
    addEventListener(onclick: (this: void, e: Event) => void): void;
}

let src: UIElement = {
    addEventListener() {

    }
}


function reverse(x: number | string): number | string {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else {
        return x.split('').reverse().join('');
    }
}

// 定义返回值为元祖类型， 其实就是一个数组(只是存放了不同类型的数据)
function returnTuple(): [string, number] {
    return ["dottie", 23];
}

let tuple: [string, number] = returnTuple();
console.log(tuple) // [ 'dottie', 23 ]
console.log(typeof tuple); // object
console.log(Array.isArray(tuple)) // true


// 定义枚举
enum Days {
    Sun, 
    Mon,
    Tue,
    Wed,
    Thr,
    Fri,
    Sat,
}
console.log(Days["Sun"] === 0); // true
console.log(Days.Sun === 0); // true


// 修饰类 （类类型）
class Greeter {
    static standardGreeting = "hello, dottie";
    greeting: string = "";
    greet() {
        if (this.greeting) {
            return `hi, ${this.greeting}`;
        } else {
            return Greeter.standardGreeting;
        }
    }
}
let greeter1: Greeter;
greeter1 = new Greeter();
console.log(greeter1.greet()); // hello, dottie

let greeterMaker: typeof Greeter = Greeter;
let greeterMaker1: new (...args: any[]) => Greeter = Greeter;
let greeterMaker2: typeof Greeter = Greeter;
console.log(typeof greeterMaker1); // function
console.log(typeof greeterMaker1 === typeof greeterMaker2); // true
// typeof Greeter 和 new () => Greeter 的区别在于：
// typeof Greeter表示Greeter类的类型，里面包含了Greeter类中所有的静态成员和构造函数
// new () => Greeter表示创建一个里面是空的，但是它也是Greeter类的类型， 所以这里就没有standardGreeting属性了。
// new (...args: any[]): Greeter; 这里的new (...args: any[]) 表示的是类类型的定义，返回值为Greeter类型
greeterMaker.standardGreeting = "Hey dottie";
let greeter2: Greeter = new greeterMaker();
console.log(greeter2.greet()); // Hey dottie