适合解决的工作场景与能力培养

这门课的核心是解决前端开发中 TypeScript 应用的两大痛点：一是基础概念模糊导致代码质量参差不齐，二是无法将 TypeScript 与 React 等框架深度结合。课程重点在于系统梳理类型系统、泛型、模块等基础，并通过 React 实战项目强化应用能力。学完后，你能够独立完成 TypeScript 在复杂项目中的配置、类型定义及与 React 的整合工作，减少因类型错误导致的线上问题，提升代码可维护性。

课程适配人群与核心内容

适合有一定 JavaScript 基础，但 TypeScript 应用停留在简单声明的开发者。课程从 ES6 集合类型讲起，逐步深入到高级类型、类型推断及与 React Hooks 的结合。建议先学习数组类型、泛型、模块化开发等基础模块，这些是后续 React 实战项目的支撑。对于完全没有接触过 TypeScript 的人，需要额外准备时间理解类型系统的抽象概念。学完后，能独立完成一个包含 TypeScript 的 React 组件库，并掌握类型定义、枚举、泛型接口的设计方法。

资料配合练习的建议

课程资料包含多个类型系统专项练习和 React 组件实战案例。以数组类型模块为例，应重点完成带泛型的数组解构、过滤、映射练习，理解类型守卫的应用场景。React 实战部分需结合模块化开发练习，例如实现一个支持类型定义的表单组件。资料中的代码片段适合直接改造为小型项目，通过调试加深理解。配合移动端或桌面端的 TypeScript 配置文件，可以练习不同环境下的类型检查差异。整体建议将每章节的练习题整理为独立文件，逐步构建个人 TypeScript 范例库，辅助后续实际项目开发。

课程目录

06. Array Types161 集
  • 4. Array Types EXERCISE.mp4
  • [17.1 MB] 3. Multidimensional Arrays.mp4
  • [9.1 MB] 1. arrays.ts [468.0 B] 4. arraysExercise.ts [1.0 KB] 1. Working With Array Types.vtt [6.0 KB] 2. More Array Syntax.vtt [3.8 KB] 4. arraysExerciseSOLUTION.ts [1.3 KB] 1. Working With Array Types.mp4
  • [7.6 MB] 2. More Array Syntax.mp4
  • [5.8 MB] 4. Array Types EXERCISE.vtt [5.2 KB] 3. Multidimensional Arrays.vtt [2.4 KB] 📁 19. React & TypeScript 11. Updating The State.mp4
  • [18.8 MB] 1. React & TypeScript Introduction【更多精选‖公众号：CunWorknotes】 .mp4
  • [21.2 MB] 4. Our First Component.vtt [8.9 KB] 11. Updating The State.vtt [4.1 KB] 5. A Note on React.FC.vtt [4.1 KB] 6. Props With TypeScript.mp4
  • [19.9 MB] 9. Creating Our ShoppingItem Form.mp4
  • [25.4 MB] 10. useRef With TypeScript.vtt [10.7 KB] 12. Finishing Touches.mp4
  • [19.6 MB] 9. Creating Our ShoppingItem Form.vtt [5.0 KB] 12. Finishing Touches.vtt [6.0 KB] 7. Creating Our ShoppingList Component.vtt [11.6 KB] 2. NOTE Alternative to Creating a React App - Using Vite.html
  • [1.9 KB] 5. A Note on React.FC.mp4
  • [9.5 MB] 13. React + TypeScript Wrapup.vtt [3.3 KB] 7. Creating Our ShoppingList Component.mp4
  • [31.6 MB] 8. useState With TypeScript.vtt [7.8 KB] 13. React + TypeScript Wrapup.mp4
  • [9.4 MB] 6. Props With TypeScript.vtt [6.1 KB] 1. React & TypeScript Introduction.vtt [5.9 KB] 3. Create React App With TypeScript.vtt [13.6 KB] 1. shopping-app.zip
  • [396.2 KB] 8. useState With TypeScript.mp4
  • [19.4 MB] 4. Our First Component.mp4
  • [43.3 MB] 10. useRef With TypeScript.mp4
  • [47.7 MB] 3. Create React App With TypeScript.mp4
  • [50.9 MB] 📁 16. Working With Type Declarations 1. Introducing Type Declarations.mp4
  • [45.5 MB] 1. thirdpartylibs.zip
  • [6.1 KB] 2. Using 3rd Party Libraries Axios.vtt [8.4 KB] 4. Installing Types Separately.vtt [12.1 KB] 1. Introducing Type Declarations.vtt [6.4 KB] 4. Installing Types Separately.mp4
  • [68.2 MB] 2. Using 3rd Party Libraries Axios.mp4
  • [36.3 MB] 3. Working With Axios Types.mp4
  • [92.6 MB] 3. Working With Axios Types.vtt [15.5 KB] 📁 17. Modules 5. ImportExport Syntax In Depth.mp4
  • [19.0 MB] 5. ImportExport Syntax In Depth.vtt [9.2 KB] 1. A Note On Namespaces.vtt [5.7 KB] 2. Working Without Modules.mp4
  • [29.1 MB] 1. A Note On Namespaces.mp4
  • [34.7 MB] 2. Working Without Modules.vtt [8.1 KB] 3. Using TypeScript Modules.mp4
  • [26.4 MB] 3. Using TypeScript Modules.vtt [8.7 KB] 4. Changing Compilation Module System.vtt [9.9 KB] 4. Changing Compilation Module System.mp4
  • [42.5 MB] 1. modules.zip
  • [22.5 KB] 6. Importing Types.vtt [8.2 KB] 6. Importing Types.mp4
  • [17.6 MB] 📁 05. Object Types 3. Excess Properties【公重号：CunWorkNotes】.mp4
  • [9.9 MB] 6. Nested Objects.mp4
  • [19.0 MB] 9. Intersection Types【公重号：CunWorkNotes】.mp4
  • [9.3 MB] 10. Object Types EXERCISE【整理不易‖记得关注：CunWorKNotes】.mp4
  • [23.5 MB] 7. Optional Properties【更多精选‖公众号：CunWorknotes】 .mp4
  • [4.8 MB] 5. Creating Type Aliases.vtt [5.7 KB] 5. Creating Type Aliases.mp4
  • [13.4 MB] 10. objectsExerciseSOLUTION.ts [1.4 KB] 9. Intersection Types.vtt [5.7 KB] 1. Working With Object Types.vtt [6.2 KB] 8. The readonly Modifier.vtt [3.7 KB] 2. More Object Types.vtt [4.0 KB] 10. objectsExercise.ts [752.0 B] 6. Nested Objects.vtt [11.6 KB] 3. Excess Properties.vtt [4.0 KB] 7. Optional Properties.vtt [2.1 KB] 1. Working With Object Types.mp4
  • [7.6 MB] 2. More Object Types.mp4
  • [6.9 MB] 4.5 Object Types Quiz.html
  • [16.7 KB] 1. objects.ts [2.1 KB] 10. Object Types EXERCISE.vtt [7.3 KB] 8. The readonly Modifier.mp4
  • [5.5 MB] 📁 04. Functions 7. The Void Type.mp4
  • [4.4 MB] 5. Return Type Annotations.mp4
  • [21.2 MB] 9. The Never Type【整理不易‖记得关注：CunWorKNotes】.mp4
  • [7.3 MB] 6. Anonymous Function Contextual Typing.vtt [3.4 KB] 1. Function Parameter Annotations.vtt [6.1 KB] 9. The Never Type.vtt [5.3 KB] 4. Working With Default Parameters.vtt [2.5 KB] 10. functionsExercise.ts [967.0 B] 2.3 Function Parameter Quiz.html
  • [16.4 KB] 8.4 Return Type Quiz.html
  • [17.4 KB] 10. functionsExerciseSOLUTION.ts [1.5 KB] 10. Function Types EXERCISE.vtt [7.2 KB] 1. functions.ts [844.0 B] 5. Return Type Annotations.vtt [9.8 KB] 3. More On Function Parameter Annotations.vtt [3.0 KB] 4. Working With Default Parameters.mp4
  • [4.4 MB] 3. More On Function Parameter Annotations.mp4
  • [5.9 MB] 7. The Void Type.vtt [2.9 KB] 10. Function Types EXERCISE.mp4
  • [23.2 MB] 1. Function Parameter Annotations.mp4
  • [11.7 MB] 6. Anonymous Function Contextual Typing.mp4
  • [6.5 MB] 📁 14. Generics 7. Generics With Multiple Types【更多精选‖公众号：CunWorknotes】 .mp4
  • [16.7 MB] 9. Default Type Parameters.mp4
  • [9.9 MB] 2. Another Example Of A Built-In Generic.mp4
  • [24.9 MB] 8. Adding Type Constraints.mp4
  • [18.3 MB] 5. Inferred Generic Type Parameters【资源精选‖更多关注：CunworkNotes】.mp4
  • [11.0 MB] 10. Writing Generic Classes.vtt [4.4 KB] 4. Writing Another Generic Function.mp4
  • [15.2 MB] 1. Introducing Generics.mp4
  • [11.7 MB] 3. Writing Our First Generic.vtt [10.5 KB] 1. Introducing Generics.vtt [8.4 KB] 7. Generics With Multiple Types.vtt [8.1 KB] 1. generics.zip
  • [22.0 KB] 10. Writing Generic Classes.mp4
  • [8.3 MB] 9. Default Type Parameters.vtt [3.9 KB] 6. Generics, Arrow Functions, & TSX Files.vtt [3.4 KB] 3. Writing Our First Generic.mp4
  • [20.5 MB] 2. Another Example Of A Built-In Generic.vtt [11.7 KB] 6. Generics, Arrow Functions, & TSX Files.mp4
  • [12.7 MB] 8. Adding Type Constraints.vtt [6.6 KB] 5. Inferred Generic Type Parameters.vtt [4.9 KB] 4. Writing Another Generic Function.vtt [7.8 KB] 📁 11. Mini Project The DOM, Type Assertions, and More! 1. MiniProject.zip
  • [22.1 KB] 4. TypeScript's Non-Null Assertion Operator【整理不易‖记得关注：CunWorKNotes】.mp4
  • [26.0 MB] 5. Type Assertions.mp4
  • [13.5 MB] 1. A Simple Project Setup.mp4
  • [31.8 MB] 8. Building The Todo List.vtt [9.4 KB] 7. Working With Events.vtt [8.8 KB] 10. Connecting to LocalStorage.mp4
  • [28.2 MB] 2. Working With The DOM.vtt [11.7 KB] 5. Type Assertions.vtt [4.5 KB] 3. The Lib Compiler Option.mp4
  • [29.1 MB] 10. Connecting to LocalStorage.vtt [9.6 KB] 2. Working With The DOM.mp4
  • [64.8 MB] 11. Todo List Finishing Touches.mp4
  • [33.8 MB] 6. Type Assertions With the DOM.mp4
  • [39.8 MB] 1. A Simple Project Setup.vtt [10.9 KB] 9. Adding in an Interface.mp4
  • [16.2 MB] 11. Todo List Finishing Touches.vtt [8.5 KB] 7. Working With Events.mp4
  • [21.6 MB] 4. TypeScript's Non-Null Assertion Operator.vtt [10.2 KB] 6. Type Assertions With the DOM.vtt [10.6 KB] 8. Building The Todo List.mp4
  • [21.7 MB] 3. The Lib Compiler Option.vtt [8.9 KB] 9. Adding in an Interface.vtt [7.1 KB] 📁 18. Webpack & TypeScript 7. Webpack Dev Server【更多精选‖公众号：CunWorknotes】 .mp4
  • [31.4 MB] 8. Production Configuration.mp4
  • [61.1 MB] 1. What's The Point Of Webpack.mp4
  • [16.5 MB] 4. Basic Webpack Config.mp4
  • [79.2 MB] 2. webpack_ts_starter.zip
  • [7.0 MB] 8. Production Configuration.vtt [10.3 KB] 4. Basic Webpack Config.vtt [16.5 KB] 5. Adding Source Maps.mp4
  • [14.8 MB] 7. Webpack Dev Server.vtt [5.1 KB] 2. Setting Up a Project.vtt [15.4 KB] 5. Adding Source Maps.vtt [3.7 KB] 3. Installing Webpack Dependencies.mp4
  • [22.2 MB] 6. IMPORTANT NOTE Fixing the Missing devServer Config.html
  • [2.2 KB] 3. Installing Webpack Dependencies.vtt [6.9 KB] 2. Setting Up a Project.mp4
  • [40.5 MB] 1. What's The Point Of Webpack.vtt [7.2 KB] 8. webpack_ts_final.zip
  • [7.0 MB] 📁 13. TypeScript Classes 1. Annotating Classes In TypeScript【整理不易‖记得关注：CunWorKNotes】.mp4
  • [14.2 MB] 8. The Protected Modifier.mp4
  • [9.9 MB] 9. Classes and Interfaces.mp4
  • [12.8 MB] 6. Parameter Properties Shorthand.mp4
  • [10.5 MB] 10. Creating Abstract Classes.mp4
  • [29.1 MB] 1. Annotating Classes In TypeScript.vtt [6.3 KB] 3. readonly Class Properties.mp4
  • [3.4 MB] 5. The private Modifier.mp4
  • [21.4 MB] 9. Classes and Interfaces.vtt [7.7 KB] 4. The public Modifier.mp4
  • [5.2 MB] 7. Getters and Setters.mp4
  • [15.5 MB] 3. readonly Class Properties.vtt [2.1 KB] 1. TSClasses.ts [1.9 KB] 4. The public Modifier.vtt [3.5 KB] 8. The Protected Modifier.vtt [4.0 KB] 5. The private Modifier.vtt [9.6 KB] 2. Class Fields In TypeScript.vtt [3.4 KB] 10. Creating Abstract Classes.vtt [12.4 KB] 6. Parameter Properties Shorthand.vtt [5.2 KB] 7. Getters and Setters.vtt [7.2 KB] 2. Class Fields In TypeScript.mp4
  • [5.0 MB] 📁 15. Type Narrowing 4. Narrowing With The In Operator【整理不易‖记得关注：CunWorKNotes】.mp4
  • [19.3 MB] 1. Typeof Guards.mp4
  • [11.9 MB] 6. Working With Type Predicates.vtt [9.2 KB] 5. Instanceof Narrowing.mp4
  • [18.6 MB] 1. narrowing.ts [2.9 KB] 6. Working With Type Predicates.mp4
  • [20.5 MB] 4. Narrowing With The In Operator.vtt [8.1 KB] 2. Truthiness Guards.vtt [8.1 KB] 5. Instanceof Narrowing.vtt [7.6 KB] 2. Truthiness Guards.mp4
  • [12.9 MB] 8. Exhaustiveness Checks With Never.vtt [6.1 KB] 1. Typeof Guards.vtt [8.4 KB] 8. Exhaustiveness Checks With Never.mp4
  • [13.0 MB] 3. Equality Narrowing.vtt [5.5 KB] 3. Equality Narrowing.mp4
  • [8.4 MB] 7. Discriminated Unions.mp4
  • [33.9 MB] 7. Discriminated Unions.vtt [15.9 KB] 📁 03. Type Annotation Basics 6. The Any Type【更多精选‖公众号：CunWorknotes】 .mp4
  • [10.3 MB] 2. Working With Numbers & Booleans.mp4
  • [4.1 MB] 1. Our First Type Annotation.mp4
  • [15.5 MB] 8.2 Inference Quiz.html
  • [17.4 KB] 3.1 Super Quick Quiz!【优质资源‖关注：cunWorkNotes 解锁】.html
  • [16.3 KB] 7. Delayed Initialization & Implicit Any.mp4
  • [8.3 MB] 5. Type Inference.vtt [4.0 KB] 4. Compiling TypeScript.vtt [5.4 KB] 2. Working With Numbers & Booleans.vtt [2.9 KB] 6. The Any Type.vtt [3.0 KB] 4. Compiling TypeScript.mp4
  • [18.3 MB] 5. Type Inference.mp4
  • [6.1 MB] 1. variables.ts [868.0 B] 7. Delayed Initialization & Implicit Any.vtt [5.0 KB] 1. Our First Type Annotation.vtt [7.0 KB] 📁 08. Tuples and Enums 4. NOTE About The Slides In The Upcoming Lecture【资源精选‖更多关注：CunworkNotes】.html
  • [188.0 B] 7. Enums Behind The Scenes.mp4
  • [14.1 MB] 2. A Bit More On Tuples.mp4
  • [15.8 MB] 1. Introducing Tuples.vtt [5.7 KB] 3.6 Tuples Quiz.html
  • [16.8 KB] 7. Enums Behind The Scenes.vtt [8.0 KB] 5. Introducing Enums.mp4
  • [13.4 MB] 2. A Bit More On Tuples.vtt [10.0 KB] 1. tuplesEnums.ts [751.0 B] 1. Introducing Tuples.mp4
  • [7.7 MB] 6. A Bit More On Enums!.mp4
  • [7.8 MB] 5. Introducing Enums.vtt [8.9 KB] 6. A Bit More On Enums!.vtt [4.7 KB] 📁 12. Classes 10. The Dreaded Super()【整理不易‖记得关注：CunWorKNotes】.mp4
  • [16.2 MB] 8. Static Properties & Methods.vtt [5.7 KB] 8. Static Properties & Methods.mp4
  • [13.3 MB] 4. Class Fields.mp4
  • [12.8 MB] 4. Class Fields.vtt [5.8 KB] 2. The Class Keyword.mp4
  • [12.3 MB] 9. Extending Classes.vtt [4.3 KB] 1. Classes Setup.mp4
  • [14.4 MB] 5. Private Fields.vtt [9.2 KB] 6. Getters.mp4
  • [11.9 MB] 7. Setters.mp4
  • [32.1 MB] 3. Constructors.vtt [5.2 KB] 5. Private Fields.mp4
  • [20.7 MB] 9. Extending Classes.mp4
  • [12.8 MB] 7. Setters.vtt [8.1 KB] 2. The Class Keyword.vtt [6.8 KB] 1. Classes Setup.vtt [6.0 KB] 10. The Dreaded Super().vtt [6.6 KB] 3. Constructors.mp4
  • [12.5 MB] 6. Getters.vtt [4.1 KB] 📁 01. Introduction 5. TypeScript Overview.mp4
  • [20.6 MB] 5. TypeScript Overview.vtt [7.7 KB] 6. TypeScript Slides.pdf
  • [36.5 MB] 2. Join The Community!.html
  • [920.0 B] 4. The Case For TypeScript.mp4
  • [30.8 MB] 1. Welcome & Course Overview.mp4
  • [3.4 MB] 3. Course Prerequisites.mp4
  • [2.3 MB] 4. The Case For TypeScript.vtt [6.0 KB] 3. Course Prerequisites.vtt [3.2 KB] 6. GET THE COURSE SLIDES!.html
  • [425.0 B] 📁 10. The TypeScript Compiler 4. The Files Compiler Option【公重号：CunWorkNotes】.mp4
  • [22.7 MB] 7. Target Option.mp4
  • [24.8 MB] 3. Working With Multiple Files.vtt [5.9 KB] 2. Watch Mode.vtt [3.6 KB] 6. Outdir Option.vtt [2.4 KB] 8. Strict Option.mp4
  • [35.1 MB] 8. Strict Option.vtt [8.1 KB] 2. Watch Mode.mp4
  • [5.4 MB] 9. Compiler Options Wrap Up.mp4
  • [19.6 MB] 3. Working With Multiple Files.mp4
  • [20.3 MB] 5. Include & Exclude Options.vtt [8.9 KB] 7. Target Option.vtt [3.2 KB] 1. Compiling to JavaScript.mp4
  • [33.0 MB] 9. Compiler Options Wrap Up.vtt [4.1 KB] 6. Outdir Option.mp4
  • [11.4 MB] 1. Compiling to JavaScript.vtt [8.5 KB] 5. Include & Exclude Options.mp4
  • [36.6 MB] 4. The Files Compiler Option.vtt [5.8 KB] 📁 02. Installation & Setup 3. Installing Visual Studio Code.vtt [2.9 KB] 📁 01. Introduction 1. Welcome & Course Overview.vtt [3.9 KB] 📁 09. Interfaces 3. Interface Methods【整理不易‖记得关注：CunWorKNotes】.mp4
  • [6.8 MB] 4. Interface Method Parameters【更多精选‖公众号：CunWorknotes】 .mp4
  • [9.1 MB] 8. Interface Multiple Inheritance.mp4
  • [8.2 MB] 7. Extending Interfaces.mp4
  • [8.0 MB] 8. Interface Multiple Inheritance.vtt [4.2 KB] 6. Reopening Interfaces.vtt [3.7 KB] 1. Introducing Interfaces.vtt [5.9 KB] 5.7 Interface Methods Quiz.html
  • [17.9 KB] 6. Reopening Interfaces.mp4
  • [5.7 MB] 2. Readonly and Optional Interface Properties.mp4
  • [5.2 MB] 1. Introducing Interfaces.mp4
  • [7.8 MB] 2. Readonly and Optional Interface Properties.vtt [3.4 KB] 9. Interfaces Vs. Type Aliases.vtt [6.2 KB] 9. Interfaces Vs. Type Aliases.mp4
  • [9.3 MB] 4. Interface Method Parameters.vtt [5.1 KB] 3. Interface Methods.vtt [4.3 KB] 1. interfaces.ts [1.7 KB] 7. Extending Interfaces.vtt [4.7 KB] 📁 02. Installation & Setup 2. The TypeScript Playground.mp4
  • [17.0 MB] 3. Installing Visual Studio Code.mp4
  • [4.4 MB] 4. How We Use TypeScript.vtt [9.1 KB] 1. Installing TypeScript.mp4
  • [23.1 MB] 2. The TypeScript Playground.vtt [5.0 KB] 1. Installing TypeScript.vtt [4.8 KB] 4. How We Use TypeScript.mp4
  • [11.1 MB] 📁 07. Union Types 5. unionsExercise.ts [1.9 KB] 2. Type Narrowing w Union Types.vtt [10.9 KB] 1. Introducing Union Types.mp4
  • [10.2 MB] 2. Type Narrowing w Union Types.mp4
  • [45.2 MB] 5. Union Types EXERCISE.vtt [9.4 KB] 1. unionTypes.ts [1.1 KB] 4. Literal Types.mp4
  • [12.2 MB] 4. Literal Types.vtt [5.5 KB] 3. Union Types and Arrays.mp4
  • [10.1 MB] 5. Union Types EXERCISE.mp4
  • [49.7 MB] 1. Introducing Union Types.vtt [6.0 KB] 3. Union Types and Arrays.vtt [6.1 KB] 5. unionsExerciseSOLUTION.ts [2.5 KB] 适合人群 前端开发者 React 开发者 TypeScript 初学者 学习收获 掌握 TypeScript 基础 理解高级类型用法 提升 React 开发效率 祝您学习愉快！ 学有所成，前程似锦！