3.10类型检查 (TypeScript, PropTypes)

文档摘要

3.10类型检查 (TypeScript, PropTypes) React 进阶：3.10 类型检查 (TypeScript, PropTypes) 在构建大型 React 应用时，类型检查变得至关重要。它可以帮助我们尽早发现错误，提高代码的可维护性，并改善开发体验。React 主要通过两种方式进行类型检查：TypeScript 和 PropTypes。 TypeScript TypeScript 是一种 JavaScript 的超集，它添加了静态类型定义。这意味着我们可以在编写代码时指定变量、函数参数和返回值的类型。TypeScript 编译器会在编译时检查类型错误，从而在运行时避免潜在的问题。 1.1 TypeScript 的优势提前发现错误：在编译时捕获类型错误，避免运行时崩溃。

3.10类型检查 (TypeScript, PropTypes)

React 进阶：3.10 类型检查 (TypeScript, PropTypes)

在构建大型 React 应用时，类型检查变得至关重要。它可以帮助我们尽早发现错误，提高代码的可维护性，并改善开发体验。React 主要通过两种方式进行类型检查：TypeScript 和 PropTypes。

1. TypeScript

TypeScript 是一种 JavaScript 的超集，它添加了静态类型定义。这意味着我们可以在编写代码时指定变量、函数参数和返回值的类型。TypeScript 编译器会在编译时检查类型错误，从而在运行时避免潜在的问题。

1.1 TypeScript 的优势

提前发现错误： 在编译时捕获类型错误，避免运行时崩溃。
提高代码可读性： 类型定义清晰地描述了代码的预期行为。
改善代码维护性： 类型信息有助于理解和修改现有代码。
更好的 IDE 支持： 智能提示、自动补全和重构功能更强大。

1.2 在 React 中使用 TypeScript

安装 TypeScript：


npm install --save-dev typescript @types/react @types/react-dom

配置 TypeScript：

创建一个 tsconfig.json 文件，配置 TypeScript 编译器选项。一个基本的配置如下：


{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "strict": true,
    "moduleResolution": "node",
    "baseUrl": "./src",
    "paths": {
      "*": ["./*"]
    }
  },
  "include": ["src"]
}

使用 TypeScript 编写 React 组件：

将 .js 或 .jsx 文件重命名为 .tsx 文件。
```
import React from 'react';
interface Props {
  name: string;
  age?: number; // 可选属性
}
const MyComponent: React.FC<Props> = ({ name, age }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      {age && <p>You are {age} years old.</p>}
    </div>
  );
};
export default MyComponent;
```
代码详解：
- interface Props 定义了组件的 props 类型。
- name: string 表示 name 属性必须是字符串类型。
- age?: number 表示 age 属性是可选的，并且是数字类型。
- React.FC<Props> 是一个泛型类型，表示这是一个函数组件，并且接受 Props 类型的 props。

使用组件：


import MyComponent from './MyComponent';
const App = () => {
  return (
    <div>
      <MyComponent name="Alice" age={30} />
      <MyComponent name="Bob" />
    </div>
  );
};
export default App;

如果传递了不符合类型定义的 props，TypeScript 编译器会报错。例如，如果将 name 属性设置为数字，编译器会提示错误。

1.3 TypeScript 类型定义

基本类型： string, number, boolean, null, undefined, symbol, bigint
数组类型： string[], number[], Array<string>

对象类型：


interface Person {
  name: string;
  age: number;
}

函数类型：


type Add = (x: number, y: number) => number;
const add: Add = (x, y) => x + y;

联合类型： string | number (可以是字符串或数字)
字面量类型： 'red' | 'green' | 'blue' (只能是指定的字符串)
元组类型： [string, number] (固定长度和类型的数组)
泛型： 允许定义可重用的类型，例如 Array<T>

1.4 TypeScript 高级类型

Partial: 将类型 T 的所有属性设置为可选。
Required: 将类型 T 的所有属性设置为必选。
Readonly: 将类型 T 的所有属性设置为只读。
Pick<T, K>: 从类型 T 中选择一组属性 K。
Omit<T, K>: 从类型 T 中排除一组属性 K。
Record<K, T>: 创建一个对象类型，其属性键为 K，属性值为 T。


interface User {
  id: number;
  name: string;
  email: string;
  age: number;
}
// Partial<User>：所有属性可选
type PartialUser = Partial<User>;
// Required<User>：所有属性必选 (与 User 相同)
type RequiredUser = Required<User>;
// Readonly<User>：所有属性只读
type ReadonlyUser = Readonly<User>;
// Pick<User, 'id' | 'name'>：只包含 id 和 name 属性
type UserIDName = Pick<User, 'id' | 'name'>;
// Omit<User, 'email' | 'age'>：排除 email 和 age 属性
type UserWithoutEmailAge = Omit<User, 'email' | 'age'>;
// Record<string, number>：键为字符串，值为数字的对象
type StringNumberMap = Record<string, number>;
const ages: StringNumberMap = {
  Alice: 30,
  Bob: 25,
};

1.5 使用 `as` 进行类型断言

有时候 TypeScript 无法推断出正确的类型，可以使用 as 关键字进行类型断言，告诉编译器你清楚地知道变量的类型。


const element = document.getElementById('my-element') as HTMLInputElement;
// 确保 element 不为 null
if (element) {
  element.value = 'Hello';
}

注意： 类型断言应该谨慎使用，因为它会绕过 TypeScript 的类型检查。

2. PropTypes

PropTypes 是 React 提供的一种运行时类型检查机制。它允许我们为组件的 props 定义类型，并在开发模式下，如果 props 的类型不匹配，React 会在控制台中发出警告。

2.1 PropTypes 的优势

简单易用： 易于集成到现有的 JavaScript 代码中。
运行时检查： 在运行时检查 props 类型，提供实时的反馈。
无需编译： 不需要额外的编译步骤。

2.2 在 React 中使用 PropTypes

安装 PropTypes：
```
npm install prop-types
```
导入 PropTypes：
```
import PropTypes from 'prop-types';
```

定义 PropTypes：


import React from 'react';
import PropTypes from 'prop-types';
const MyComponent = ({ name, age }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      {age && <p>You are {age} years old.</p>}
    </div>
  );
};
MyComponent.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number,
};
export default MyComponent;

代码详解：

MyComponent.propTypes 定义了组件的 props 类型。
name: PropTypes.string.isRequired 表示 name 属性必须是字符串类型，并且是必需的。
age: PropTypes.number 表示 age 属性是数字类型，并且是可选的。

使用组件：


import MyComponent from './MyComponent';
const App = () => {
  return (
    <div>
      <MyComponent name="Alice" age={30} />
      <MyComponent name="Bob" />
      {/* <MyComponent name={123} />  // 会在控制台发出警告 */}
    </div>
  );
};
export default App;

如果传递了不符合类型定义的 props，React 会在控制台中发出警告。例如，如果将 name 属性设置为数字，控制台会显示警告信息。

2.3 PropTypes 类型

PropTypes.string
PropTypes.number
PropTypes.bool
PropTypes.object
PropTypes.array
PropTypes.func
PropTypes.symbol
PropTypes.node (可以渲染的任何东西：数字、字符串、元素或数组)
PropTypes.element (React 元素)
PropTypes.instanceOf(MyClass) (特定类的实例)
PropTypes.oneOf(['red', 'green', 'blue']) (枚举值)
PropTypes.oneOfType([PropTypes.string, PropTypes.number]) (联合类型)
PropTypes.arrayOf(PropTypes.number) (数字数组)
PropTypes.objectOf(PropTypes.string) (值为字符串的对象)
PropTypes.shape({ name: PropTypes.string, age: PropTypes.number }) (具有特定形状的对象)
PropTypes.exact({ name: PropTypes.string, age: PropTypes.number }) (具有精确形状的对象)
PropTypes.any (任何类型)

2.4 自定义 PropTypes 验证器

可以创建自定义的 PropTypes 验证器，以实现更复杂的类型检查。


import PropTypes from 'prop-types';
const MyComponent = ({ myProp }) => {
  return <div>{myProp}</div>;
};
const myCustomValidator = (props, propName, componentName) => {
  if (props[propName] < 0) {
    return new Error(
      'Invalid prop `' + propName + '` supplied to' +
      ' `' + componentName + '`. Value must be non-negative.'
    );
  }
};
MyComponent.propTypes = {
  myProp: myCustomValidator,
};
export default MyComponent;

3. TypeScript vs PropTypes

特性	TypeScript	PropTypes
类型检查时机	编译时	运行时
错误发现	提前发现，避免运行时错误	运行时发现，控制台警告
代码可读性	更高，类型定义清晰	较低，类型定义与组件分离
代码维护性	更好，类型信息有助于理解代码	较差，类型信息分散
IDE 支持	更好，智能提示、自动补全	较弱
学习曲线	较陡峭	较平缓
适用场景	大型项目，需要强类型保证	小型项目，快速原型开发

4. 图示

5. 总结

TypeScript 和 PropTypes 都是 React 中有用的类型检查工具。TypeScript 提供了更强大的静态类型检查，可以在编译时发现错误，并提高代码的可维护性。PropTypes 提供了运行时类型检查，更易于使用，并且不需要额外的编译步骤。选择哪种工具取决于项目的规模、复杂度和团队的偏好。

总的来说，对于大型、复杂的项目，建议使用 TypeScript。对于小型项目或快速原型开发，可以使用 PropTypes。在实际项目中，也可以结合使用这两种工具，以获得最佳的类型检查效果。

3.10类型检查 (TypeScript, PropTypes)

文档摘要