TypeScript 20条实用技巧：工具类型、类型收窄、泛型与模板字面量

摘要：TypeScript早已成为日常开发的标配。本文整理了20条实用技巧，涵盖工具类型、类型收窄、泛型、枚举替代、satisfies、模板字面量类型、可辨识联合等，每条配有简洁代码示例，可直接用于项目。

TypeScript早已成为日常开发的标配。本文整理了20条实用技巧，涵盖工具类型、类型收窄、泛型、枚举替代、satisfies、模板字面量类型、可辨识联合等，每条配有简洁代码示例，可直接用于项目。

一、工具类型（Utility Types）

1. Partial —— 所有属性可选

interface User {
  id: number
  name: string
  email: string
}

// 更新时只需传部分字段
function updateUser(id: number, data: Partial<User>) {
  // data 可以是 { name?: string, email?: string } 等
}
updateUser(1, { name: '张三' })  // 只更新name

2. Required —— 所有属性必选

interface Config {
  apiUrl?: string
  timeout?: number
}

const config: Required<Config> = {
  apiUrl: 'https://api.example.com',
  timeout: 5000
}
// 缺少任意属性都会报错

3. Pick —— 挑选部分属性

interface User {
  id: number
  name: string
  email: string
  password: string
}

type UserPreview = Pick<User, 'id' | 'name'>
// { id: number; name: string }

4. Omit —— 排除部分属性

type UserWithoutPassword = Omit<User, 'password'>
// { id: number; name: string; email: string }

5. Record —— 构造键值对类型

type Page = 'home' | 'about' | 'contact'
type PageConfig = Record<Page, { title: string; path: string }>

const config: PageConfig = {
  home: { title: '首页', path: '/' },
  about: { title: '关于', path: '/about' },
  contact: { title: '联系', path: '/contact' }
}

二、类型收窄（Type Narrowing）

6. typeof 收窄

function padLeft(value: string | number) {
  if (typeof value === 'number') {
    return value.toString().padStart(2, '0')
  }
  return value.padStart(2, '0')  // 此处value已收窄为string
}

7. 真值收窄

function print(str: string | null | undefined) {
  if (str) {
    console.log(str.toUpperCase())  // str已排除null/undefined
  }
}

8. in 操作符收窄

type Dog = { bark: () => void }
type Cat = { meow: () => void }

function speak(animal: Dog | Cat) {
  if ('bark' in animal) {
    animal.bark()
  } else {
    animal.meow()
  }
}

9. 类型谓词 is

function isString(val: unknown): val is string {
  return typeof val === 'string'
}

const data: unknown = 'hello'
if (isString(data)) {
  console.log(data.toUpperCase())  // data被收窄为string
}

三、泛型在组件中的使用

10. 泛型组件（Vue 3）

vue

<script setup lang="ts" generic="T">
defineProps<{
  items: T[]
  keyFn: (item: T) => string | number
}>()
</script>

<template>
  <div v-for="item in items" :key="keyFn(item)">{{ item }}</div>
</template>

11. 泛型约束 extends

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}

const user = { name: '张三', age: 18 }
getProperty(user, 'name')  // string
getProperty(user, 'age')   // number
getProperty(user, 'foo')   // 错误

12. 泛型默认值

interface ApiResponse<T = unknown> {
  code: number
  data: T
}

// 不传泛型时，data为unknown
const res: ApiResponse = { code: 0, data: {} }
// 传泛型时
const userRes: ApiResponse<User> = { code: 0, data: { id: 1, name: '张三' } }

四、枚举替代方案

13. 常量对象 + as const

const Status = {
  Pending: 'pending',
  Success: 'success',
  Error: 'error'
} as const

type Status = (typeof Status)[keyof typeof Status]
// 'pending' | 'success' | 'error'

14. 联合类型替代数字枚举

// 避免enum的额外运行时代码
type Direction = 'up' | 'down' | 'left' | 'right'

五、satisfies 操作符（TS 4.9+）

15. 保持字面量类型同时满足接口

interface Colors {
  primary: string
  secondary: string
}

const theme = {
  primary: '#3b82f6',
  secondary: '#10b981'
} satisfies Colors

// theme.primary 类型为 '#3b82f6'，而非string
// 同时满足Colors接口约束

六、模板字面量类型

16. 字符串模板类型

type EventName = 'click' | 'focus' | 'blur'
type HandlerName = `on${Capitalize<EventName>}`
// 'onClick' | 'onFocus' | 'onBlur'

17. 动态路由类型

type Route = `/${string}`
type ApiRoute = `/api/${string}`

const path: Route = '/users'
const apiPath: ApiRoute = '/api/users'

七、可辨识联合（Discriminated Unions）

18. 用 type 字段区分联合类型

type Success = { type: 'success'; data: string }
type Error = { type: 'error'; message: string }
type Result = Success | Error

function handle(result: Result) {
  switch (result.type) {
    case 'success':
      console.log(result.data)    // 自动收窄
      break
    case 'error':
      console.log(result.message)
      break
  }
}

八、其他实用技巧

19. 非空断言与可选链

const el = document.getElementById('app')!
el.innerHTML = 'hello'

// 可选链避免undefined
const name = user?.profile?.name ?? '匿名'

20. 函数重载

function createElement(tag: 'div'): HTMLDivElement
function createElement(tag: 'span'): HTMLSpanElement
function createElement(tag: string): HTMLElement {
  return document.createElement(tag)
}

const div = createElement('div')   // HTMLDivElement
const span = createElement('span') // HTMLSpanElement

总结

技巧	适用场景
Partial / Pick / Omit	接口部分更新、类型复用
Record	映射类型、配置对象
类型收窄	联合类型分支处理
泛型组件	可复用的列表、表单组件
satisfies	保持字面量 + 类型检查
可辨识联合	状态机、API响应
常量对象 as const	替代enum

掌握这20条，日常TypeScript开发会顺畅很多，建议收藏。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_13572