加载笔记内容...
加载笔记内容...
在现代前端开发中，React 和 TypeScript 的结合已经成为构建高质量、可维护代码的标准选择。TypeScript 提供的静态类型检查功能能在开发阶段捕获潜在错误，提升团队协作效率。本文总结了一些在 React 项目中使用 TypeScript 的技巧，并关联相关知识点，帮助开发者更好地应用这些工具。
TypeScript 提供了灵活的方式获取枚举的键和值类型，这在类型约束中十分有用。
通过 keyof 关键字，可以获取枚举的键的类型：
1enum MyEnum {
2 Key1 = 'Value1',
3 Key2 = 'Value2',
4 Key3 = 'Value3',
5}
6
7type MyEnumKeys = keyof typeof MyEnum;
8// MyEnumKeys 的类型为 "Key1" | "Key2" | "Key3"通过索引访问类型，可以获取枚举值的类型：
1type MyEnumValues = MyEnum[keyof typeof MyEnum];
2// MyEnumValues 的类型为 "Value1" | "Value2" | "Value3"这种方式常用于约束接口或函数的参数类型。
在 React 中，允许传递 JSX 或组件作为 Props，以增强组件的灵活性。
通过定义 Props 类型为 React.ReactNode，可以传递任意合法的 JSX 内容：
1interface LayoutProps {
2 nav: React.ReactNode;
3 children: React.ReactNode;
4}
5
6const Layout: React.FC<LayoutProps> = ({ nav, children }) => (
7 <>
8 <nav>{nav}</nav>
9 <main>{children}</main>
10 </>
11);
12
13// 使用示例
14<Layout nav={<h1>My Site</h1>}>
15 <div>Hello!</div>
16</Layout>;使用 React.ComponentType，可以将整个组件作为 Prop 传递：
1interface RowProps {
2 icon: React.ComponentType<{ className?: string }>;
3}
4
5const Row: React.FC<RowProps> = ({ icon: Icon }) => (
6 <div>
7 <Icon className="h-8 w-8" />
8 </div>
9);
10
11// 使用示例
12<Row icon={UserIcon} />;这种方式特别适合需要动态渲染图标或 UI 组件的场景。
satisfies 运算符satisfies 是 TypeScript 4.9 引入的新特性，用于在不丢失值类型推断的情况下添加类型注解。
在构造 URLSearchParams 时，通常需要传入松散的 Record<string, string> 类型对象。satisfies 可以确保传入对象满足更精确的类型：
1type GHIssueURLParams = {
2 title: string;
3 body: string;
4};
5
6const params = new URLSearchParams({
7 title: "New Issue",
8} satisfies GHIssueURLParams);
9// 错误：缺少 'body' 属性在发送 HTTP 请求时，通过 satisfies 限定请求体类型，可以减少因数据结构不匹配导致的错误：
1type Post = {
2 title: string;
3 content: string;
4};
5
6fetch("/api/posts", {
7 method: "POST",
8 body: JSON.stringify({
9 title: "New Post",
10 content: "Lorem ipsum.",
11 } satisfies Post),
12});模板字面量类型可以动态构建新的类型定义，在复杂业务场景中非常实用。
以下示例通过模板字面量类型动态生成 Getter 函数的类型：
1type Event = 'click' | 'focus' | 'hover';
2type EventHandler = `on${Capitalize<Event>}Handler`;
3
4// 结果类型为 'onClickHandler' | 'onFocusHandler' | 'onHoverHandler'通过模板字面量类型和映射类型，可以对对象键名进行重命名：
1type User = {
2 name: string;
3 age: number;
4};
5
6type UserGetters = {
7 [K in keyof User as `get${Capitalize<string & K>}`]: () => User[K];
8};
9
10// 结果类型为
11// {
12// getName: () => string;
13// getAge: () => number;
14// }在使用 React Router 的 useParams 钩子时，明确定义参数类型可以避免不必要的类型断言：
1import { useParams } from "react-router-dom";
2
3type RouteParams = {
4 id: string;
5};
6
7const Component = () => {
8 const { id } = useParams<RouteParams>();
9 return <div>ID: {id}</div>;
10};类型缩小（Type Narrowing）通过条件语句，将联合类型缩小为具体类型，确保类型安全。
typeof1function double(input: string | number) {
2 if (typeof input === "string") {
3 return input.repeat(2);
4 }
5 return input * 2;
6}in通过检查特定属性的存在，可以区分对象类型：
1type Movie = { title: string; runtime: number };
2type Series = { title: string; episodes: number[] };
3
4function getDuration(media: Movie | Series) {
5 if ("runtime" in media) {
6 return media.runtime;
7 }
8 return media.episodes.length;
9}自定义类型谓词函数可用于高效过滤数组：
1function isString(value: any): value is string {
2 return typeof value === "string";
3}
4
5const items: (string | number)[] = [1, "a", 2, "b"];
6const strings = items.filter(isString); // 类型为 string[]在 TypeScript 中，Array<T> 和 T[] 功能相同，但 Array<T> 在多维数组和 keyof 操作中更有优势：
1const matrix: Array<Array<number>> = [
2 [1, 2],
3 [3, 4],
4];通过合理运用上述 TypeScript 技巧，可以显著提升 React 项目的开发体验、代码安全性和可维护性。随着 TypeScript 的不断发展，其与 React 的结合将进一步优化前端开发工作流。