对于 TypeScript 开发人员来说,小的增强功能和辅助函数可以显着提高代码的可读性和可维护性。这篇博文致力于为您提供五个基本的 TypeScript 技巧和帮助函数,旨在轻松复制并粘贴到您的代码库中。让我们深入了解一下。
1. 使用 Nullish 合并运算符引发内联错误
很多时候,如果特定值为 null 或未定义,我们发现自己需要抛出错误。TypeScript 提供了一种使用空合并运算符 (??) 和一个简单的辅助函数来内联此过程的方法,而不是手动检查此过程。
const raise = (err: string) : never => { throw new Error(err);};
这个“raise”函数与 nullish 合并运算符结合使用,可以让您编写更具可读性和简洁性的代码。
const Page = (props: { params: { id?: string }}) => {
const id = props.params.id ?? raise('No id provided');
};
向 TypeScript Wizard 本人Matt Pocock和@HeyImMapleLeaf (最初发布)表示感谢,感谢他们提供了这个令人惊叹的提示。
2. 使用映射类型
映射类型是一个强大的 TypeScript 功能,允许您基于现有类型创建新类型。它们可以帮助您保持类型干燥,减少重复并提高可维护性。
只读
映射类型的一个常见示例是Readonly<T>。这使得所有属性都是T只读的:
interface IUser {
name: string;
age: number;
}
type ReadonlyUser = Readonly<IUser>;
现在, 的所有属性ReadonlyUser都是只读的。
部分的
另一个方便的映射类型是Partial<T>,它使所有属性都是T可选的:
type PartialUser = Partial<IUser>;
PartialUser是现在{ name?: string, age?: number }。
记录
映射Record<K,T>类型可用于创建对象类型,其中属性键K为T:
type UserRecord = Record<string, IUser>;
UserRecord现在是一个对象类型,它将接受任何字符串作为键,并且任何值都必须是 类型IUser。
创建您自己的映射类型
您不仅限于 TypeScript 提供的映射类型。您还可以创建自己的:
type Nullable<T> = { [P in keyof T]: T[P] | null };
该Nullable<T>类型采用现有类型T,并生成一个新类型,其中每个属性都可为空。
映射类型可帮助您基于现有类型创建复杂类型,从而减少代码重复并增强类型安全性。
3. 类型保护
TypeScript 支持用户定义的类型保护,以缩小条件块内对象的类型范围。这是通过使用返回布尔值的函数来实现的,该布尔值指示对象是否属于特定类型。
function isString(test: any): test is string {
return typeof test === "string";
}
function printLength(input: string | any[]) {
if (isString(input)) {
console.log(input.length);
} else {
console.log(input.length);
}
}
在此示例中,isString是一个类型保护,确保input将其视为 if 块中的字符串。
4. 强类型事件发射器
在需要使用事件驱动架构的情况下,您可能需要使用事件发射器。JavaScript 内置事件发射器的缺点是它不是强类型的。但不用担心,TypeScript 可以拯救世界。
import { EventEmitter } from "events";
interface MyEvents {
event1: (param1: string, param2: number) => void;
event2: () => void;
}
class MyEventEmitter extends EventEmitter {
public emit<T extends keyof MyEvents>(
event: T,
...args: Parameters<MyEvents[T]>
) {
return super.emit(event, ...args);
}
public on<T extends keyof MyEvents>(
event: T,
listener: MyEvents[T]
): this {
return super.on(event, listener);
}
}
const myEmitter = new MyEventEmitter();
myEmitter.on('event1', (param1, param2) => {
// Type-safe parameters!
});
使用此代码,您可以享受完全类型安全的事件发射器!
5. 强制只读属性
TypeScript 具有readonly修饰符,可以轻松创建设置后无法更改的属性。这对于创建具有永远不应更改的属性的对象特别有用。
interface Config {
readonly apiUrl: string;
readonly defaultTimeout: number;
}
const config: Config = {
apiUrl: "https://myapi.com",
defaultTimeout: 5000,
};
config.apiUrl = "https://anotherapi.com"; // Error!
在此示例中,任何更改apiUrl或 的尝试defaultTimeout都会导致 TypeScript 错误。
这些只是 TypeScript 提供的用于增强开发过程的功能和技术的几个示例。有了这些提示和辅助函数,您的代码将变得更干净、更安全、更易于维护。