10 个你项目里可能漏掉的 TypeScript 技巧

最新推荐文章于 2025-07-29 18:18:43 发布

JaysonJin

最新推荐文章于 2025-07-29 18:18:43 发布

阅读量590

点赞数 5

CC 4.0 BY-SA版权

分类专栏： TypeScript

本文链接：https://blog.youkuaiyun.com/Jinxiansen0211/article/details/149269968

TypeScript 专栏收录该内容

2 篇文章

订阅专栏

10 个你项目里可能漏掉的 TypeScript 技巧

📌 点赞收藏关注不迷路！
你是不是经常在用 TypeScript，却总感觉“还差点火候”？
其实，TS 的威力并不只在于类型检查，更在于那些你可能漏掉的小技巧：它们不复杂，却能显著提升代码的安全性、可读性、工程效率！

本文为你整理了 10 个容易被忽略、但非常实用的 TypeScript 技巧，看完一定会让你的项目更“Type Safety”。

🧠 1. 类型别名 + 联合类型，替代硬编码常量

type ButtonType = 'primary' | 'danger' | 'success'
function createButton(type: ButtonType) {}

📌 好处：比字符串常量更安全、更智能补全，避免拼写错误。

🔁 2. 用 `as const` 固定值为字面量类型

const status = ['success', 'error', 'loading'] as const
type Status = typeof status[number] // 'success' | 'error' | 'loading'

📌 常用于：将数组/对象转换成精确的联合类型。

🚀 3. 用 `keyof typeof` 构造安全键名类型

const COLORS = {
  success: '#0f0',
  danger: '#f00',
  info: '#00f'
}
type ColorKey = keyof typeof COLORS // 'success' | 'danger' | 'info'

📌 适用场景：配置映射、主题变量、权限字段校验。

🎯 4. 给函数参数设默认值并推断类型

function fetchData(url = '/api/user') {
  // url 自动推断为 string
}

📌 很多人忘了：有默认值就会自动变成非必选参数，无需额外写 url?: string。

✅ 5. 使用 `infer` 提取复杂类型中的子类型

type GetPromiseType<T> = T extends Promise<infer R> ? R : never
type Result = GetPromiseType<Promise<string>> // string

📌 高阶用法，但非常实用，常见于库源码（如 Vue、React）。

💡 6. 为对象函数返回值加 `ReturnType<typeof fn>` 自动推导类型

function useUser() {
  return { name: 'Jin', age: 28 }
}
type User = ReturnType<typeof useUser>

📌 不需要手写 { name: string; age: number }，更安全且 DRY。

🛡️ 7. 使用 `Record<K, T>` 构建对象映射类型

type Role = 'admin' | 'user' | 'guest'
type RoleMap = Record<Role, string>
// => { admin: string; user: string; guest: string }

📌 常用于权限、国际化词典、配置表。

🧩 8. 类型守卫（Type Guard）让 `unknown` 更安全

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

function print(value: unknown) {
  if (isString(value)) {
    console.log(value.toUpperCase()) // ✅ 安全使用 string 方法
  }
}

📌 防止滥用类型断言，提升运行时安全。

🧰 9. 用 `satisfies` 强约束对象结构不丢失字面量信息（TS 4.9+）

const theme = {
  dark: '#000',
  light: '#fff'
} satisfies Record<'dark' | 'light', string>

📌 比 as 更智能：确保结构完整，同时保留精确值类型。

🔎 10. 利用 `readonly` 限制传入对象修改（函数签名更安全）

function printUser(user: Readonly<{ name: string }>) {
  // user.name = 'xx' ❌ 报错，防止误修改
}

📌 常用于工具库、暴露给外部的函数接口参数，增强不可变性。

📦 Bonus 技巧：类型调试神器 `ts-toolbelt`

可以引入 ts-toolbelt：

import { Merge, Optional, Omit } from 'ts-toolbelt'

它提供了比原生更强大的类型组合能力，非常适合中大型项目！

🎯 总结：这些技巧让你的 TypeScript 更 TypeScript

技巧	关键词	适用场景
联合类型 + `as const`	精准值约束	状态机、按钮类型
`ReturnType` / `keyof`	类型复用	函数输出、对象字段
`Record`	映射类型	权限配置、字典表
`infer`	类型提取	工具泛型、接口抽象
`satisfies`	双保险校验	避免误写常量对象