Logo
☆☆☆☆☆
0.0
Intermediate
20h

使用 TypeScript 和 React 构建用户界面和函数

TypeScript 的泛型是一种强大的工具,能够帮助开发者确保代码的灵活性和可重用性。使用泛型可以帮助开发者精确控制应用程序中函数和组件所使用的类型。 在本课程中,我们将首先了解 TypeScript 泛型的基本概念,并创建通用的搜索和排序函数。接着,我们将开发一个用于搜索的 React 组件,利用我们编写的泛型搜索函数。然后,我们将分别创建一个通用函数和一个 React 组件,用于排序和过滤。最后,我们将整合所有这些功能,构建一个能够处理任意传入数据的单一组件,实现搜索、排序和过滤的统一管理。 完成本课程后,你将掌握编写通用 TypeScript 函数的方法,并能设计出使用 TypeScript 泛型的 React 组件。你还将能够在业务逻辑和用户界面层面,为客户端应用中的数据搜索、排序和过滤提供简洁高效的解决方案。

9 Lessons
Included in Subscription Plan
Personalized Learning
Powered by AI
使用 TypeScript 和 React 构建用户界面和函数
TypeScript 的泛型是一种强大的工具,能够帮助开发者确保代码的灵活性和可重用性。使用泛型可以帮助开发者精确控制应用程序中函数和组件所使用的类型。 在本课程中,我们将首先了解 TypeScript 泛型的基本概念,并创建通用的搜索和排序函数。接着,我们将开发一个用于搜索的 React 组件,...

WHAT YOU'LL LEARN

对 TypeScript 中泛型的理解

Content

9 Lessons • 0 Quizzes • 0 Challenges

简介
  1. 1

    简介

TypeScript 泛型简介
  1. 1

    在 TypeScript 中使用泛型

  2. 2

    一个额外的泛型示例

将所有内容整合为单一的通用组件
  1. 1

    在应用中整合所有功能

  2. 2

    创建一个视图切换按钮

  3. 3

    React 中的渲染属性

  4. 4

    重构排序组件

  5. 5

    重构过滤器组件

  6. 6

    创建一个单一的协调组件

  7. 7

    完成编排组件

为应用程序创建模拟数据
  1. 1

    创建小部件和人物的模拟数据

  2. 2

    导入和显示模拟数据

课程回顾与结语
  1. 1

    课程回顾与结语

构建一个通用的搜索功能和UI组件
  1. 1

    编写一个通用的搜索函数

  2. 2

    在多个属性上进行搜索

  3. 3

    创建一个搜索输入框

  4. 4

    测试通用搜索功能

  5. 5

    添加一个 useDebounce React Hook

附录
  1. 1

    外部环境设置

  2. 2

    自定义 PropertiesOfType 类型

构建一个通用的排序函数和用户界面组件
  1. 1

    编写一个通用的排序函数

  2. 2

    创建一个通用的排序 React 组件

  3. 3

    创建一个 WidgetRenderer

  4. 4

    创建 PersonRenderer

  5. 5

    测试新界面

  6. 6

    为排序添加降序功能

构建一个通用的过滤函数和UI组件
  1. 1

    创建一个通用的过滤函数

  2. 2

    构建一个 React 组件来实现筛选功能

  3. 3

    为过滤功能添加假值支持

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Course Author:Anonymous User

Reviews

Read reviews from students who have taken this course and share your own experience.

Reviews & Comments (0)