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

为什么要有TypeScript

JavaScript虽然已经被使用得相当广泛了，但是由于它是动态类型语言，一个变量的类型必须要在运行时才能被确定，因此程序中有关类型转换的错误很难在运行前就被发现。而TypeScript是静态类型语言，因此可以很轻松地做到这一点。

同时，TypeScript还新增了诸如interface、枚举类型等JavaScript没有的概念，极大地方便程序员构造大型项目。像是VS Code、Angular2等项目就是使用TypeScript编写的。

最后，TypeScript作为JavaScript的超集，兼容后者的语法，使得前端人员能够快速上手。因此，TypeScript非常值得我们学习。

基本语法

类型标注

像Go一样，TypeScript在变量后面添加上: 类型来标注类型。

const q: string = "string";
const w: number = 1;
const e: boolean = true;
const r: null = null;
const t: undefined = undefined;

对象类型

TypeScript可以使用关键字interface自定义接口类型，通过它来对对象类型做一个约束。一般使用大写字母I开头来表示一个接口类型。

使用readonly表示某个属性是只读属性，该属性只有在对象初始化时才能被赋值，并且一旦初始化结束后就无法修改它的值。相当于是个常量。

若要约束属性的取值范围，可使用|来连接多个取值，例如"man" | "woman" | "other"表示取值范围是"man"、"woman"、"other"。

任意属性是指一些额外添加进来的属性，其语法为[prop: type]: type。其中prop为键名的标识符，可任取。type表示数据类型。注意约束所有对象属性都必须是该属性的子类型。

interface IBytedancer {
    readonly jobId: number;
    name: string;
    sex: "man" | "woman" | "other";
    age: number;
    hobby?: string;
    [key: string]: any;
}

const bytedancer: IBytedancer = {
    jobId: 123,
    name: "Lin",
    sex: "man",
    age: 28,
    hobby: "swimming",
};

// 报错：无法分配到 "jobId"，因为它是只读属性
bytedancer.jobId = 456;
// 成功：任意属性标注下可以添加任意属性
bytedancer.platform = "data";
// 报错：缺少属性 "name"，hobby可省略
const bytedancer2: IBytedancer = {
    jobId: 789,
    sex: "woman",
    age: 18,
  };

函数类型

可以直接在函数上添加类型声明。注意返回值类型要放在圆括号后面。

function add(x: number, y: number): number {
  return x + y;
}

也可以定义一个函数类型，并将其赋值给变量。该处使用了函数式编程的语法。

const mult: (x: number, y: number) => number = (x, y) => x * y;

上面表达式太冗长，推荐先定义一个接口类型，然后把lambda表达式赋值给对具有该类型的变量，TypeScript会自动做类型转换以匹配该类型。

interface IMult {
    (x: number, y: number): number;
}

const mult2: IMult = (x, y) => x * y;

数组类型

数组类型可以使用类型 + 方括号、泛型、元组、接口来表示。

关键字type用于给数据类型起别名，类似C++中using的用法。

type IArr1 = number[];
type IArr2 = Array<string | number | Record<string, number>>;
type IArr3 = [number, number, string, string]
interface IArr4 {
    [key: number]: any;
}

TypeScript语法个人笔记