React 项目中使用 TypeScript

目录

1.useEffect 的使用

2. useState 的使用

3. useState 明确指定泛型类型

4. TS 类型-never 类型

5. useRef 的使用

6. TS 类型-非空断言

7. TS 流程控制类型分析

8. React 路由的使用

9. useHistory 的使用

10. useLocation 的使用

11. useParams 的使用

12. TS 类型-unknown 类型

12. never 类型和 unknown 类型

1.useEffect 的使用

目标：能够掌握 useEffect 在 TS 中的使用

内容：

useEffect函数不涉及到任何类型，TS 和 JS 中使用一致

useEffect(() => {
  const onResize = () => {
    console.log('哈哈哈');
  };
  window.addEventListener('resize', onResize);

  return () => {
    window.addEventListener('resize', onResize);
  };
}, []);

2. useState 的使用

目标：能够掌握 useState 在 TS 中的使用

内容：

• useState hook 是一个泛型函数，接收一个类型变量来指定状态的类型

// 指定 name 状态的类型为：string
const [name, setName] = useState<string>('jack');
// 指定 age 状态的类型为：number
const [age, setAge] = useState<number>(28);

• 注意：该类型变量，不仅指定了状态的类型，也指定了 setName 等修改状态函数的参数类型

const [name, setName] = useState<string>('jack');
// 此时，setName 的参数的类型也是 string
setName('rose');
// 错误演示：
// setName(18)

省略类型变量，简化 useState 的调用：

• 在使用 useState 时，只要提供了初始值，TS 就会自动根据初始值来推断出其类型，因此，可以省略类型变量
• 注意：如果 TS 自动推断出来的类型不准确，还得显式指定泛型类型

const [name, setName] = useState('jack');

3. useState 明确指定泛型类型

目标：能够明确指定 useState 的泛型类型

内容：

• 需求：获取频道列表数据并渲染

// 比如，频道列表数据是一个数组，所以，在 JS 中我们将其默认值设置为：[]
// 但是，在 TS 中使用时，如果仅仅将默认值设置为空数组，list 的类型被推断为：never[]，此时，无法往数组中添加任何数据
const [list, setList] = useState([]);

• 注意：useState 的初始值是数组、对象等复杂的数据类型，需要明确指定泛型类型
  • 因为虽然都是数组、对象，但是，项目开发中不同需求所需要的数组结构、对象结构是不同的。因此，需要明确指定其类型

type Channel = {
  id: number;
  name: string;
};
// 明确指定状态的类型，此时，list 的类型为：Channel[]
// Channel[] 表示 Channel 类型的数组，也就是，数组中只能出现 Channel 类型的数据
const [list, setList] = useState<Channel[]>([]);

总结：

• 使用 TS 时，应该以类型化思维来写代码，简单来说：先有类型，再写逻辑代码来使用该类型的数据
• 比如，对于 对象、数组 来说，就应该在使用前先明确指定要用到的对象的类型、数组的类型等等

4. TS 类型-never 类型

目标：能够知道 TS 中 never 类型的含义

内容：

• never 类型：永远不会出现的值的类型（或永远不会发生的类型）
• never 类型：处理 TS 类型系统的最底层
  • 可以将 never 类型的数据，赋值给任意其他的类型；无法将任何类型（除了 never 类型自己）来分配给 never 类型