const str: string = 'str'
const num: number = 0
const bool: boolean = false
const un: undefined = undefined
const n: null = null
const sym: symbol = Symbol('sym')
const bint: bigint = BigInt(9999999999999999)
const obj: object = {}

其他类型

数组

1 2	`const arr1:string[] = [] // 每一项都是字符串的数组 const arr2:Array<number> = [] // 每一项都是数字的数组`

元组

1
2
3

const tup1:[string, number] = ['shy', 18] // 元组 第一项为字符串 第二项为数字 共两项
const tup2:[string, number?] = ['shy'] // 元组 第一项为字符串 第二项为数字 共两项 第二项是可选的可以没有
const tup3:[name: string, age?: number] // 可以给每一项命名

函数

function func1(x: number, y: number): number {
  return x * y
}
// func1 的类型为 (x: number, y: number) => number
const func2: (x: number, y: number) => number = (x, y) => x + y
const func3 = (x: number, y: number): number => x + y

在 JavaScript 中， void 允许在表达式执行完成时，产生（某些地方）期望获得的 undefined 值。
void 运算符通常只用于获取 undefined 的原始值，一般使用 void(0) （等同于 void 0 ）。在上述情况中，也可以使用全局变量 undefined 来代替。
详见 MDN

在 TS 中 void 描述一个函数没有显示返回值是的类型。

any

，

any

也可以赋值给任意类型；任意类型都能赋值给


      unknown

，但是


      unknown

只能赋值给


      unknown/any

类型;


      unknown

在不进行类型推断的时候，无法直接使用；

any

则没有这个限制;

类型不兼容时使用

any

：推荐使用

as

进行类型断言

类型太复杂不想写使用

any

：推荐使用

as

进行类型断言，找到你所需要的最小单元

不清楚具体类型是什么而使用

any

：推荐声明时使用


      unknown

来代替，在具体调用的地方再进行断言

never

never 类型标识不存在的类型。

字面量类型

指一些具体的值作为类型，一般与联合类型一起使用：

1 2	`const num: 1 \| 2 = 1 // 当前num只是赋值1或者2 const str: 'shy' \| 'hang' = 'shy'`

枚举

枚举是 TS 扩展的类型，使用 enum 关键字来声明。

enum PaperType {
  A4 = 'A4',
  A3 = 'A3',
  A5 = 'A5',
}

上述代码编译为 JavaScript ：

"use strict";
var PaperType;
(function (PaperType) {
    PaperType["A4"] = "A4";
    PaperType["A3"] = "A3";
    PaperType["A5"] = "A5";
})(PaperType || (PaperType = {}));

接口

接口 interface 是对行为的抽象， TypeScript 里常用来对对象进行描述

interface Person {
  name: string // name为字符串
  readonly age: number // age为数值 readonly: 只读属性
  address?: string // address为字符串 可选的
}

interface 与 type

TS官方文档

type 可以用来定义原始类型、联合/交叉类型、元组等， interface 则不行


     interface

声明的同名类型可以进行合并，而


     type

则不可以，会报标识符重复的错误

interface Person1 {
  name: string
}
interface Person1 {
  age: number
}
let person: Person1 // person 的类型为{name:string; age: number}
type Person2 = {
  name: string
}
// 'Person2' is already defined.
type Person2 = {
  age: number
}


     interface

会有索引签名的问题，而


     type

没有

interface Demo1 {
name: string
}
type Demo2 = {
  name: string
}
const data1: Demo1 = { name: 'name1' }
const data2: Demo2 = { name: 'name2' }
interface PropType {
  [key: string]: string
}
let prop: PropType
prop = data1 // 不能将类型“Test1”分配给类型“PropType”。类型“Test1”中缺少类型“string”的索引签名。ts(2322)
prop = data2 // 正常

建议：官方推荐使用 interface，当 interface 无法满足，例如需要定义联合类型等，再选择使用 type

联合类型

表示一组可用的类型集合，只要属于其中之一就属于这个联合类型

1	`const union: string \| number = 'union' // 表示union可以使string类型也可以是number类型`

交叉类型

表示一组类型的叠加，需要满足所有条件才可以属于这个交叉类型，一般用于接口的合并

interface A {
  name: string
}
interface B {
  age: number
}
const x: A & B = { name: 'shy', age: 18 }
// 如果两个类型出现重复的key则每一个key都会进行交叉
// never
type AA = number
type BB = string
type U = A & B // U 的类型就会是nuver

泛型

泛型是一种抽象类型，只有在调用时才知道具体的类型。如果将类型类比为函数，那么泛型就相当于函数中的参数了。

简单理解：类型层面的参数

1
2
3

function add<T>(a: T): T {
  return a
}

typeof

typeof 可以获取变量或者属性对应的类型，返回的是一个 TS 类型：

let str = 'shy'
type STR = typeof str // string
// ----------------------------------------------------------------
let obj = {
  name: 'shy',
  age: 18,
  address: 'Qingdao',
  c: 1 as any
}

type OBJ = typeof obj
// type OBJ = {
//   name: string;
//   age: number;
//   address: string;
//   c: any;
// }

keyof

keyof 用于获取类型中所有的键，返回一个联合类型：

type OBJ = {
  name: string;
  age: number;
  address: string;
  c: any;
}
type OBJKEY = keyof OBJ // "name" | "age" | "address" | "c"

in

in 用于遍历类型：

type OBJKEY = "name" | "age" | "address" | "c"

type OBJ = {
  [key in OBJKEY]: string
}
// 相当于
// type OBJ = {
//   name: string;
//   age: string;
//   address: string;
//   c: string;
// }

extends

继承

type A<T extends string> = T[]
type A1 = A<string>
type A2 = A<number> // 类型“number”不满足约束“string”。

// extends还可以用于条件判断
type B<T> = T extends string ? string : string[]
type B1 = B<string> // type B1 = string
type B2 = B<number> // type B2 = string[]

infer

工具类型

Partial 将所有属性变为可选

/**
 * Make all properties in T optional
 */
type Partial<T> = {
    [P in keyof T]?: T[P];
};
// ----------
type OBJ = {
  name: string;
  age: number;
  address: string;
  c: any;
}
type C = Partial<OBJ>
// type C = {
//   name?: string | undefined;
//   age?: number | undefined;
//   address?: string | undefined;
//   c?: any;
// }

Partial 只能将最外层的属性变为可选，类似浅拷贝，如果要想把深层地将所有属都变成可选，可以手动实现一下:

1
2
3

type DeepPartial<T> = {
    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P] | undefined
}

Required 将所有属性变为必选

/**
 * Make all properties in T required
 */
type Required<T> = {
    [P in keyof T]-?: T[P];
};
// ----------
type C = {
  name?: string | undefined;
  age?: number | undefined;
  address?: string | undefined;
  c?: any;
}

type D = Required<C>
// type D = {
//   name: string;
//   age: number;
//   address: string;
//   c: any;
// }

Readonly 将所有属性都变成只读，不可修改

/**
 * Make all properties in T readonly
 */
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};
// ----------
type OBJ = {
  name: string;
  age: number;
  address: string;
  c: any;
}
type E = Readonly<OBJ>
// type E = {
//   readonly name: string;
//   readonly age: number;
//   readonly address: string;
//   readonly c: any;
// }

Record 以指定的类型生成对应类型的键值对

以指定的类型生成对应类型的键值对，例如我们经常会使用 Record<string, unknown> 或者 Record<string, any> 来对对象的类型进行声明

/**
 * Construct a type with a set of properties K of type T
 */
type Record<K extends keyof any, T> = {
    [P in K]: T;
};
// --------
type AA = Record<string, string>
// type AA = {
//     [x: string]: string;
// }

Exclude 移除属于指定类型的部分

/**
 * Exclude from T those types that are assignable to U
 */
type Exclude<T, U> = T extends U ? never : T;
// ----------
type A = Exclude<"name" | "age", "name">
// type A = "age"

Extract 保留指定类型的部分

/**
 * Extract from T those types that are assignable to U
 */
type Extract<T, U> = T extends U ? T : never;
// ----------
type A = Extract<"name" | "age", "name">
// type A = "name"
type B = Extract<string | number | boolean, number>
// type B = number

NonNullable 去除类型中的 null 和 undefined

/**
 * Exclude null and undefined from T
 */
type NonNullable<T> = T & {};
// ---------
type A = NonNullable<"a" | number | null | undefined>
// type A = number | "a"

Pick 以选中的属性生成新的类型

/**
 * From T, pick a set of properties whose keys are in the union K
 */
type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};
// ---------
type OBJ = {
  name: string;
  age: number;
  address?: string;
  c?: any;
}
type A = Pick<OBJ, "name" | "address">
// type A = {
//   name: string;
//   address?: string | undefined;
// }

Omit 排除选中的属性，以剩余的属性生成新的类型

/**
 * Construct a type with the properties of T except for those in type K.
 */
type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;
// ----------
type OBJ = {
  name: string;
  age: number;
  address?: string;
  c?: any;
}
type A = Omit<OBJ, "name" | "address">
// type A = {
//   age: number;
//   c?: any;
// }

Parameters 获得函数参数的类型

/**
 * Obtain the parameters of a function type in a tuple
 */
type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;
// ---------------
type FUNC = (x: number, y: number) => number
type FUNCParam = Parameters<FUNC>
// type FUNCParam = [x: number, y: number]

ReturnType 获取函数返回值的类型

/**
 * Obtain the return type of a function type
 */
type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;
// ---------------
type FUNC = (x: number, y: number) => number
type FUNCReturnType = ReturnType<FUNC>
// type FUNCReturnType = number

tsconfig

{
  "compilerOptions": {
    "baseUrl": ".", // baseUrl 用于设置基础 url，可以帮我们省掉一些多余的路径前缀。
    "module": "ESNext", // 编译后的 JS 使用哪种模块系统。
    "target": "es2016", // 指定编译的目标版本。
    "lib": [ // TypeScript 默认自带通用的 JS 内置 API 的类型声明
      "DOM",
      "ESNext"
    ],
    "strict": true, // 启用严格模式，能够更能保证类型检测的正确。
    "jsx": "preserve", // 如何处理 .tsx 文件中对于 jsx 的生成，常用值包括：react/preserve
    "esModuleInterop": true, // 开启后会生成辅助函数以兼容处理在 esm 中导入 cjs 的情况
    "declaration": false, // 是否给每个编译出来的 JS 生成对应的 d.ts 类型声明文件
    "declarationDir": "./types", // 指定编译生成的类型声明文件输出的目录。
    "skipLibCheck": true, // 是否跳过非源代码中所有类型声明文件（.d.ts）的检查
    "outDir": "./dist", // 编译文件的输出目录，默认为 .，即项目根目录。如果不设置它，编译后的文件就会和源文件混杂在一起。通常我们会将 outDir 设置为 "./dist"。
    "moduleResolution": "node", // 模块解析策略，支持 node/classic，后者基本不推荐使用
    "resolveJsonModule": true, // 是否支持导入 json 文件，并做类型推导和检查
    "noUnusedLocals": true, // 存在未使用的参数时是否报错
    "strictNullChecks": true, // 是否启用严格的 null 检查
    "noUnusedParameters": false, // 存在未使用的参数时是否报错
    "noEmit": false, // 是否将构建产物写入文件系统，一个常见的实践是只用 tsc 进行类型检查，使用单独的打包工具进行打包
    "allowJs": true, // 将 js 文件也作为编译对象，可以被 ts 文件引入。布尔值，默认为 false。
    "checkJs": false, //  是否检查 .js 文件中的错误
    "forceConsistentCasingInFileNames": true,
    "sourceMap": false, // 是否生成对应的 .map 文件
    "paths": { // 路径重映射。
      "@/": [
        "./src"
      ]
    },
    "types": [] // 类型声明的一种引入方式是 @types 包，比如 React 框架使用了 flow 作为类型系统，为了支持 TypeScript，React 团队又写一套 d.ts 类型文件，发布到 @types/react 包上。
  },
  "exclude": [
    "dist",
    "node_modules"
  ],
  "include": [
    "src"
  ]
}