后端开发教程 - Java、Spring Boot 实战 - msg200.com
每个开发人员都应该知道的 20 个 TypeScript 技巧
TypeScript是现代 JavaScript 开发的强大引擎，提供type safety丰富的高级功能。
虽然许多开发者只了解一些基础知识，但其中隐藏的精华和实用技巧可以让你的代码更高效、更简洁、更易于维护。让我们通过示例和实用方法，
深入探讨每个开发者都应该掌握的20 个 TypeScript 技巧！💻
1.非可空类型（NonNullable） ❌
TypeScript 提供了从类型中NonNullable消除null“与”的功能。这可以帮助你避免出现意外的空值。undefined
type User = { name: string; age?: number | null };
const user: NonNullable<User["age"]> = 30; // ✅ No null or undefined allowed
2.灵活使用Partial
该Partial<T>实用程序使类型中的所有属性成为可选的，这在您仅更新对象字段的子集时非常有用。
interface User {
name: string;
age: number;
email: string;
}
const updateUser = (user: Partial<User>) => {
// You can pass only the fields you want to update
return { ...user, updatedAt: new Date() };
};
updateUser({ name: 'John' }); // No need to provide the entire object
3.利用Readonly不可变数据
当您需要 TypeScript 中的不变性时，Readonly<T>使类型的所有属性都不可变，从而防止重新分配。
const config: Readonly<{ apiUrl: string; retries: number }> = {
apiUrl: 'https://api.example.com',
retries: 5
};
config.apiUrl = 'https://newapi.com'; // ❌ Error: Cannot assign to 'apiUrl' because it is a read-only property
4.动态属性类型的映射类型
映射类型允许你通过转换现有类型来创建新类型。这对于创建对象类型的变体非常方便。
type Status = 'loading' | 'success' | 'error';
type ApiResponse<T> = {
[K in Status]: T;
};
const response: ApiResponse<string> = {
loading: 'Fetching...',
success: 'Data loaded',
error: 'Something went wrong'
};
5.具有可选元素的元组类型🔢
你知道 TypeScript 允许元组中存在可选元素吗？这在处理可变函数参数时非常有用。
type UserTuple = [string, number?, boolean?];
const user1: UserTuple = ['Alice']; // ✅ Just the name
const user2: UserTuple = ['Bob', 30]; // ✅ Name and age
const user3: UserTuple = ['Charlie', 25, true]; // ✅ Full tuple
6.具有详尽检查的联合类型
确保使用联合类型处理所有可能的情况并在 switch 语句中进行详尽的检查。
type Status = 'open' | 'closed' | 'pending';
function handleStatus(status: Status) {
switch (status) {
case 'open':
return 'Opened';
case 'closed':
return 'Closed';
case 'pending':
return 'Pending';
default:
const exhaustiveCheck: never = status; // ❌ Error if a new status type is added but not handled
return exhaustiveCheck;
}
}
7.用于排除密钥的实用程序类型Omit🗑️
有时您需要创建一个排除某些键的对象类型。Omit这是你的朋友！
interface Todo {
title: string;
description: string;
completed: boolean;
}
type TodoPreview = Omit<Todo, 'description'>;
const todo: TodoPreview = {
title: 'Learn TypeScript',
completed: false
};
8.使用and 🕵️缩小字体ininstanceof
使用in和instanceof在运行时缩小类型。
function processInput(input: string | number | { title: string }) {
if (typeof input === 'string') {
return input.toUpperCase(); // Narrowed to string
} else if (typeof input === 'number') {
return input * 2; // Narrowed to number
} else if ('title' in input) {
return input.title; // Narrowed to object with title property
}
}
9.高级类型逻辑的条件类型
条件类型为您提供了根据条件转换类型的难以置信的灵活性。
type IsString<T> = T extends string ? true : false;
type CheckString = IsString<'Hello'>; // true
type CheckNumber = IsString<42>; // false
10.用于as const不可变字面量类型📜
as const非常适合冻结值并确保 TypeScript 将它们视为文字类型，而不是可变值。
const COLORS = ['red', 'green', 'blue'] as const;
type Color = typeof COLORS[number]; // 'red' | 'green' | 'blue'
在 github 上关注我：
github.com
11.提取和排除以优化类型🧹
使用Extract和Exclude从联合中过滤出或选择特定类型。
type T = 'a' | 'b' | 'c';
type OnlyAOrB = Extract<T, 'a' | 'b'>; // 'a' | 'b'
type ExcludeC = Exclude<T, 'c'>; // 'a' | 'b'
12.用于自定义验证的类型保护✅
创建自己的类型保护以在运行时动态地优化类型。
function isString(input: any): input is string {
return typeof input === 'string';
}
const value: any = 'Hello';
if (isString(value)) {
console.log(value.toUpperCase()); // Safe: value is a string here
}
13.用于Record动态对象类型📋
当您需要具有动态键的对象类型时，Record<K, V>它是完美的选择。
type Role = 'admin' | 'user' | 'guest';
const permissions: Record<Role, string[]> = {
admin: ['read', 'write', 'delete'],
user: ['read', 'write'],
guest: ['read']
};
14.具有索引签名的动态类属性🏗️
索引签名允许您创建具有动态命名属性的对象或类。
class DynamicObject {
[key: string]: any;
}
const obj = new DynamicObject();
obj.name = 'Alice';
obj.age = 30;
15.never为不可能状态输入
该never类型表示永远不应该出现的值。它通常用于详尽的检查。
function assertNever(value: never): never {
throw new Error(`Unexpected value: ${value}`);
}
16.可选链式调用，实现安全属性访问
使用可选链（?.）可以安全地访问深层嵌套的属性，而不必担心undefined错误。
const user = { profile: { name: 'John' } };
const userName = user?.profile?.name; // 'John'
const age = user?.profile?.age ?? 'Not provided'; // Fallback to default
17.具有空值合并的默认值（??） 🔄
仅当原始值为null或时，才使用空值合并运算符来提供后备值undefined。
const input: string | null = null;
const defaultValue = input ?? 'Default'; // 'Default'
18.使用🔄推断返回类型ReturnType
该ReturnType<T>实用程序提取函数的返回类型，这在处理复杂类型时非常有用。
function getUser() {
return { name: 'John', age: 30 };
}
type UserReturn = ReturnType<typeof getUser>; // { name: string; age: number; }
19.函数中的类型参数
通用类型参数使您的函数灵活且可跨不同类型重用。
function identity<T>(value: T): T {
return value;
}
identity<string>('Hello'); // 'Hello'
identity<number>(42); // 42
20.组合结构的交叉类型➕
交叉类型允许您将多种类型组合为一种。
type Admin = { privileges: string[] };
type User = { name: string };
type AdminUser = Admin & User;
const adminUser: AdminUser = {
privileges: ['admin', 'editor'],
name: 'Alice'
};
这些技巧将帮助你将 TypeScript 技能提升到一个新的高度！🔥 继续尝试并将这些模式融入你的项目中，以获得更简洁、更高效的代码。祝你编码愉快！😎👨💻
文章来源：https://dev.to/jagroop2001/20-typescript-tricks-every-developer-should-know-31e2