这是我参与「第四届青训营」笔记创作活动的的第 9 天

Why TypeScript

静态类型
- 可读性增强：基于语法解析 TSDoc、IDE 增强。
- 可维护性增强：在编译阶段暴露大部分错误。在多人合作的大型项目中，获得更好的稳定性和开发效率。
是 JS 的超集
- 包含于兼容所有 JavaScript 特性，支持共存。
- 支持渐进式引入与升级。

基础语法

const variable: type = value;

通过上述语法来声明变量并指定一个类型，同时 TypeScript 也支持自动类型推断，可以省略类型的声明。

const variable = value;

对象类型在 TypeScript 中与 JavaScript 声明对象一样也是使用花括号来声明。

const obj: MyObj = {
    name: '123',
    age: 18
}

也可以使用一个 interface 来定义一个对象类型。

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

TypeScript 中对象还支持只读属性和可选属性：

interface MyObj {
    readonly id: number; // 只读
    name: string;
    age: number;
    hobby?: string; // 可选
}

在 TypeScript 中还可以为函数添加类型声明：

function add(a: number, b: number): number {
    return a + b;
}

这里 function(): 后的类型表示该函数的返回值类型，而括号中的表示参数列表以及参数的类型。

给箭头函数定义返回值类型的格式不太一样，使用箭头来表示函数的返回值类型：

const add = (a: number, b: number) => number = (a, b) => a + b;

在 TypeScript 中声明数组有几种方式：

type Arr1 = number[];
type Arr2 = Array<number>;
type Arr3 = [number, number, number] // 元祖
interface Arr4 = {
    [key: number]: any;
}

空类型，表示无赋值：

type EmptyFunction = () => void;

任意类型，是所有类型的子类型：

type AnyType = any;

枚举类型，支持枚举值到枚举名的正反向映射：

enum EnumType {
    name = 'value'
}

EnumType['name'] === 'value'
EnumType['value'] === 'name'

TypeScript 中还允许将字面量设置为类型，这样这个变量就只能拥有对应的字面量。

但通常设置单一字面量的变量是没有意义的，我们还会用到联合类型来一起声明：

type OddNum = 1 | 3 | 5 | 7 | 9;

这个变量的类型就是 1、3、5、7、9 中的任意一个数字。

泛型在定义的时候不指定具体的类型，在使用的时候才知道具体的类型。

定义泛型函数：

function func<T, E>(p1: T, p2: E) {}

在函数名后使用方括号定义泛型，可以定义一个或多个，然后在函数的参数列表中使用该泛型。

泛型也可以使用在类、别名定义中。

interface I<T> {}
class C<T> {}
type Type<T> = Array<T>

我们也可以为泛型的类型添加约束

type MyType = <T extends string>(target: T) => T[];

或者是为泛型添加默认类型，当没有指定泛型的时候会使用默认的泛型类型：

type MyType<T = number> = (target: T) => T[];