[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"public:announcements":3,"footer:categories:zh":4,"public:navigations:zh":132,"post:detail:post-5-TypeScript:zh":177},[],[5,23,39,55,71,88,103,117],{"id":6,"name":7,"slug":12,"description":13,"icon":18,"color":19,"cover_image":20,"created_at":21,"post_count":22},1,{"en":8,"ja":9,"zh":10,"zh_Hant":11},"Technology","テクノロジー","技术","技術","technology",{"en":14,"ja":15,"zh":16,"zh_Hant":17},"Cutting-edge technology exploration and in-depth analysis covering programming languages, frameworks, and architecture design","プログラミング言語、フレームワーク、アーキテクチャ設計を含む先端技術の探究","前沿技术探索与深度分析，涵盖编程语言、框架、架构设计等核心领域","前沿技術探索與深度分析，涵蓋編程語言、框架、架構設計等核心領域","heroicons:cog-6-tooth","#6366f1",null,"2026-09-30T18:09:53.633610Z",8,{"id":24,"name":25,"slug":29,"description":30,"icon":35,"color":36,"cover_image":20,"created_at":37,"post_count":38},2,{"en":26,"ja":27,"zh":28,"zh_Hant":28},"Tutorial","チュートリアル","教程","tutorial",{"en":31,"ja":32,"zh":33,"zh_Hant":34},"Hands-on tutorials from scratch with clear steps and complete code for developers at all levels","ゼロから始める実践的なチュートリアル。明確な手順と完全なコードで、全てのレベルの開発者に最適","从零开始的实战教程，步骤清晰，代码完整，适合各阶段开发者学习","從零開始的實戰教程，步驟清晰，代碼完整，適合各階段開發者學習","heroicons:academic-cap","#10b981","2026-09-30T18:09:53.641581Z",6,{"id":40,"name":41,"slug":45,"description":46,"icon":51,"color":52,"cover_image":20,"created_at":53,"post_count":54},3,{"en":42,"ja":43,"zh":44,"zh_Hant":44},"Frontend","フロントエンド","前端","frontend",{"en":47,"ja":48,"zh":49,"zh_Hant":50},"Full coverage of web frontend development including Vue, React, new CSS features, and performance optimization","Vue、React、CSSの新機能やパフォーマンス最適化を含むWebフロントエンド開発の全領域","Web前端开发全栈覆盖，包括Vue、React、CSS新特性及性能优化等话题","Web前端開發全棧覆蓋，包括Vue、React、CSS新特性及性能優化等話題","heroicons:computer-desktop","#ec4899","2026-09-30T18:09:53.644838Z",7,{"id":56,"name":57,"slug":62,"description":63,"icon":68,"color":69,"cover_image":20,"created_at":70,"post_count":40},4,{"en":58,"ja":59,"zh":60,"zh_Hant":61},"Backend","バックエンド","后端","後端","backend",{"en":64,"ja":65,"zh":66,"zh_Hant":67},"Server-side development best practices including API design, database optimization, and microservices architecture","API設計、データベース最適化、マイクロサービスアーキテクチャを含むサーバーサイド開発の実践","服务端开发实战经验，API设计、数据库优化、微服务架构等深度内容","服務端開發實戰經驗，API設計、數據庫優化、微服務架構等深度內容","heroicons:server-stack","#f59e0b","2026-09-30T18:09:53.647836Z",{"id":72,"name":73,"slug":78,"description":79,"icon":84,"color":85,"cover_image":20,"created_at":86,"post_count":87},5,{"en":74,"ja":75,"zh":76,"zh_Hant":77},"Fullstack","フルスタック","全栈","全棧","fullstack",{"en":80,"ja":81,"zh":82,"zh_Hant":83},"End-to-end development guides covering the full project lifecycle and technology stack selection","フロントエンドからバックエンドまでの開発プロセス全体をカバーするガイド","从前端到后端的全流程开发指南，覆盖完整项目生命周期与技术选型","從前端到後端的全流程開發指南，覆蓋完整項目生命週期與技術選型","heroicons:swatch","#8b5cf6","2026-09-30T18:09:53.650513Z",0,{"id":38,"name":89,"slug":94,"description":95,"icon":100,"color":101,"cover_image":20,"created_at":102,"post_count":56},{"en":90,"ja":91,"zh":92,"zh_Hant":93},"Essays","エッセイ","随笔","隨筆","essays",{"en":96,"ja":97,"zh":98,"zh_Hant":99},"Technical reflections and development insights recording the programmer's growth journey","プログラマーの成長の軌跡を記録する技術的考察と開発の洞察","技术思考与开发心得分享，记录程序员成长路上的点滴感悟","技術思考與開發心得分享，記錄程序員成長路上的點滴感悟","heroicons:pencil-square","#f43f5e","2026-09-30T18:09:53.653105Z",{"id":54,"name":104,"slug":108,"description":109,"icon":114,"color":115,"cover_image":20,"created_at":116,"post_count":56},{"en":105,"ja":106,"zh":107,"zh_Hant":107},"Tools","ツール","工具","tools",{"en":110,"ja":111,"zh":112,"zh_Hant":113},"Development toolchain and productivity tool recommendations to supercharge your development experience","開発効率を飛躍的に向上させるツールチェーンと生産性ツールの推奨","开发工具链与效率提升利器推荐，让你的开发体验如虎添翼","開發工具鏈與效率提升利器推薦，讓你的開發體驗如虎添翼","heroicons:wrench-screwdriver","#06b6d4","2026-09-30T18:09:53.655605Z",{"id":22,"name":118,"slug":123,"description":124,"icon":129,"color":130,"cover_image":20,"created_at":131,"post_count":87},{"en":119,"ja":120,"zh":121,"zh_Hant":122},"Translation","翻訳","翻译","翻譯","translation",{"en":125,"ja":126,"zh":127,"zh_Hant":128},"Curated translations of high-quality foreign technical articles to keep up with international trends","国際的な技術トレンドを追うための厳選された海外技術記事の翻訳","优质外文技术文章精选翻译，紧跟国际技术前沿动态","優質外文技術文章精選翻譯，緊跟國際技術前沿動態","heroicons:language","#84cc16","2026-09-30T18:09:53.658041Z",[133,144,150,157,164,171],{"id":6,"title":134,"url":139,"icon":20,"parent_id":20,"location":140,"order":6,"is_active":141,"target_blank":142,"created_at":143,"updated_at":20},{"zh":135,"en":136,"ja":137,"zh_TW":138},"首页","Home","ホーム","首頁","\u002F","header",true,false,"2026-09-30T18:09:54.251095Z",{"id":24,"title":145,"url":149,"icon":20,"parent_id":20,"location":140,"order":24,"is_active":141,"target_blank":142,"created_at":143,"updated_at":20},{"zh":146,"en":147,"ja":148,"zh_TW":146},"文章","Posts","記事","\u002Fposts",{"id":40,"title":151,"url":156,"icon":20,"parent_id":20,"location":140,"order":40,"is_active":141,"target_blank":142,"created_at":143,"updated_at":20},{"zh":152,"en":153,"ja":154,"zh_TW":155},"分类","Categories","カテゴリー","分類","\u002Fcategories",{"id":56,"title":158,"url":163,"icon":20,"parent_id":20,"location":140,"order":56,"is_active":141,"target_blank":142,"created_at":143,"updated_at":20},{"zh":159,"en":160,"ja":161,"zh_TW":162},"标签","Tags","タグ","標籤","\u002Ftags",{"id":72,"title":165,"url":170,"icon":20,"parent_id":20,"location":140,"order":72,"is_active":141,"target_blank":142,"created_at":143,"updated_at":20},{"zh":166,"en":167,"ja":168,"zh_TW":169},"关于","About","概要","關於","\u002Fpage\u002Fabout",{"id":38,"title":172,"url":176,"icon":20,"parent_id":20,"location":140,"order":38,"is_active":141,"target_blank":142,"created_at":143,"updated_at":20},{"zh":173,"en":174,"ja":175,"zh_TW":173},"留言板","Guestbook","ゲストブック","\u002Fpage\u002Fguestbook",{"id":72,"title":178,"subtitle":20,"slug":179,"source":180,"source_url":20,"audio":20,"video":20,"video_url":20,"content":181,"excerpt":182,"cover_image":20,"author":183,"category":186,"tags":187,"status":202,"visibility":203,"password":20,"views":204,"likes_count":87,"is_pinned":142,"allow_comments":141,"comments_count":22,"is_password_protected":142,"meta_title":178,"meta_description":182,"meta_keywords":205,"created_at":206,"published_at":206,"updated_at":207,"reading_time":6},"TypeScript 高级类型体操","post-5-TypeScript","原创","# TypeScript 高级类型体操\n\nTypeScript 的类型系统是图灵完备的。这意味着理论上你可以在类型层面完成任何计算。了解这些高级特性，不仅能看懂开源库的类型定义，还能为自己的代码写出精准的类型推导。\n\n## 核心工具：条件类型 + infer\n\n如果只能掌握一个特性，那必须是条件类型 + infer。它类似类型层面的三元表达式：\n\n```typescript\ntype DeepPartial\u003CT> = T extends object\n  ? { [K in keyof T]?: DeepPartial\u003CT[K]> }\n  : T\n\ntype DeepReadonly\u003CT> = T extends object\n  ? { readonly [K in keyof T]: DeepReadonly\u003CT[K]> }\n  : T\n\ntype DeepRequired\u003CT> = T extends object\n  ? { [K in keyof T]-?: DeepRequired\u003CT[K]> }\n  : T\n\ntype PickByType\u003CT, U> = {\n  [K in keyof T as T[K] extends U ? K : never]: T[K]\n}\n\ntype OmitByType\u003CT, U> = {\n  [K in keyof T as T[K] extends U ? never : K]: T[K]\n}\n\ntype PathOf\u003CT, Prefix extends string = ''> = T extends object\n  ? {\n      [K in keyof T & string]: K extends string\n        ?\n            | `${Prefix}${K}`\n            | PathOf\u003CT[K], `${Prefix}${K}.`>\n        : never\n    }[keyof T & string]\n  : never\n\ntype ValueAtPath\u003CT, P extends string> = P extends `${infer K}.${infer Rest}`\n  ? K extends keyof T\n    ? ValueAtPath\u003CT[K], Rest>\n    : never\n  : P extends keyof T\n  ? T[P]\n  : never\n\ntype CamelCase\u003CS extends string> = S extends `${infer First}_${infer Rest}`\n  ? `${First}${Capitalize\u003CCamelCase\u003CRest>>}`\n  : S\n\ntype SnakeCase\u003CS extends string> = S extends `${infer First}${infer Rest}`\n  ? First extends Uppercase\u003CFirst>\n    ? `_${Lowercase\u003CFirst>}${SnakeCase\u003CRest>}`\n    : `${First}${SnakeCase\u003CRest>}`\n  : S\n\ntype Length\u003CT extends readonly any[]> = T['length']\n\ntype First\u003CT extends readonly any[]> = T extends [infer F, ...any] ? F : never\ntype Last\u003CT extends readonly any[]> = T extends [...any, infer L] ? L : never\n\ntype TupleToUnion\u003CT extends readonly any[]> = T[number]\n\ntype UnionToIntersection\u003CU> = (\n  U extends any ? (k: U) => void : never\n) extends (k: infer I) => void\n  ? I\n  : never\n\ntype IsNever\u003CT> = [T] extends [never] ? true : false\ntype IsUnion\u003CT, U = T> = IsNever\u003CT> extends true\n  ? false\n  : T extends U\n  ? [U] extends [T]\n    ? false\n    : true\n  : false\n\ntype GetReturnType\u003CF> = F extends (...args: any) => infer R ? R : never\ntype GetParameters\u003CF> = F extends (...args: infer P) => any ? P : never\n```\n\n## 常见工具类型复杂度分级\n\n| 难度 | 类型 | 核心技巧 | 实战用途 |\n|:---|:---|:---|:---|\n| 入门 | Partial\u002FRequired\u002FReadonly | 映射类型 + ?\u002F-?\u002Freadonly | 每日必用 |\n| 入门 | Pick\u002FOmit\u002FRecord\u002FExtract\u002FExclude | as 子句 + keyof + extends | 每日必用 |\n| 中级 | ReturnType\u002FParameters\u002FInstanceType | infer 函数签名 | 类型提取 |\n| 中级 | DeepPartial\u002FDeepReadonly | 递归 + 条件类型 | 配置对象 |\n| 中级 | CamelCase\u002FSnakeCase | 模板字面量 + 递归 | API 转换层 |\n| 高级 | PathOf\u002FValueAtPath | 递归 + 模板字面量 | lodash.get 类型安全 |\n| 高级 | UnionToIntersection | 逆变体位置 infer | 理论题 |\n| 地狱 | ParseQueryString\u002FFormat | 多变量递归 | 类型竞技 |\n\n## 分布式条件类型的秘密\n\n当条件类型左边是裸类型参数（naked type parameter）且传入联合类型时，TypeScript 会自动分发：\n\n```ts\ntype Wrap\u003CT> = T extends any ? { value: T } : never\ntype X = Wrap\u003Cstring | number>\n\u002F\u002F 等于 { value: string } | { value: number }\n\u002F\u002F 因为 string 和 number 分别代入再联合\n```\n\n**这是 90% 的人不理解但 90% 的工具类型在用的特性**。记住：想让联合\"拆开来处理\"就用裸泛型，想让联合\"整体处理\"就用元组包裹 `[T] extends [U]`。\n\n## 模板字面量类型\n\nTS 4.1 引入的模板字面量让字符串处理进入了类型层面：\n\n```ts\ntype CSSVar\u003CK extends string> = `--${K}`\ntype V = CSSVar\u003C'primary-color'>  \u002F\u002F '--primary-color'\n\ntype Concat\u003CA extends string, B extends string> = `${A}${B}`\n```\n\n## 最佳实践\n\n1. **先写出 JS 运行时版本**，再\"翻译\"成类型版本，能极大降低思考难度\n2. **善用 type-challenges 仓库**，做 20 道中级题就能熟练大部分套路\n3. **不要在业务代码中滥用**，类型体操过深会让同事看不懂；库代码再深挖\n4. **给复杂类型写测试用例**，用 `Expect\u003CEqual\u003CX, Y>>` 范式防止回归\n5. **超过 5 层嵌套时拆分子类型**，和正常代码一样要抽象分层\n\n## 总结\n\n类型体操不是炫技。它的本质是：把原本需要运行时才能发现的错误，提前到编译期；把原本需要手写的类型声明，交给编译器自动推导。在正确的地方（库开发、框架封装、通用工具）使用它，能极大提升代码质量和开发体验。而在业务代码中，保持克制，够用就好。","TypeScript 的类型系统堪比一门完整的编程语言。本文系统讲解条件类型、映射类型、模板字面量类型、infer 推断、递归类型、分布式条件类型等高阶特性。配合 15+ 真实工具类型实现（DeepPartial、PathOf、PickByType、CamelCase 等），带你掌握 type-challenges 中级难度以上的解题思路。",{"id":6,"username":184,"nickname":184,"avatar":20,"cover_image":20,"bio":20,"website":20,"github":20,"avatar_source":20,"resolved_avatar_url":20,"title":20,"created_at":185},"Choyeon","2026-09-30T18:09:53.330367Z",{"id":6,"name":10,"slug":12,"description":16,"icon":18,"color":19,"cover_image":20,"created_at":21,"post_count":87},[188,193,198],{"id":38,"name":189,"slug":190,"color":191,"icon":20,"is_active":141,"created_at":192,"post_count":87},"TypeScript","typescript","#3178c6","2026-09-30T18:09:53.680697Z",{"id":54,"name":194,"slug":195,"color":196,"icon":20,"is_active":141,"created_at":197,"post_count":87},"JavaScript","javascript","#f7df1e","2026-09-30T18:09:53.683194Z",{"id":199,"name":42,"slug":45,"color":200,"icon":20,"is_active":141,"created_at":201,"post_count":87},26,"#94a3b8","2026-09-30T18:09:53.760103Z","published","public",255,"TypeScript,JavaScript,Frontend","2026-08-24T18:09:53.733462Z","2026-09-30T20:57:37.449532Z"]