启航知识文档

Appearance

TypeScript 学习指南 ​

目录 ​

基础类型 ​

基本类型 ​

typescript
// 布尔值
let isDone: boolean = false;

// 数字
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

// 字符串
let color: string = "blue";
let fullName: string = `Bob ${lastName}`;

// 空值
let unusable: void = undefined;
let u: undefined = undefined;
let n: null = null;

// 符号
let sym: symbol = Symbol("key");

说明：

  • 类型注解
  • 类型推断
  • 类型检查
  • 类型安全

数组和元组 ​

typescript
// 数组
let list: number[] = [1, 2, 3];
let list2: Array<number> = [1, 2, 3];

// 元组
let tuple: [string, number] = ["hello", 10];
tuple[0] = "world";
tuple[1] = 20;

// 只读数组
let readonlyArray: ReadonlyArray<number> = [1, 2, 3];

说明：

  • 数组类型
  • 元组类型
  • 只读数组
  • 类型安全

枚举 ​

typescript
// 数字枚举
enum Direction {
  Up = 1,
  Down,
  Left,
  Right
}

// 字符串枚举
enum StringEnum {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT"
}

// 常量枚举
const enum ConstEnum {
  Up,
  Down,
  Left,
  Right
}

说明：

  • 数字枚举
  • 字符串枚举
  • 常量枚举
  • 反向映射

Any 和 Unknown ​

typescript
// any 类型
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false;

// unknown 类型
let value: unknown = 4;
value = "maybe a string instead";
value = false;

// 类型断言
let someValue: unknown = "this is a string";
let strLength: number = (someValue as string).length;

说明：

  • any 类型
  • unknown 类型
  • 类型断言
  • 类型安全

接口和类型 ​

接口定义 ​

typescript
// 基本接口
interface User {
  name: string;
  age: number;
  email?: string;
  readonly id: number;
}

// 函数类型接口
interface SearchFunc {
  (source: string, subString: string): boolean;
}

// 可索引接口
interface StringArray {
  [index: number]: string;
}

// 类类型接口
interface ClockInterface {
  currentTime: Date;
  setTime(d: Date): void;
}

说明：

  • 接口定义
  • 可选属性
  • 只读属性
  • 函数类型
  • 可索引类型
  • 类类型

类型别名 ​

typescript
// 基本类型别名
type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;

// 联合类型
type StringOrNumber = string | number;

// 交叉类型
type Combined = { a: number } & { b: string };

// 映射类型
type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

说明：

  • 类型别名
  • 联合类型
  • 交叉类型
  • 映射类型

联合类型 ​

typescript
// 基本联合类型
let value: string | number;
value = "hello";
value = 42;

// 字面量联合类型
type Direction = "up" | "down" | "left" | "right";

// 对象联合类型
type Shape = 
  | { kind: "circle"; radius: number }
  | { kind: "square"; size: number }
  | { kind: "rectangle"; width: number; height: number };

说明：

  • 基本联合类型
  • 字面量联合类型
  • 对象联合类型
  • 类型守卫

交叉类型 ​

typescript
// 基本交叉类型
type Combined = { a: number } & { b: string };

// 对象交叉类型
type Person = {
  name: string;
  age: number;
};

type Employee = {
  id: number;
  department: string;
};

type EmployeePerson = Person & Employee;

说明：

  • 基本交叉类型
  • 对象交叉类型
  • 类型合并
  • 类型冲突

函数 ​

函数类型 ​

typescript
// 函数类型声明
function add(x: number, y: number): number {
  return x + y;
}

// 函数类型表达式
let myAdd: (x: number, y: number) => number = function(x: number, y: number): number {
  return x + y;
};

// 函数类型接口
interface SearchFunc {
  (source: string, subString: string): boolean;
}

说明：

  • 函数类型声明
  • 函数类型表达式
  • 函数类型接口
  • 返回类型

函数重载 ​

typescript
// 函数重载
function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
  if (typeof x === "number") {
    return Number(x.toString().split("").reverse().join(""));
  } else {
    return x.split("").reverse().join("");
  }
}

说明：

  • 函数重载
  • 重载签名
  • 实现签名
  • 类型检查

可选参数 ​

typescript
// 可选参数
function buildName(firstName: string, lastName?: string) {
  if (lastName) {
    return firstName + " " + lastName;
  } else {
    return firstName;
  }
}

// 默认参数
function buildName2(firstName: string, lastName: string = "Smith") {
  return firstName + " " + lastName;
}

说明：

  • 可选参数
  • 默认参数
  • 参数顺序
  • 类型安全

剩余参数 ​

typescript
// 剩余参数
function sum(...numbers: number[]): number {
  return numbers.reduce((a, b) => a + b, 0);
}

// 参数解构
function sum2({ a, b, c }: { a: number; b: number; c: number }): number {
  return a + b + c;
}

说明：

  • 剩余参数
  • 参数解构
  • 类型安全
  • 使用场景

泛型 ​

泛型函数 ​

typescript
// 基本泛型函数
function identity<T>(arg: T): T {
  return arg;
}

// 泛型类型变量
function loggingIdentity<T>(arg: T[]): T[] {
  console.log(arg.length);
  return arg;
}

// 泛型约束
function getProperty<T, K extends keyof T>(obj: T, key: K) {
  return obj[key];
}

说明：

  • 泛型函数
  • 泛型类型变量
  • 泛型约束
  • 类型安全

泛型接口 ​

typescript
// 基本泛型接口
interface GenericIdentityFn<T> {
  (arg: T): T;
}

// 泛型类接口
interface GenericNumber<T> {
  zeroValue: T;
  add: (x: T, y: T) => T;
}

// 泛型约束接口
interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

说明：

  • 泛型接口
  • 泛型类接口
  • 泛型约束接口
  • 类型安全

泛型类 ​

typescript
// 基本泛型类
class GenericNumber<T> {
  zeroValue: T;
  add: (x: T, y: T) => T;
}

// 泛型约束类
class Lengthwise<T extends Lengthwise> {
  length: number;
  add(x: T): T {
    return x;
  }
}

说明：

  • 泛型类
  • 泛型约束类
  • 类型安全
  • 使用场景

泛型约束 ​

typescript
// 基本约束
interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

// 多重约束
interface A {
  a: number;
}

interface B {
  b: string;
}

function multipleConstraints<T extends A & B>(arg: T): T {
  console.log(arg.a, arg.b);
  return arg;
}

说明：

  • 基本约束
  • 多重约束
  • 类型安全
  • 使用场景

高级类型 ​

映射类型 ​

typescript
// 基本映射类型
type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

type Partial<T> = {
  [P in keyof T]?: T[P];
};

// 条件映射类型
type NonNullable<T> = T extends null | undefined ? never : T;

// 递归映射类型
type DeepReadonly<T> = {
  readonly [P in keyof T]: DeepReadonly<T[P]>;
};

说明：

  • 基本映射类型
  • 条件映射类型
  • 递归映射类型
  • 使用场景

条件类型 ​

typescript
// 基本条件类型
type TypeName<T> = T extends string
  ? "string"
  : T extends number
  ? "number"
  : T extends boolean
  ? "boolean"
  : T extends undefined
  ? "undefined"
  : T extends Function
  ? "function"
  : "object";

// 分布式条件类型
type ToArray<T> = T extends any ? T[] : never;

// 条件类型中的推断
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : any;

说明：

  • 基本条件类型
  • 分布式条件类型
  • 条件类型中的推断
  • 使用场景

索引类型 ​

typescript
// 基本索引类型
type Person = {
  name: string;
  age: number;
};

type PersonKeys = keyof Person; // "name" | "age"

// 索引访问类型
type NameType = Person["name"]; // string

// 映射索引类型
type ReadonlyPerson = {
  readonly [K in keyof Person]: Person[K];
};

说明：

  • 基本索引类型
  • 索引访问类型
  • 映射索引类型
  • 使用场景

工具类型 ​

typescript
// 内置工具类型
type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

type Partial<T> = {
  [P in keyof T]?: T[P];
};

type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
};

type Record<K extends keyof any, T> = {
  [P in K]: T;
};

// 自定义工具类型
type DeepPartial<T> = {
  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
};

说明：

  • 内置工具类型
  • 自定义工具类型
  • 类型安全
  • 使用场景

最佳实践 ​

1. 类型定义 ​

  • 使用接口定义对象类型
  • 使用类型别名定义联合类型
  • 使用泛型提高代码复用性
  • 避免使用 any 类型

2. 代码组织 ​

  • 使用模块化组织代码
  • 使用命名空间组织相关类型
  • 使用类型声明文件
  • 遵循命名规范

3. 开发技巧 ​

  • 使用类型推断
  • 使用类型守卫
  • 使用类型断言
  • 使用类型工具

学习资源 ​

官方文档 ​

视频课程 ​

  • 慕课网
  • 极客时间
  • B站技术区
  • YouTube 技术频道

工具推荐 ​

启航团队技术文档

Copyright © 2024-present 启航团队