前言

简单记录一下TypeScript常用的几个类型，做模板用 >.>

模板

  • 变量声明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 任意类型
let x:any = 1;  
// 字符串类型
let str: string = "Hello World";
// 数字类型
let num: number = 5;
// 布尔类型
let flag: boolean = true;
// 数组类型
let arr: number[] = [1, 2];
let arr2: Array<number> = [1, 2];
// 元组
let list: [string, number];
list = ['hello', 666];
// 枚举
enum Color {Red, Green, Blue}
let c: Color = Color.Blue;
console.log(Color); // { '0': 'Red', '1': 'Green', '2': 'Blue', Red: 0, Green: 1, Blue: 2 }
console.log(c); // 2
// 类型推断
let num = 2; // 赋值后类型推断为 number 类型
let num2; // 若不赋值 类型推断为 any 类型

  • 函数

// 函数

1
2
3
function prt(str: string): void {
    console.log(str)
}

// 传参是参数可以缺少但不能多

  • 类

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
// 继承
class Shape {
    Area:number

    constructor(a:number) {
        this.Area = a
    }
}

class Circle extends Shape {
    disp():void {
        console.log("圆的面积:  "+this.Area)
    }
}
// 实现
interface A {
    num:number
    prt(str: string): number
}

class B implements A {
    num:number;
    num2:number;

    constructor(a:number,b:number) {
        this.num = a;
        this.num2 = b;
    }

    prt(str: string) {
        console.log(str);
        return 123;
    }
}

  • 结构体

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
// 实例一
interface A{
    firstName:string,
    lastName:string,
    say: ()=>string
}

const xxx1: A = {
    firstName: "Tom",
    lastName: "jack",
    say: (): string => {
        return "Hello"
    }
};

// 实例二
interface A{
    age:number
}

interface B extends A{
    name:string
}

const xxx2 = <B>{};
xxx2.age = 27;
xxx2.name = "xpengp";

// 实例三
interface A{
    v1:number
}

interface B{
    v2:number
}

interface C extends A, B{ }

const xxx3: C = {v1: 12, v2: 23};

  • 导出模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export interface Options {
    name: string,
    age: number,
    address: string
}

const DefaultOptions: Options = {
    name: 'xxx',
    age: 18,
    address: 'China'
};

export function person(options: Options): object {
    return Object.assign(DefaultOptions, options);
}

导入模板

1
2
3
4
const {person} = require('./models/module');
console.log(person({
    age: 12
}));
  • 上例实现了默认参数的实现，可见极大地方便了代码的重构
  • 同时方便了IDE的使用

总结

  1. 项目中TS文件需要先编译为js再执行
  2. 未完待续。。。