企业官网建设流程全解析

主要学习react中ts的使用和概念

第一阶段：Ts基础

TypeScript 的核心思想是：给变量穿上约束的衣服。

1. 原始类型、数组、元组

letname:string="Gemini";letage:number=25;letisAI:boolean=true;// 数组的两种写法letskills:string[]=['React','TS'];letscores:Array<number>=[90,85];// 元组 (Tuple)：固定长度和类型的数组letuser:[number,string]=[1,'Admin'];

2. 函数的定义

//普通函数定义functionadd(x:number,y:number):number{returnx+y;}letmyAdd=function(x:number,y:number):number{returnx+y;};

// 定义函数类型typeGreetFn=(name:string)=>string;constsayHello:GreetFn=(n)=>`Hello,${n}`;

3. 接口 (Interface) vs 类型别名 (Type)

• Interface: 侧重于描述对象的结构，支持继承（extends）和声明合并。

• Type: 更灵活，可以定义基本类型、联合类型、元组等。

interfaceLabelledValue{label:string;num?:number;}

这是最常用的功能，用于定义对象的结构。

建议：定义公共 API 或组件 Props 时优先使用interface；定义复杂逻辑、联合类型时使用type。

4. 联合类型与字面量

// 联合类型：变量可以是多种类型之一letstatus:"loading"|"success"|"error";letcurrentStatus:Status="loading";// 只能是这三个字符串之一// 类型守卫 (Type Guard)functionprintId(id:number|string){if(typeofid==="string"){console.log(id.toUpperCase());// 此时 TS 知道 id 是 string}else{console.log(id.toFixed());// 此时 TS 知道 id 是 number}}

5. 泛型 Generics

泛型是 TS 最强大的地方，它允许你在定义时不指定具体类型，而在使用时动态决定。

// 这里的 T 就像是一个变量占位符functionidentity<T>(arg:T):T{returnarg;}constres1=identity<string>("hello");// T 被确定为 stringconstres2=identity<number>(100);// T 被确定为 number

第二阶段：React中应用

第一部分：TypeScript 语言核心

1. 类型系统的等级制度

在 TS 中，类型是有层级的。理解这一点能帮你解决 90% 的类型兼容性问题。

• Top Types (顶级类型):any和unknown。

• any: 彻底放弃检查，是代码中的“黑洞”。

• unknown: 虽也是万能类型，但在使用前必须进行类型检查（类型收窄）。

• Bottom Type (底层类型):never。表示永远不会出现的值。常用于穷举检查。

2. Interface 与 Type 的深度对峙

在 React 项目中，两者的界限日益模糊，但底层逻辑不同：

• Interface (面向对象): 描述“形状”。它支持声明合并（Declaration Merging）。如果你定义了两个同名的 Interface，TS 会自动把它们合二为一。这在扩展第三方库的类型时非常有用。
• Type (函数式/代数): 描述“别名”。它更强大，可以使用联合（|）、交叉（&）、位运算等。Type 不能被重新打开添加属性。

第二部分：工程化配置

tsconfig.json决定了你的代码如何被“审判”。以下是生产环境中最关键的三个配置：

第三部分：React + TS 实战兵法

1. 组件 Props 的“三板斧”

在定义组件 Props 时，利用 TS 的特性可以极大提升开发体验。

interface GreetProps { name: string; // 1. 可选属性 priority?: number; // 2. 字面量联合类型：限制范围 theme: 'dark' | 'light'; // 3. 复杂对象：引用其他接口 metadata: Record<string, unknown>; } // 推荐写法：使用普通函数解构 Props export const Greet = ({ name, theme = 'light' }: GreetProps) => { return <div className={theme}>Hello {name}</div>; };

2. Hooks 的高阶标注

Hooks 是 React 的核心，其类型标注主要依靠泛型。

• useState:

// 显式指定联合类型，处理“空状态” const [user, setUser] = useState<User | null>(null);

• useRef:
  有两个场景：

1. DOM 引用:const inputRef = useRef<HTMLInputElement>(null);（注意初始化为null）。
2. 变量保存:const timerRef = useRef<number>();。

3. 事件系统的“精确打击”

不要直接使用any处理事件。React 提供了一整套事件类型，命名规则通常是React.[事件名]Event<HTML元素类型>。

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { console.log(e.target.value); // 这里 e.target 会被精准推断为 HTMLInputElement };

第四部分：类型进阶

1. 工具类型 (Utility Types) 的降维打击

TS 内置的工具类型其实就是类型函数。

• Partial<T>: 把所有 Props 变可选。
• Omit<T, 'id'>: 复制 T 的所有属性，但剔除id。
• Pick<T, 'title' | 'desc'>: 只从 T 中挑选部分属性。

2. 泛型组件 (Generic Components)

当你需要组件支持多种类型的数据流时（如自定义下拉框、表格）：

interface SelectProps<T> { options: T[]; onSelect: (value: T) => void; } // 在函数名前使用 <T,> 开启泛型 export const Select = <T,>({ options, onSelect }: SelectProps<T>) => { return ( <ul> {options.map((opt, i) => ( <li key={i} onClick={() => onSelect(opt)}>选择</li> ))} </ul> ); }; // 使用时，TS 会根据传入的 options 自动推断 T <Select options={[1, 2, 3]} onSelect={(val) => console.log(val + 1)} />