TypeScript

TypeScript 是一种由微软开发的开源编程语言，它是 JS 的一个超集，设计目的在于增强 JS 的开发效率和维护性。

TS 在 JS 的基础上添加了静态类型，使得开发者能在编码阶段就发现类型错误，提高了代码的健壮性和可维护性。

特性：

静态类型系统：允许在编译时进行类型检查
增强面向对象特性：支持类、接口、模块、泛型等

不支持直接在浏览器运行，需要先编译成 js 代码。

安装

全局安装
npm install -g typescript

局部安装
pnpm add -D typescript

验证：

tsc -v

如果是局部安装的，需要使用 npx 运行：

npx tsc -v

初始化，会在根目录生成一个tsconfig.json文件

npx tsc --init

编译

经过编译，可以得到一个同名的 js 文件

tsc helloworld.ts

#如果不在根目录下，要加反斜杠
tsc .\src\helloworld.ts

也可以用ts-node插件直接在终端查看结果，但不会生成 js 文件

npm install -g ts-node

运行：

ts-node helloworld.ts

类型

const isDone: boolean = false; // 布尔
const num: number = 6; // 数字
const str: string = 'zgh'; // 字符串
const obj: object = {}; // 对象
const u: undefined = undefined;
const n: null = null;

字面量类型

字面量类型是比原始类型更精确的类型，是原始类型的子类型。主要包括字符串、数字、布尔、对象。

示例：使用 string 可以表明是什么类型，但是不知道具体的值。使用字面量类型就是要求值也一样

let str1: string = 'hello';

let str2: 'world' = 'world';

const count: 1 = 1;

const isTrue: true = true;

通常和联合类型一起使用：

const str: 'hello' | 'world' = 'hello';

使用 const 声明的原始变量，其类型会从值推导出最精确的字面量类型。如：

let t1 = 'hello'; // let t1: string
const t2 = 'world'; // const t2: "world"

object 类型

const p1: object = {};
const p2: object = [];
const p3: object = () => {};

在有些情况下，推荐使用以下的方式代替 object，进行更详细的区分

Record<string, unknown> 或 Record<string, any> 表示对象
unknown[] 或 any[] 表示数组
(...args: any[]) => any表示函数

null 和 undefined

undefined 和 null 是所有类型的子类型。

const tmp1: null = null;
const tmp2: undefined = undefined;

const tmp3: string = null;
const tmp4: string = undefined;

最后两行会报错。可以在 tsconfig.json 中关闭 strictNullChecks，设置"strictNullChecks": false

数组类型

数组类型的表示方法：

类型 + 方括号：number[]、string[]
数组泛型：Array<T>
interface，较复杂，一般不用

const arr1: number[] = [1, 2, 3];

const arr2: Array<number> = [4, 5, 6];

interface NumberArray {
  [x: number]: number;
}
let arr3: NumberArray = [1, 2, 3];

const arr4: (number | string)[] = [1, 'a', 'b', 2]; // 不知道元素数量，类型已知

对象数组的类型注解：

const arr: { name: string; age: number }[] = [
  { name: 'tom', age: 18 },
  { name: 'jack', age: 19 }
];

如果有同样类型的数组，可以用 类型别名，或者使用类

type Person = {
  name: string;
  age: number;
};

const arr: Person[] = [
  { name: 'tom', age: 18 },
  { name: 'jack', age: 19 }
];

tuple 元组类型

元组 Tuple，表示一个已知元素数量和类型的数组。注意：元组的长度固定

示例 1：

const tuple: [string, number, boolean] = ['hello', 123, true];
tuple[3]; // ts会报错

长度为 3 的元祖类型在索引 3 处没有元素，所以报错。如果使用 tuple.push({}) 会报错，因为只能添加元组中已经存在的类型。

示例 2:

const tuple: [string, number, boolean] = ['hello', 123, true];
tuple.push(1);
console.log(tuple); // ['hello', 123, true, 1]
console.log(tuple[3]); // ts会报错，但是能打印出1

报错原因是 tuple 被定义为一个长度固定为 3 的元组类型。访问索引 3 超出了元组的长度范围。但是实际上变量已经被添加了。

如果要严格限制，可以用 readonly 关键字，如：

const tuple: readonly [string, number, boolean] = ['hello', 123, true];
tuple.push(1); // ts报错

示例 3：可选成员

const tuple: [string, number, boolean?] = ['hello', 123];

示例 4：解构赋值

const tuple: [string, number] = ['ha', 666];
const [ha, info] = tuple;

`Symbol`类型

const sym = Symbol();
let obj = {
  [sym]: 'zgh'
};
console.log(obj[sym]); // zgh

枚举类型

enum Direction {
  NORTH,
  SOUTH,
  EAST,
  WEST
}
let dir: Direction = Direction.NORTH;
console.log(dir); // 0
let dirName: string = Direction[2];
console.log(dirName); // EAST

`Any`类型

即任意类型，ts 允许对 any 类型的值进行任何操作

let notSure: any;
notSure.user.name; // ok
notSure[0]; // ok
notSure(); // ok
new notSure(); // ok

`unknown`类型

就是不知道啥类型，只能被赋值给any类型和unknown类型本身

let unk: unknown;

unk.user.name; // Error
unk(); // Error
new unk(); // Error

let value: unknown;

let value1: unknown = value; // OK
let value2: any = value; // OK
let value3: boolean = value; // Error
let value4: number = value; // Error
let value5: string = value; // Error
let value6: object = value; // Error
let value7: any[] = value; // Error
let value8: Function = value; // Error

`void`类型

void 类型表示函数没有返回值，或者没有显式返回一个值。

下面 3 种写法的返回值类型都会被隐式推导为 void

function fn1(): void {}
function fn2() {}
function fn3() {
  return;
}

// function func3(): boolean
function func3() {
  return false;
}
function func4(): void {
  return false; // 报错
}

// function func5(): undefined
function fn5() {
  return undefined;
}
// function func6(): void
function fn6(): void {
  return undefined;
}

// 在关闭 strictNullChecks 配置的情况下才能成立
const a: void = null;

// 不关也成立
const b: void = undefined;

`never`类型

表示永不存在的值的类型。例如，never类型是那些总是会抛出异常、没有返回值的函数表达式、箭头函数表达式的返回值类型

function error(message: string): never {
  throw new Error(message);
}

function infiniteLoop(): never {
  while (true) {}
}

索引签名

索引签名可以定义对象内的属性、值的类型

interface Foo {
  [propName: string]: number;
}

高级类型

类型别名

使用type定义一个类型别名

// 此处直接注解name是一个string类型
let name: string;

// 此处定义一个别名age
type age = string | number;

let user1: age = 23;
let user2: age = '23';

索引类型

keyof，它可以将对象中的所有键转换为对应的字面量类型，然后再组合成联合类型。类似于 JS 中的 Object.keys(obj).join(' | ')。

interface Button {
  text: string;
  size: number;
  isDisable: boolean;
}

type ButtonType = keyof Button; // "text" | "size" | "isDisable"

type TextType = Button['text']; // string

这里 Button['text'] 中的 text 并不是字符串值，而是字面量类型。

type PropTypeUnion = Button[keyof Button]; // string | number | boolean

类型查询 typeof

typeof 用于类型查询，返回 TS 类型。

let str1 = 'hello';
const str2 = 'world';

type StrType1 = typeof str1; // string
type StrType2 = typeof str2; // "world"

const nullVar = null;
type Null = typeof nullVar; // null

const undefinedVar = undefined;
type Undefined = typeof undefined; // undefined

const fun = (n: number) => n > 100;
type Fun = typeof fun; // (input: number) => boolean

const user = { name: 'zgh', age: 18 };

type UserType = typeof user;
// 等同于：
// type UserType = {
//     name: string;
//     age: number;
// }

type UserType = keyof typeof user;
// 等同于：
// type UserType = 'name' | 'age';

一般和 keyof 一起使用：

type unionType = keyof typeof T;

映射类型

可以基于现有类型创建新的类型。

type MapType<T> = {
  [Key in keyof T]?: T[Key];
};

keyof T 是查询索引类型中所有的索引，叫做索引查询
T[Key] 是获取索引类型中某个索引的值，叫做索引访问
in 是用于遍历联合类型的运算符

例如将 User 接口变成只读类型：

type ReadOnly<T> = {
  readonly [K in keyof T]: T[K];
};

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

type ReadOnlyUser = ReadOnly<User>;

结果就是：

type ReadOnlyUser = {
  readonly name: string;
  readonly age: number;
};

类型约束

使用 extends 关键字。

示例中，约束 fn 的参数只能是 BaseType 类型

type BaseType = string | number;

function fn<T extends BaseType>(value: T): T {
  return value;
}

fn(1);

类型约束一般和类型索引一起使用，例如通过对象的键名获取值：

function getValue<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

条件类型

允许基于某个条件选择不同的类型。运用三元运算符，即T extends U ? X : Y，如果T是U的子类型，则返回X，否则返回Y。

type IsString<T> = T extends string ? true : false;

type Test1 = IsString<string>; // true
type Test2 = IsString<number>; // false

联合类型

以|为标记，声明类型为多个类型中的一个。

type PropType1 = number | string;

type PropType2 = 'a' | 'b' | 'c';

示例中的'a'、'b'、'c'被称为字面量类型，用来约束取值只能是这几个值中的一个。

type UserProps =
  | {
      name: string;
      age: number;
    }
  | {
      name: string;
      sex: string;
    };

const p1: UserProps = {
  name: 'zgh',
  sex: 'man'
};
const p2: UserProps = {
  name: 'zgh',
  age: 18
};

交叉类型

交叉类型是将多个类型合并为一个类型，用&将多个类型合并在一起。

type A = { a: number };
type B = A & { b: number };

let obj: B = { a: 1, b: 1 };

1、同名的基础类型的属性合并

如果有同名的属性，且是基础类型，如type A = { a: number; b: string };里也有 b 属性，结果会报错，不存在覆盖现象。

因为合并后 b 的类型为 string & number，很明显这种类型是不存在的，所以 b 的类型为 never。

2、同名的引用类型的属性合并

interface A {
  x: { a: boolean };
}
interface B {
  x: { b: string };
}
interface C {
  x: { c: number };
}

type ABC = A & B & C;

let abc: ABC = {
  x: {
    a: true,
    b: 'ts',
    c: 6
  }
};

可以合并成功，因为 x 属性的类型为{ a: boolean } & { b: string } & { c: number }，合并后为{ a: boolean; b: string; c: number }。

注意，如果 x 属性里面的属性是同名的，如{ a: boolean } & { a: string } & { a: number }，则结果依然是 never。

type 和 interface 的区别

interface 可以继承，type 不可以
type 更便于派生新类型

类型别名可以直接注解字符串、数字等类型，而接口只能注解对象

type name = string;

type user1 = { name: string; age: number };

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

使用场景：

在 React 或 Vue 中，定义组件的 props 类型，推荐使用 interface
在针对组件定义一些属性类型的时候，推荐使用 type

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

type ButtonSize = 'small' | 'large' | number;
type ButtonType = 'primary' | 'secondary' | 'danger';

interface MyButtonProps {
  size: ButtonSize;
  type: ButtonType;
}

安装​

编译​

类型​

字面量类型​

object 类型​

null 和 undefined​

数组类型​

tuple 元组类型​

Symbol类型​

枚举类型​

Any类型​

unknown类型​

void类型​

never类型​

索引签名​

高级类型​

类型别名​

索引类型​

类型查询 typeof​

映射类型​

类型约束​

条件类型​

联合类型​

交叉类型​

type 和 interface 的区别​

安装

编译

类型