TypeScript介绍

TypeScript——静态类型编辑语言（编译期做类型检查）

JavaScript——动态类型编辑语言（执行器做类型检查）

代码编译和代码执行顺序

1. 编译
2. 执行

安装TypeScript

npm install -g  typescript // 全局安装 ts

是否已经安装过 typescript 的，可以使用以下命令来验证：（如果出现版本，则说明已经安装成功）

tsc -v 

生成 tsconfig.json 配置文件

tsc --init

在我们文件中,随便写点什么

const s:string = "彼时彼刻，恰如此时此刻";
console.log(s);

控制台执行 tsc xxx.ts 命令，目录下生成了一个同名的 xxx.js 文件

var s = "彼时彼刻，恰如此时此刻";
console.log(s);

通过tsc命令，发现我们的typescript代码被转换成了熟悉的js代码

我们接着执行

node helloworld.js

安装 ts-node

那么通过我们上面的一通操作，我们知道了运行tsc命令就可以编译生成一个js文件，但是如果每次改动我们都要手动去执行编译，然后再通过 node命令才能查看运行结果岂不是太麻烦了

npm i -g ts-node // 全局安装ts-node

有了这个插件，我们就可以直接运行.ts文件了

ts-node xxx.ts

可以看到我们的打印结果已经输出

具体来源 (opens new window)

总结

TypeScript 的类型主要分为基础类型、特殊类型和高级类型。

基础类型

string

字符串

number

数字

boolean

布尔值

undefined

null

symbol

bigint

object

特殊类型

any

任意类型，会关闭类型检查

unknown

未知类型，比 any 更安全，需要类型收窄后才能使用

never

永远不会出现的类型，比如抛异常或者死循环函数

// 函数抛出异常
// 抛出异常，函数不会return，返回类型是 never
function error(): never {
  throw new Error("出错了！")
}

const res = error()
// res 的类型是 never，不会有值

// 死循环，代码永远执行不完
function loop(): never {
  while(true) {
    // 无限循环，函数永远不会退出
  }
}

// 穷尽检查
type Status = 'loading' | 'success' | 'fail'

function handleStatus(s: Status) {
  switch(s) {
    case 'loading': break
    case 'success': break
    // 故意少写 fail 的case
    default: {
      // 当新增状态，但是忘记处理分支，s会变成never
      const check: never = s
    }
  }
}

void

通常表示函数没有返回值

高级类型

union

联合类型，满足其中任意一种类型即可

// 可以是string，也可以是number
type Union = string | number

let a: Union
a = 'abc' // ✅
a = 123   // ✅
a = true  // ❌ boolean不在联合内，报错

intersection

交叉类型，必须同时满足全部类型

interface User {
  id: number
  name: string
}

interface Admin {
  role: string
}

// 交叉：同时拥有User + Admin全部属性
type AdminUser = User & Admin

const u: AdminUser = {
  id: 1,
  name: "张三",
  role: "super"
}

tuple

元组类型

 const tuple: [number, string] = [1, "zhangmazi"];

enum

枚举类型

enum Color {
  RED,
  PINK,
  BLUE,
}

const red: Color = Color.RED;
console.log(red); // 0

literal

字面量类型

// 字符串字面量
let status: 'success' | 'fail' | 'loading'

status = 'success'   // ✔合法
status = 'error'    // ❌报错，不在字面量范围内

interface

接口，主要描述对象，支持extends继承，重复声明自动合并，适合写对外对象、后端实体。

type

类型别名，可以写联合、字面量、元组等任意类型；对象扩展用&交叉；不能重复定义合并。

工具类型

Partial

将一个类型的所有属性变为可选的

type Partial<T> = {
  [P in keyof T]?: T[P];
};
interface Person {
  name: string;
  age?: number;
  weight?: number;
}
type PartialPerson = Partial<Person>;
// 相当于
interface PartialPerson {
  name?: string;
  age?: number;
  weight?: number;
}

Required

给定类型的所有属性变为必填的

type Required<T> = {
  [P in keyof T]-?: T[P];
};
type RequiredPerson = Required<Person>;
// 相当于
interface RequiredPerson {
  name: string;
  age: number;
  weight: number;
}

Pick

从给定的类型中选取出指定的键值，然后组成一个新的类型

type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
};
type NewPerson = Pick<Person, 'name' | 'age'>;
// 相当于
interface NewPerson {
  name: string;
  age?: number;
}

Omit

从给定的类型中去除出指定的键值，然后组成一个新的类型

type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;
type NewPerson = Omit<Person, 'weight'>;
// 相当于
interface NewPerson {
  name: string;
  age?: number;
}

Record

使用传入的泛型参数分别作为接口类型的属性和值

type Record<K extends keyof any, T> = {
  [P in K]: T;
};
type MenuKey = 'home' | 'about' | 'more';
interface Menu {
  label: string;
  hidden?: boolean;
}
const menus: Record<MenuKey, Menu> = {
  about: { label: '关于' },
  home: { label: '主页' },
  more: { label: '更多', hidden: true },
};

ReturnType

获取函数的返回类型

type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;
type T0 = ReturnType<() => void>; // => void
type T1 = ReturnType<() => string>; // => string

Parameters

用来获取函数的参数并返回序对

type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;
type T0 = Parameters<() => void>; // []
type T1 = Parameters<(x: number, y?: string) => void>; // [x: number, y?: string]

Readonly

给定类型的所有属性设为只读

type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};
type ReadonlyPerson = Readonly<Person>;
// 相当于
interface ReadonlyPerson {
  readonly name: string;
  readonly age?: number;
  readonly weight?: number;
}