# TypeScript 严格模式 ## 严格配置 // tsconfig.json 要点 { “编译器选项”：{ “严格”：真实， “noUncheckedIndexedAccess”：true， “exactOptionalPropertyTypes”：true } } ## 接口与类型 // 对可扩展的对象使用接口接口服务{ slug：字符串；名称：字符串；价格：数量； } 接口 PremiumService 扩展服务 { 好处：字符串[]； } // 使用联合、原语、元组的类型类型区域设置 = 'pt-PT' | '恩' | 'tr'| 'es' | 'fr' | '德'；输入 DeliveryMode = '亲自' | '在线' | '两个都'; 输入坐标 = [数字, 数字]; ## 类型保护 // 自定义类型保护函数isService（值：未知）：值是服务{ 返回（ typeof 值 === '对象' && 值！==空&& 值中的“slug”&& 值中的“名称” ）； } // 受歧视的工会输入结果 = | { 成功：真实；数据：T} | { 成功：假；错误：字符串}；函数handleResult（结果：Result）{ if (结果.成功) { console.log(结果.数据); // TypeScript 知道数据存在 } 否则{ 控制台.错误(结果.错误); // TypeScript 知道存在错误 } } ## 通用模式 // 通用数据获取器异步函数 fetchData(url: string): Promise { const res = 等待 fetch(url); if (!res.ok) throw new Error('获取失败'); 返回 res.json() 作为 Promise; } // 通用组件道具接口 ListProps { 项目：T[]； renderItem: (项目: T, 索引: 数字) => React.ReactNode; keyExtractor: (项目: T) => 字符串; } 函数 List({ items, renderItem, keyExtractor }: ListProps) { 返回（

{renderItem(item, i)}

）； } ## 实用程序类型 // 部分 - 所有属性都是可选的类型 ServiceUpdate = Partial<服务>; // 必需 - 所有属性均必需类型RequiredService = 必需<服务>; // Pick - 选择特定属性类型 ServicePreview = Pick; // 省略 - 排除属性类型 ServiceWithoutPrice = Omit; // 记录-键值映射类型 LocaleMessages = Record<区域设置, Record<字符串, 字符串>>; // 联合的提取/排除类型 OnlineDelivery = Extract; ## 可空处理 // 非空断言（谨慎使用） const element = document.getElementById('root')!; // 可选链接 + nullish 合并 const 名称 = 用户？.配置文件？.名称 ?? '匿名的'; // 类型缩小函数 processValue(值: 字符串 | null | 未定义) { 如果（值==空）返回； // 处理 null 和 undefined console.log(value.toUpperCase()); // 值是字符串 } ## 组件道具模式 // 带有孩子的道具接口 ContainerProps { 孩子：React.ReactNode；类名？：字符串； } // 扩展 HTML 元素的 props 接口 ButtonProps 扩展 React.ButtonHTMLAttributes { 变体？： '主要' | “次要”；加载？：布尔值； } // 多态组件接口 BoxProps { 作为？：T；孩子：React.ReactNode； } 类型 BoxPropsWithRef = BoxProps & 省略, keyof BoxProps>; ## 常量断言 // 不可变数组和对象 const LOCALES = ['pt-PT', 'en', 'tr', 'es', 'fr', 'de'] as const; 类型区域设置 = typeof LOCALES[数字]; // 'pt-PT' | '恩' | ... 常量主题配置 = { 工作室: { bg: '#ffffff', 口音: '#000000' }, 地球: { bg: '#faf9f6', 重音: '#8b7355' }, 作为常量； ## Zod 集成从 'zod' 导入 { z }； // 从 Zod 模式推断类型 const ServiceSchema = z.object({ slug: z.string(), 名称： z.string(), 价格：z.number().positive(), }); type Service = z.infer;

打字稿严格

包含技能