动图
本文概述了所有专业人士都使用的 7 个TypeScript技巧，它们将使您的生活更轻松。
（更多优质教程：java567.com，搜"ts"）
1. 类型推断
Typescript足够聪明，可以在您帮助缩小数据类型时推断数据类型。
enum CounterActionType {
Increment = "INCREMENT",
IncrementBy = "INCREMENT_BY",
}
interface IncrementAction {
type: CounterActionType.Increment;
}
interface IncrementByAction {
type: CounterActionType.IncrementBy;
payload: number;
}
type CounterAction =
| IncrementAction
| IncrementByAction;
function reducer(state: number, action: CounterAction) {
switch (action.type) {
case CounterActionType.Increment:
// TS infers that the action is IncrementAction
// & has no payload
return state + 1;
case CounterActionType.IncrementBy:
// TS infers that the action is IncrementByAction
// & has a number as a payload
return state + action.payload;
default:
return state;
}
}
如上所示，TypeScript根据属性推断操作的类型type，因此您不需要检查是否payload存在。
2.文字类型
通常您需要变量的特定值，这就是文字类型派上用场的地方。
type Status = "idle" | "loading" | "success" | "error";
它也适用于数字：
type Review = 1 | 2 | 3 | 4 | 5;
// or better yet:
const reviewMap = {
terrible: 1,
average: 2,
good: 3,
great: 4,
incredible: 5,
} as const;
// This will generate the same type as above,
// but it's much more maintainable
type Review = typeof reviewMap[keyof typeof reviewMap];
3.类型守卫
类型保护是另一种缩小变量类型的方法：
function isNumber(value: any): value is number {
return typeof value === "number";
}
const validateAge = (age: any) => {
if (isNumber(age)) {
// validation logic
// ...
} else {
console.error("The age must be a number");
}
};
注意：在上面的示例中，最好使用：
const validateAge = (age: number) => {
// ...
};
这个例子是为了展示类型保护是如何工作的一个简化。
4. 索引签名
当对象中有动态键时，可以使用**索引签名**来定义其类型：
enum PaticipationStatus {
Joined = "JOINED",
Left = "LEFT",
Pending = "PENDING",
}
interface ParticipantData {
[id: string]: PaticipationStatus;
}
const participants: ParticipantData = {
id1: PaticipationStatus.Joined,
id2: PaticipationStatus.Left,
id3: PaticipationStatus.Pending,
// ...
};
5.泛型
泛型是一个强大的工具，可以让你的代码更容易重用。它允许您定义一个类型，该类型将由您的函数的使用决定。
在以下示例中，T是通用类型：
const clone = <T>(object: T) => {
const clonedObject: T = JSON.parse(JSON.stringify(object));
return clonedObject;
};
const obj = {
a: 1,
b: {
c: 3,
},
};
const obj2 = clone(obj);
6. 不可变类型
您可以通过添加as const. 这确保您不会意外更改值。
const ErrorMessages = {
InvalidEmail: "Invalid email",
InvalidPassword: "Invalid password",
// ...
} as const;
// This will throw an error
ErrorMessages.InvalidEmail = "New error message";
7. 部分、选择、省略和必需类型
通常在处理服务器和本地数据时，您需要将某些属性设置为可选或必需的。
而不是使用相同数据的略微更改版本定义数百个接口。您可以使用Partial, Pick, Omit&Required类型来做到这一点。
interface User {
name: string;
age?: number;
email: string;
}
type PartialUser = Partial<User>;
type PickUser = Pick<User, "name" | "age">;
type OmitUser = Omit<User, "age">;
type RequiredUser = Required<User>;
// PartialUser is equivalent to:
// interface PartialUser {
// name?: string;
// age?: number;
// email?: string;
// }
// PickUser is equivalent to:
// interface PickUser {
// name: string;
// age?: number;
// }
// OmitUser is equivalent to:
// interface OmitUser {
// name: string;
// email: string;
// }
// RequiredUser is equivalent to:
// interface RequiredUser {
// name: string;
// age: number;
// email: string;
// }
当然，您可以使用交集来组合它们：
type A = B & C;
其中B&C是任何类型。
这就是所有的人！?