企业官网建设流程全解析

网站seo内链建设,cms开源网站管理系统,天津企业做网站,网站更新提示怎末做主要学习react中ts的使用和概念第一阶段#xff1a;Ts基础 TypeScript 的核心思想是#xff1a;给变量穿上约束的衣服。 1. 原始类型、数组、元组 let name: string Gemini; let age: number 25; let isAI: boolean true;// 数组的两种写法 let skills: strin…主要学习react中ts的使用和概念第一阶段Ts基础TypeScript 的核心思想是给变量穿上约束的衣服。1. 原始类型、数组、元组letname:stringGemini;letage:number25;letisAI:booleantrue;// 数组的两种写法letskills:string[][React,TS];letscores:Arraynumber[90,85];// 元组 (Tuple)固定长度和类型的数组letuser:[number,string][1,Admin];2. 函数的定义//普通函数定义functionadd(x:number,y:number):number{returnxy;}letmyAddfunction(x:number,y:number):number{returnxy;};// 定义函数类型typeGreetFn(name:string)string;constsayHello:GreetFn(n)Hello,${n};3. 接口 (Interface) vs 类型别名 (Type)Interface: 侧重于描述对象的结构支持继承extends和声明合并。Type: 更灵活可以定义基本类型、联合类型、元组等。interfaceLabelledValue{label:string;num?:number;}这是最常用的功能用于定义对象的结构。特性InterfaceType核心用途定义对象的形状定义任何类型联合、元组等扩展方式使用extends关键字使用(交叉类型)重复定义会自动合并Declaration Merging不允许重复定义建议定义公共 API 或组件 Props 时优先使用interface定义复杂逻辑、联合类型时使用type。4. 联合类型与字面量// 联合类型变量可以是多种类型之一letstatus:loading|success|error;letcurrentStatus:Statusloading;// 只能是这三个字符串之一// 类型守卫 (Type Guard)functionprintId(id:number|string){if(typeofidstring){console.log(id.toUpperCase());// 此时 TS 知道 id 是 string}else{console.log(id.toFixed());// 此时 TS 知道 id 是 number}}5. 泛型 Generics泛型是 TS 最强大的地方它允许你在定义时不指定具体类型而在使用时动态决定。// 这里的 T 就像是一个变量占位符functionidentityT(arg:T):T{returnarg;}constres1identitystring(hello);// T 被确定为 stringconstres2identitynumber(100);// T 被确定为 number第二阶段React中应用第一部分TypeScript 语言核心1. 类型系统的等级制度在 TS 中类型是有层级的。理解这一点能帮你解决 90% 的类型兼容性问题。Top Types (顶级类型):any和unknown。any: 彻底放弃检查是代码中的“黑洞”。unknown: 虽也是万能类型但在使用前必须进行类型检查类型收窄。Bottom Type (底层类型):never。表示永远不会出现的值。常用于穷举检查。2. Interface 与 Type 的深度对峙在 React 项目中两者的界限日益模糊但底层逻辑不同Interface (面向对象): 描述“形状”。它支持声明合并Declaration Merging。如果你定义了两个同名的 InterfaceTS 会自动把它们合二为一。这在扩展第三方库的类型时非常有用。Type (函数式/代数): 描述“别名”。它更强大可以使用联合|、交叉、位运算等。Type 不能被重新打开添加属性。第二部分工程化配置tsconfig.json决定了你的代码如何被“审判”。以下是生产环境中最关键的三个配置配置项作用为什么重要strict: true开启所有严格模式防止null导致的运行时崩溃禁用隐式any。noImplicitAny禁止隐式 any强制你思考每个变量的来源是项目质量的底线。paths路径别名将../../../../components简化为/components解耦目录结构。第三部分React TS 实战兵法1. 组件 Props 的“三板斧”在定义组件 Props 时利用 TS 的特性可以极大提升开发体验。interface GreetProps { name: string; // 1. 可选属性 priority?: number; // 2. 字面量联合类型限制范围 theme: dark | light; // 3. 复杂对象引用其他接口 metadata: Recordstring, unknown; } // 推荐写法使用普通函数解构 Props export const Greet ({ name, theme light }: GreetProps) { return div className{theme}Hello {name}/div; };2. Hooks 的高阶标注Hooks 是 React 的核心其类型标注主要依靠泛型。useState:// 显式指定联合类型处理“空状态” const [user, setUser] useStateUser | null(null);useRef:有两个场景DOM 引用:const inputRef useRefHTMLInputElement(null);注意初始化为null。变量保存:const timerRef useRefnumber();。3. 事件系统的“精确打击”不要直接使用any处理事件。React 提供了一整套事件类型命名规则通常是React.[事件名]EventHTML元素类型。const handleInputChange (e: React.ChangeEventHTMLInputElement) { console.log(e.target.value); // 这里 e.target 会被精准推断为 HTMLInputElement };第四部分类型进阶1. 工具类型 (Utility Types) 的降维打击TS 内置的工具类型其实就是类型函数。PartialT: 把所有 Props 变可选。OmitT, id: 复制 T 的所有属性但剔除id。PickT, title | desc: 只从 T 中挑选部分属性。2. 泛型组件 (Generic Components)当你需要组件支持多种类型的数据流时如自定义下拉框、表格interface SelectPropsT { options: T[]; onSelect: (value: T) void; } // 在函数名前使用 T, 开启泛型 export const Select T,({ options, onSelect }: SelectPropsT) { 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)} /