前言

任务列表

  • 掌握如何使用 react 官方的脚手架 create-react-app 搭建一个 react + ts 项目
  • 理解源码

大纲

  • 9-1. 效果展示和工程搭建
    • 项目最终效果演示
    • 介绍如何使用 react 官方的脚手架 create-react-app 搭建一个 react + ts 项目
    • 介绍工程搭建完成之后，默认生成的 tsconfig.json 配置文件中的字段含义
    • 清理默认工程结构中的一些不必要的模块
  • 9-2. 在 React 中使用 TS
    • 介绍 react + js 这种传统的方式，都存在哪些问题
    • 介绍 react + ts 这种开发方式，是如何解决这些问题的
    • React.FC
    • React.SFC 函数组件不再是无状态的了，因为有了 hooks，所以就没必要再使用它了
    • 类组件的 setState 获取类型检查该如何实现
  • 9-3. 制作棋子组件

小结：
9-1 完成工程初始化
9-2 简单写一个 CompCount 组件，体验一下在 react 中使用 ts 开发
9-3 ~ 9-5 写 demo
9-6 小结

React + JS

  1. 某个组件有哪些属性需要传递

antd，查看官方文档

  1. 每个属性应该传递什么类型

某个组件有一个 num 属性，是一个数字

  1. 传递事件时，有哪些参数
  2. 错误发生在运行

可以通过 propTypes 约束属性的类型，但是发生错误的时间点是在运行时

React + TS

TS 是一套类型系统，是静态的。

展示组件 + 容器组件
展示组件：通常是函数式组件
容器组件：通常是类组件

非空断言：在数据之后加上一个!，告诉 TS，不用考虑该数据为空的情况

游戏组件：提供并维护游戏中的数据，有状态组件。

总结

概念

TypeScript 是可选的、静态的类型系统

  • 为什么需要类型系统？

要构建大型的应用，会涉及大量的函数和接口，如果没有类型检查，会产生大量的调试成本。类型系统可以降低调试成本，从而降低开发成本。

  • 可选的

TS 是 JS 的超集。JS 的所有功能都能够在 TS 中使用，增加的部分是类型系统。

  • 静态的

TS代码 -> 编译 -> JS代码

如何约束类型

变量、参数、函数的返回值

  • 基本类型：boolean、number、string、object、Array、void、never、null和undefined

字面量类型 配合 联合类型 使用，达到类似于枚举的效果

对象字面量可以更加细化地约束一个对象

  1. let gender:"男"|"女";
  1. type User = {
  2.   name:string
  3.   age:number
  4. }
  • 扩展类型：类型别名、枚举、接口、类

类型别名、接口，不产生编译结果

枚举、类，产生编译结果，枚举->编译->对象，TS类->JS类

TS类：属性列表、修饰符（readonly、访问修饰符：public、private、protected）

泛型：解除某个功能和类型的耦合

类型断言：开发者非常清楚某个东西的类型，但是TS难以分辨，开发者可以通过类型断言，告诉TS这里的确切类型。

类型兼容性

鸭子辨型法，子结构辨型法

  • 基本类型：完全匹配
  • 对象类型：鸭子辨型法，字面量对象直接传递时，会有更严格的类型检查
  • 函数类型：参数数量可以少，但不可以多。要求返回必须返回，不要求返回，你随意