TypeScript全面指南（一）

基本使用

npm install -g typescript 全局安装 typescript 模块。
构建一个 hello.ts 的 ts 文件，通过命令 tsc hello.ts 编译生成 js 文件。
在 ts 文件中使用类型（const hello: string = '';），以增强你的代码。

原始类型

除了 number / string / boolean / null / undefined， ECMAScript 2015（ES6）、2020 (ES11) 又分别引入了 2 个新的原始类型：symbol 与 bigint 。这些类型在 TypeScript 中对应的类型注解与 JavaScript 相同。

null、undefind、void

与 JavaScript 不同，TypeScript 中的 null 和 undefind 是有具体意义的类型，而 void 类似 JavaScript 中的 undefind 。
在关闭了 strictNullChecks 配置的情况下， null 和 undefind 可被视为其他类型的子类型：

// 关闭strictNullChecks时成立
const a: string = null;
const b: string = undefined;
const c: void = null;

不需要花时间刻意区分三者的区别，开发中酌情使用即可。

never

与 null、undefind、void 相比，never 代表更加“虚空”的类型。可以将一个变量的类型声明为 never, 但是不能为其赋值：

let a: never = null; // 编译错误
let b: never = undefined; // 编译错误
let c: never[] = []; // 只能为never[]赋空数组

字面量类型

更为精确的原始类型

const a: 'reimu' = 'reimu';
const b: 0 = 0;
const c: false = false;

// 以下编译错误
const d: 'success' = 'fail';
const e: 0 = 10;
const f: false = true;

数组类型

可以使用 Array<number> 或者 number[] 标注，建议使用后者。

元组（Tuple）类型 - 数组类型的扩展

使用元组能帮助提升数组结构的严谨性，包括基于位置的类型标注、避免出现越界访问等等。

// 基本使用
const arr1: [string, string] = ['a', 'b'];
console.log(arr1[2]); // 编译错误

// 不同类型的元素
const arr2: [string, number] = ['a', 0];

// 可选成员
const arr3: [string, number?] = ['a'];
// const arr3: [string, number?] = ['a', 0];

对象类型

使用接口（interface）定义对象类型：

interface objImpl {
    name: string;
    // 只读属性，防止再次赋值
    readonly age: number;
    // 可选属性
    male?: boolean;
}

const obj: objImpl = {
    name: 'Reimu747',
    age: 18,
    // 可选属性可以不用实现，也可以实现
    // male: true,
};

obj.age = 20; // 编译错误

枚举（Enum）类型 - 对象类型的扩展

enum Items1 {
    // 默认值为数字，从0开始
    Foo,
    Bar,
    Baz,
}
enum Items2 {
    // 显式指定值，可以为数字或字符串
    Foo = 2,
    Bar = 42,
    Baz = 'reimu747',
}

// 数字枚举成员是双向映射的，而字符串枚举成员和对象是单向映射的
// 可以看看编译成js后的代码，枚举是基于数组实现的
const value = Items2.Foo; // 2
const key = Items2[0]; // 'Foo'
const bazValue = Items2.Baz; // 'reimu747'
const bazKey = Items2['reimu747']; // 编译错误

联合类型（union）

代表了一组类型的可用集合，只要最终赋值的类型属于联合类型的成员之一，就可以认为符合这个联合类型。联合类型对其成员并没有任何限制，可以将各种类型混合到一起：

// 通过type关键字，声明一个新的类型
type Code = 200 | 404 | 500;
const code: Code = 200;
type Status = "success" | "failure";
const status: Status = "success";

// 混合各种类型
type Mixed: true | string | 599 | {} | (() => {});
const m: Mixed = 599;
const m2 Mixed = false; // 编译错误

关于 type 与 interface ：type 与 interface 在大多数场景下都可以互相取代，具体如何使用可看个人习惯或者团队内部的风格。推荐使用 interface 用来描述对象、函数、类的结构，而 type 用来将一个函数签名、一组联合类型、一个工具类型等等抽离成一个完整独立的类型。

交叉类型

需要符合列出的所有类型，才可以说实现了这个交叉类型，即 A & B ，需要同时满足 A 与 B 两个类型才行。

// 原始类型的交叉：never
type NeverType = string & number; // never

// 对象的交叉：对于对象类型的合并
// 若存在同名属性，也按照交叉规则合并
interface NameImpl {
    name: string;
    other: {
        a: number
    };
}
interface AgeImpl {
    age: number;
    other: {
        b: string
    };
}
type HumanType = NameStruct & AgeStruct;
const a: HumanType = {
    name: "reimu747",
    age: 18,
    other: {
        a: 100,
        b: 'haha',
    };
}

// 联合类型的交叉，按照分配律计算
type UnionIntersection1 = (1 | 2 | 3) & (1 | 2); // 1 | 2
type UnionIntersection2 = (string | number | symbol) & string; // string

函数类型

// 标注参数和返回值的类型：
function foo(name: string): number {
    return name.length;
}

// 可通过type抽离函数声明：
type FuncFoo = (name: string) => number;
const foo: FuncFoo = name => {
    return name.length;
};

// 也可通过interface进行函数声明：
interface FuncFooImpl {
    (name: string): number;
}
const foo: FuncFooImpl = name => {
    return name.length;
};

any、unknown

any 和 unknown 是 ts 的顶级类型。any 和 unknown 都可以接受任意类型的值，其中 any 可被赋给任意类型的变量，但是 unknown 只能赋给 any 或 unknown 。
any 放弃了所有的类型检查，而 unknown 并没有。在程序中，推荐使用 unknown 而不是 any 。

类型断言 - 我确信某个变量是这个类型的！

通过 as 关键字进行类型断言：

// 断言到具体的类型
let unknownVar: unknown;
(unknownVar as { foo: () => {} }).foo();

// 断言到any以跳过类型检查
const str: string = 'reimu747';
(str as any).func().foo().prop;

// 在联合类型中断言一个具体的分支：
function foo(union: string | number) {
    if ((union as string).includes('reimu747')) {
    }
    if ((union as number).toFixed() === '20') {
    }
}

非空断言

通过 ! 关键字进行非空断言：

// 断言!前面的部分非空
const element = document.querySelector('#id')!;
const target = [1, 2, 3, 599].find(item => item === 599)!;
const fixed = target.toFixed();

// 非空断言的运行时仍然会保持调用链，因此在运行时可能会报错。
a!.b!().c!.d!(); // 不会编译错误，但a/b/c/d任一为空时，运行时会报错

// 可选链则会在某一个部分为undefined或null时直接短路，不会再发生后面的调用。
a?.b?.().c?.d?.(); // 运行时也不会有错误

TypeScript

#TypeScript

TypeScript全面指南（一）

https://www.reimu747.ink/post/20210120.html

作者

Reimu747

发布于

2021年1月20日

许可协议

TypeScript全面指南（二）上一篇