技术文档中心
首页
React
Vue
TypeScript
Kotlin
React Native
Electron
Android
首页
React
Vue
TypeScript
Kotlin
React Native
Electron
Android
  • 基础入门

    • TypeScript 学习指南
    • 基础类型
    • 函数
    • 接口
    • 类
  • 进阶内容

    • 泛型
    • 高级类型
    • 工具类型
    • 装饰器
    • 模块
  • 实战应用

    • 配置文件
    • 实战应用

泛型

基础泛型

function identity<T>(arg: T): T {
  return arg;
}

// 使用
identity<string>('hello');
identity<number>(123);
identity(true); // 自动推断

泛型数组

function getFirst<T>(arr: T[]): T | undefined {
  return arr[0];
}

getFirst([1, 2, 3]);      // number
getFirst(['a', 'b', 'c']); // string

// 使用 Array<T>
function getLast<T>(arr: Array<T>): T | undefined {
  return arr[arr.length - 1];
}

泛型接口

interface GenericIdentityFn<T> {
  (arg: T): T;
}

let myIdentity: GenericIdentityFn<number> = function(arg) {
  return arg;
};

泛型类

class GenericNumber<T> {
  zeroValue: T;
  add: (x: T, y: T) => T;
  
  constructor(zeroValue: T, add: (x: T, y: T) => T) {
    this.zeroValue = zeroValue;
    this.add = add;
  }
}

let myNumber = new GenericNumber<number>(0, (x, y) => x + y);
let myString = new GenericNumber<string>('', (x, y) => x + y);

泛型约束

interface Lengthwise {
  length: number;
}

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

logLength('hello');     // 正确
logLength([1, 2, 3]);   // 正确
// logLength(123);      // 错误

多个类型参数

function pair<T, U>(first: T, second: U): [T, U] {
  return [first, second];
}

pair<string, number>('age', 25);
pair('name', 'John'); // 自动推断

默认类型参数

interface Container<T = string> {
  value: T;
}

let stringContainer: Container = { value: 'hello' };
let numberContainer: Container<number> = { value: 123 };

泛型工具类型

Partial

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

// 所有属性变为可选
type PartialUser = Partial<User>;

let user: PartialUser = {
  name: 'John'
};

Required

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

// 所有属性变为必需
type RequiredUser = Required<User>;

let user: RequiredUser = {
  name: 'John',
  age: 25
};

Readonly

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

// 所有属性变为只读
type ReadonlyUser = Readonly<User>;

let user: ReadonlyUser = {
  name: 'John',
  age: 25
};

// user.name = 'Jane'; // 错误

Pick

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

// 选择部分属性
type UserPreview = Pick<User, 'name' | 'email'>;

let preview: UserPreview = {
  name: 'John',
  email: 'john@example.com'
};

Omit

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

// 排除部分属性
type UserPublic = Omit<User, 'password'>;

let user: UserPublic = {
  name: 'John',
  age: 25
};

Record

// 创建对象类型
type PageInfo = Record<string, { title: string; url: string }>;

let pages: PageInfo = {
  home: { title: '首页', url: '/' },
  about: { title: '关于', url: '/about' }
};

Exclude

type T = Exclude<'a' | 'b' | 'c', 'a'>; // 'b' | 'c'

Extract

type T = Extract<'a' | 'b' | 'c', 'a' | 'f'>; // 'a'

NonNullable

type T = NonNullable<string | number | null | undefined>; // string | number

ReturnType

function getUser() {
  return { name: 'John', age: 25 };
}

type User = ReturnType<typeof getUser>; // { name: string; age: number }

Parameters

function createUser(name: string, age: number) {
  return { name, age };
}

type Params = Parameters<typeof createUser>; // [string, number]
最近更新: 2026/2/6 15:39
Contributors: hailong
Next
高级类型