1. 开发环境搭建

创建自己的项目文件，并执行一下命令

# 初始化项目(npm初始化项目中共字段比yarn多)
npm init -y

# 下载 typescript 和 tslint
yarn add -D typescript tslint

# 初始化ts(生成tsconfig.json)
tsc --init

# 安装webpack4
yarn add -D webpack webpack-cli webpack-dev-server

# 安装ts解析
yarn add -D ts-loader

#安装插件
yarn add -D clean-webpack-plugin html-webpack-plugin

配置 启动脚本

"dev": "cross-env NODE_ENV=development webpack-dev-server --config ./build/webpack.config.js"

配置 webpack

const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    // 配置入口文件
    entry: './src/index.ts',
    // 输出文件
    output: {
        filename: 'main.js',
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js'], //配置js ts tsx文件
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/, //忽略解析node_modules中文件
            },
        ],
    },
    devtool:
        process.env.NODE_ENV === 'production' ? false : 'inline-source-map',
    devServer: {
        contentBase: './dist',
        stats: 'errors-only',
        compress: false,
        host: 'localhost',
        port: 8089,
    },
    plugins: [
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: ['./dist'],
        }),
        new HtmlWebpackPlugin({
            template: './src/template/index.html',
        }),
    ],
}

2. tsconfig.json 详解

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "ES2018", // 编译的目标是什么版本的
    "module": "commonjs", // 生成模块代码时指定模块系统
    "moduleResolution": "node", // 指定如何解析模块以进行导入
    "experimentalDecorators": true, // 启用实验性的 ES 装饰器
    "emitDecoratorMetadata": true,
    "inlineSourceMap": true, // 生成目标文件的inline SourceMap，inline SourceMap会包含在生成的js文件中
    "noImplicitThis": true, // 不允许this有隐式的any类型
    "noUnusedLocals": true, // 检查只声明、未使用的局部变量(只提示不报错)
    "stripInternal": true,
    "skipLibCheck": false,
    "pretty": true,
    "declaration": true, // 是否自动创建类型声明文件
    "typeRoots": ["./typings", "./node_modules/@types"],
    "outDir": "dist" // 输出目录
  },
  // 编译器排除文件
  "exclude": ["dist", "node_modules", "test"]
}

3. 数据类型

// 布尔值
let bool: boolean = true;

// 数字类型
let num: number = 123;

// 字符串类型
let str: string = "rain";

// 数组类型
let arr1: number[] = [5];
let arr2: Array<number> = [7];
let arr3: (string | number)[] = [1, "a"];

// 元祖类型(数值个数和类型要对应)
let tuple: [string, number, boolean] = ["a", 1, true];

// 枚举类型
enum Roles {
  SUPER_ADMIN = 1,
  ADMIN = 2,
  USER = 3,
}
console.log(Roles.SUPER_ADMIN); // 打印1
console.log(Roles.ADMIN); // 打印2
console.log(Roles.USER); // 打印3
console.log(Roles[2]); // 打印 ADMIN

// any类型:可以是任何类型
let value: any;

// void类型:没有返回值
const consoleText = (text: string): void => {
  console.log("text");
};

// null 和 undefined
let u: undefined = undefined;
let n: null = null;

// never类型 永远不存在的值类型(抛错和死循环)
const errorFunc = (message: string): never => {
  throw new Error(message);
};
const infiniteFunc = (): never => {
  while (true) {}
};

// 对象类型
let obj: object = {
  name: "json",
};

// 类型断言
// 两种形式  (<string>target) (target as string)
// tips： .tsx 中只能使用 (target as string)这种形式的类型断言
const getLength = (target: string | number): number => {
  if ((<string>target).length || (target as string).length === 0) {
    return (<string>target).length;
  } else {
    return target.toString().length;
  }
};

3.1. unknown 和 any 的区别

可以将任何东西赋给 unknown 类型，但在进行类型检查或类型断言之前，不能对 unknown 进行操作。

可以把任何东西分配给 any 类型，也可以对 any 类型进行任何操作

function func(callback: unknown) {
  // 可以将任何东西赋给 `unknown` 类型，
  // 但在进行类型检查或类型断言之前，不能对 `unknown` 进行操作
  if (typeof callback === "function") {
    callback();
  }
}

func(1);

4. 接口

4.1. 基本用法

接口定义对象类型

interface NameInfo {
  firstName: string;
  lastName: string;
}

const getFullName = ({ firstName, lastName }: NameInfo): string => {
  return `${firstName} ${lastName}`;
};

console.log(getFullName({ firstName: "rain", lastName: "luck" }));

4.2. 可选属性

color?: string

// 设置可选属性 使用？进行标识(color?: string)
interface Vegetables {
  color?: string;
  type: string;
}
const getVegetables = ({ color, type }: Vegetables) => {
  return `A ${color ? color + "" : ""} ${type}`;
};
console.log(
  getVegetables({
    // color: 'blue',
    type: "apple",
  })
);

4.3. 多余属性检查

方法一：类型断言

interface Vegetables {
  color?: string;
  type: string;
}
const getVegetables = ({ color, type }: Vegetables) => {
  return `A ${color ? color + "" : ""} ${type}`;
};
getVegetables({
  // color: 'blue',
  type: "apple",
  size: 20,
} as Vegetables);

方法二：索引签名

interface Vegetables {
  color?: string;
  type: string;
  [props: string]: any;
}
const getVegetables = ({ color, type }: Vegetables) => {
  return `A ${color ? color + "" : ""} ${type}`;
};
getVegetables({
  // color: 'blue',
  type: "apple",
  size: 20,
  time: "2020",
});

方法三：利用类型兼容性

interface Vegetables {
  color?: string;
  type: string;
}

const getVegetables = ({ color, type }: Vegetables) => {
  return `A ${color ? color + "" : ""} ${type}`;
};

const vegetableInfo = {
  color: "blue",
  type: "apple",
  size: 20,
};
console.log(getVegetables(vegetableInfo));

4.4. 只读属性

readonly type: string,

interface Vegetables {
  color?: string;
  readonly type: string;
}
const vegetableObj: Vegetables = {
  type: "tomato",
};
vegetableInfo.type = "carrot"; //报错！！

4.5. 接口定义函数结构

interface AddFunc {
  (num1: number, num2: number): number;
}

const add: AddFunc = (n1, n2) => {
  return n1 + n2;
};

4.6. 定义索引类型

interface RoleDic {
  [id: number]: string;
}
const role1: RoleDic = {
  0: "super_admin",
};

4.7. 接口的继承

interface Vegetables {
  color: string;
}

interface Tomato extends Vegetables {
  radius: number;
}

inteface Carot extends Vegetables {
  length: number;
}

const tomato: Tomato = { color: "red", radius: 12 };

4.8. 混合类型接口

interface Counter {
  (): void;
  count: number;
}

const getCounter = (): Counter => {
  const c = () => {
    c.count++;
  };
  c.count = 0;
  return c;
};

const counter: Counter = getCounter();

counter();
console.log(counter.count);
counter();
console.log(counter.count);
counter();
console.log(counter.count);
//1 2 3

4.9. 为对象动态分配属性

interface LooseObject {
  name: string;
  age?: number;
  [key: string]: any;
}

let obj: Developer = { name: "rain" };
obj.age = 30;
obj.city = "BeiJing";

5. 函数

为函数定义类型

//  完整的函数类型
function add(arg1: number, arg2: number): number {
  return arg1 + arg2;
}

//  使用类型别名定义
type Add = (x: number, y: number) => number;
let addFunc: Add;
addFunc = (arg1: number, arg2: number): number => {
  return arg1 + arg2;
};

函数重载（只能使用 function 进行重载）

function handleData(x: string): string[];
function handleData(x: number): number[];
function handleData(x: any): any[] {
  if (typeof x === "string") {
    return x.split("");
  } else {
    return x
      .toString()
      .split("")
      .map((item: any) => Number(item));
  }
}

6. 泛型

就像传递参数一样，我们传递了我们想要用于特定函数调用的类型。

参考上面的图片，当我们调用 identity<Number>(1) ，Number 类型就像参数 1 一样，它将在出现 T 的任何位置填充该类型。图中 <T> 内部的 T 被称为类型变量，它是我们希望传递给 identity 函数的类型占位符，同时它被分配给 value 参数用来代替它的类型：此时 T 充当的是类型，而不是特定的 Number 类型。

其中 T 代表 Type，在定义泛型时通常用作第一个类型变量名称。但实际上 T 可以用任何有效名称代替。除了 T 之外，以下是常见泛型变量代表的意思：

• K（Key）：表示对象中的键类型；
• V（Value）：表示对象中的值类型；
• E（Element）：表示元素类型。

其实并不是只能定义一个类型变量，我们可以引入希望定义的任何数量的类型变量。比如我们引入一个新的类型变量 U，用于扩展我们定义的 identity 函数：

function identity<T, U>(value: T, message: U): T {
  console.log(message);
  return value;
}

console.log(identity<Number, string>(68, "Semlinker"));

除了为类型变量显式设定值之外，一种更常见的做法是使编译器自动选择这些类型，从而使代码更简洁。我们可以完全省略尖括号，比如：

function identity<T, U>(value: T, message: U): T {
  console.log(message);
  return value;
}

console.log(identity(68, "Semlinker"));

对于上述代码，编译器足够聪明，能够知道我们的参数类型，并将它们赋值给 T 和 U，而不需要开发人员显式指定它们。

7. 内置工具类型

7.1. Exclude<T,U> 从 T 可分配给的类型中排除 U

type Exclude<T, U> = T extends U ? never : T;

type E = Exclude<string | number, string>;
let e: E = 10;

7.2. Extract<T,U> 从 T 可分配给的类型中提取 U

type Extract<T, U> = T extends U ? T : never;

type E = Extract<string | number, string>;
let e: E = "1";

7.3. NonNullable 从 T 中排除 null 和 undefined

type NonNullable<T> = T extends null | undefined ? never : T;

type E = NonNullable<string | number | null | undefined>;
let e: E = null;

7.4. ReturnType infer 最早出现在此 PR 中，表示在 extends 条件语句中待推断的类型变量

type ReturnType<T extends (...args: any[]) => any> = T extends (
  ...args: any[]
) => infer R
  ? R
  : any;
function getUserInfo() {
  return { name: "hello", age: 10 };
}

// 通过 ReturnType 将 getUserInfo 的返回值类型赋给了 UserInfo
type UserInfo = ReturnType<typeof getUserInfo>;

const userA: UserInfo = {
  name: "hello",
  age: 10,
};

可见 该工具类型主要是获取函数类型的返回类型

7.5. Parameters 该工具类型主要是获取函数类型的参数类型

type Parameters<T> = T extends (...args: infer R) => any ? R : any;

type T0 = Parameters<() => string>; // []
type T1 = Parameters<(s: string) => void>; // [string]
type T2 = Parameters<<T>(arg: T) => T>; // [unknown]

7.6. Partial 可以将传入的属性由非可选变为可选

Partial<T> 是 TypeScript 提供的工具类型，用于将某个类型的所有属性变为可选。它非常适合用于处理对象的部分更新、配置对象参数、默认值合并等场景。使用 Partial 可以让代码更灵活，避免手动修改每个字段为可选。它的实现基于映射类型和索引类型，是 TS 类型系统中最常用也最基础的工具之一。

type Partial<T> = { [P in keyof T]?: T[P] };
interface A {
  a1: string;
  a2: number;
  a3: boolean;
}
type aPartial = Partial<A>;
const a: aPartial = {}; // 不会报错

7.7. Required 可以将传入的属性中的可选项变为必选项，这里用了 -? 修饰符来实现

interface Person {
  name: string;
  age: number;
  gender?: "male" | "female";
}
/**
 * type Required<T> = { [P in keyof T]-?: T[P] };
 */
let p: Required<Person> = {
  name: "hello",
  age: 10,
  gender: "male",
};

7.8. Readonly 通过为传入的属性每一项都加上 readonly 修饰符来实现

interface Person {
  name: string;
  age: number;
  gender?: "male" | "female";
}
//type Readonly<T> = { readonly [P in keyof T]: T[P] };
let p: Readonly<Person> = {
  name: "hello",
  age: 10,
  gender: "male",
};
p.age = 11; //error

7.9. Pick<T,K> Pick 能够帮助我们从传入的属性中摘取某些返回

interface Todo {
  title: string;
  description: string;
  done: boolean;
}
/**
 * From T pick a set of properties K
 * type Pick<T, K extends keyof T> = { [P in K]: T[P] };
 */
type TodoBase = Pick<Todo, "title" | "done">;

// =
type TodoBase = {
  title: string;
  done: boolean;
};

7.10. Record<K,T> 构造一个类型，该类型具有一组属性 K，每个属性的类型为 T。可用于将一个类型的属性映射为另一个类型。Record 后面的泛型就是对象键和值的类型

简单理解：K 对应对应的 key，T 对应对象的 value，返回的就是一个声明好的对象 但是 K 对应的泛型约束是keyof any 也就意味着只能传入 string|number|symbol

// type Record<K extends keyof any, T> = {
// [P in K]: T;
// };
type Point = "x" | "y";
type PointList = Record<Point, { value: number }>;
const cars: PointList = {
  x: { value: 10 },
  y: { value: 20 },
};

7.11. Omit<K,T> 基于已经声明的类型进行属性剔除获得新类型

// type Omit=Pick<T,Exclude<keyof T,K>>
type User = { id: string; name: string; email: string; };
// UserWithoutEmail ={id: string;name: string;}
type UserWithoutEmail = Omit<User, "email">;

X. 参考文章

• 细数这些年被困扰过的 TS 问题 - 阿宝哥
• 最全的 TypeScript 学习指南 - Big shark@LX
• Ts 高手篇：22 个示例深入讲解 Ts 最晦涩难懂的高级类型工具 - 愣锤
• 最全的TypeScript学习指南 - 掘金