typescript

JavaScript 是动态类型，没有编译阶段，运行时才会进行类型检查

TypeScript 是静态类型，有编译阶段，译阶段就会进行类型检查

即 Ts → 编译阶段（类型检查） → Js

Ts 完全兼容 Js，可以和 Js 共存

any 任意值

void 没有任何返回值的函数

自动类型推论

如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查

联合类型

let myFavoriteNumber: string | number;

接口（抽象类）Interface

赋值的时候，变量的形状必须和接口的形状保持一致
1 可以用可选属性 age?: number;
2 可以添加任意属性 [propName: string]: any;
一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集
3 只读属性，只能在创建的时候被赋值 readonly id: number;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    id: 89757,
    name: 'Tom',
    gender: 'male'
};

tom.id = 9527;

// index.ts(14,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.

数组类型

let fibonacci: number[] = [1, 1, 2, 3, 5];

数组泛型

let fibonacci: Array<number> = [1, 1, 2, 3, 5];
或者用any

函数类型

  • 函数声明
    对输入输出进行约束（参数多或少都不被允许）
    function sum(x: number, y: number): number { return x + y; }

  • 函数表达式
    let mySum: (x: number, y: number) => number = function (x: number, y: number): number { return x + y; };

    注意不要混淆了 TypeScript 中的 => 和 ES6 中的 =>。
    在 TypeScript 的类型定义中，=> 用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。
    在 ES6 中，=> 叫做箭头函数。

  • 可选参数 (可选参数后面不允许再出现必须参数了)
    function buildName(firstName: string, lastName?: string) { }

  • 参数默认值
    TypeScript 会将添加了默认值的参数识别为可选参数，此时就不受「可选参数必须接在必需参数后面」的限制了。
    function buildName(firstName: string, lastName: string = 'Cat') { }

  • 接口定义函数形状
    interface SearchFunc { (source: string, subString: string): boolean; }

  • 重载
    即重复定义函数多次，会优先从最前面的函数定义开始匹配。

类型断言

手动指定一个值的类型 something
window as any

声明文件

declare var jQuery: (selector: string) => any;
declare var 并没有真的定义一个变量，只是定义了全局变量 jQuery 的类型，仅仅会用于编译时的检查，在编译结果中会被删除。
通常我们会把声明语句放到一个单独的文件（jQuery.d.ts）中，这就是声明文件。
声明文件必需以 .d.ts 为后缀。
推荐使用 @types 统一管理第三方库的声明文件。当第三方库没有提供声明文件时，我们就需要自己书写声明文件了。

参考：
https://ts.xcatliu.com/