React组件样式与TypeScript基础入门

### React 组件样式与 TypeScript 基础入门 #### 1. React 组件样式处理 在 React 开发中，我们可以为组件添加静态过渡效果，使背景颜色能够淡入淡出。以 `ButtonSquare` 组件为例，调用方式与其他 React 组件相同，代码如下： ```typescript // chapter_05/07/app/packs/components/seat.tsx return ( <td> <ButtonSquare status={status} onClick={changeState}> {seatNumber + 1} </ButtonSquare> </td> ) ``` 我们像处理常规 React 组件一样传递 props，包括 `onClick` prop，它会被正常处理。当座位状态改变时，prop 也会改变，从而导致 `ButtonSquare` 重新渲染并重新计算其背景颜色。 对于样式组件，如果它包裹的是 HTML 元素，作为 prop 传递的任何已知 HTML 属性都会透明地传递给底层 HTML，即使你在定义样式组件时将其用作 prop。如果样式组件包裹的是另一个 React 组件，那么所有 props 都会传递给被包裹的组件。 还有一个特殊的 prop `as`，如果你希望最外层的 HTML 标签不是由样式组件定义的默认标签，可以使用它。例如，`ButtonSquare` 被定义为 `styled.span`，但如果我们希望它是一个 `div`，可以这样调用：`<ButtonSquare as="div">`。 #### 2. TypeScript 简介 在编程中，变量数据的类型表示该数据的有效取值集合。例如，如果一个变量被声明为整数类型，那么它的值应该是像 1、 -3 或 357 这样的整数，而不是像“banana”这样的字符串。如果将变量设置为非预期类型的值，可能会导致不良后果。在某些语言中，尝试设置错误类型的值会导致编译器错误；而在其他语言中，可能会在运行时导致不正确或未定义的行为。 TypeScript 是 JavaScript 的超集，它允许你选择性地为代码添加类型注解。TypeScript 需要一个编译步骤，该步骤会强制类型一致性，并将有效的 TypeScript 代码转换为适合浏览器的 JavaScript 代码。即使你没有明确提供类型信息，TypeScript 的类型系统也会根据代码对类型进行推断。使用 TypeScript 的目标是减少代码错误，首先是通过防止类型不匹配，随着使用的深入，将无效状态转换为编译时错误，从而在运行时避免这些错误。需要注意的是，TypeScript 仅在编译时强制类型一致性，对于运行时可能发生的情况，它无法提供保护。 #### 3. 使用 TypeScript 在之前的开发中，我们已经通过添加 Babel `preset-typescript` 插件和 `webpack fork-ts-checker-webpack-plugin` 安装了 TypeScript。TypeScript 的配置由 `tsconfig.json` 文件管理，该文件基本上指定了 TypeScript 允许的操作以及它生成的代码类型。 我们不需要显式调用 TypeScript 编译器。当 TypeScript 配置好后，每当 webpack 处理我们的代码时，都会包含 TypeScript 编译步骤。TypeScript 编译器会运行，如果所有类型检查都通过，它会输出 webpack 可以打包供浏览器使用的 JavaScript 代码。如果类型检查不通过，它会返回解释问题的错误消息。 需要强调的是，一旦代码编译完成，TypeScript 的任务就完成了。如果数据的行为与预期不符，TypeScript 在运行时不会提供保护。这在所有数据都由你的代码创建时通常没问题，但如果你的代码接受未经过类型检查的外部数据（例如来自服务器的传入 JSON 数据），就可能会出现问题。客户端 TypeScript 可以保证你在代码中一致地处理数据，但不能保证传入的数据具有你期望的结构。 #### 4. 理解基本 TypeScript 类型 TypeScript 允许你使用 `: <type>` 语法为任何变量声明添加类型注解，例如 `let x: number`。这是最基本的操作，后续可能会变得更复杂，但起点是为变量添加类型注解。 TypeScript 定义了四种基本类型： | 类型 | 描述 | | ---- | ---- | | boolean | 布尔值必须是 JavaScript 的 `true` 或 `false` 值。 | | number | JavaScript 只有一种用于浮点数的数值类型。TypeScript 的 `number` 类型支持浮点数、整数、十六进制字面量（如 `0xab32`）、八进制字面量（如 `0o1234`）和二进制字面量（如 `0b10010`）。 | | string | TypeScript 允许使用单引号和双引号作为字符串分隔符，并支持反引号（`）语法用于模板字符串。 | | object | TypeScript 将对象定义为任何是值且不是上述类型的东西，所以不仅包括原始对象，还包括所有类的实例。通常，你会使用更具体的类型注解，而不是使用普通的 `object`。 | `null` 和 `undefined` 也是 TypeScript 类型，你可以这样声明：`let z: null = null`，不过不太清楚这样做的实际用途。 默认情况下，TypeScript 允许将 `null` 和 `undefined` 值分配给任何变量，无论其声明的类型是什么。但有一个编译器选项 `--strictNullChecks`，它会禁止将 `null` 分配给值，除非显式允许。 任何 TypeScript 类型都可以作为数组的基础，有两种等效的语法：`string[]` 或 `Array<string>`。第二种语法是 TypeScript 泛型类型的一个例子，它允许相同的类型结构（如 `Array`）具有不同的内部类型（如 `string`），同时无论内部类型如何，都保持相同的行为。 泛型类型在类型一致性比具体类型更重要的情况下非常有用。例如，在处理数据结构时，如果有一个列表类型，并且你想编写一个返回列表第一个元素的方法，没有泛型的话，你可能需要为列表中可能包含的每种潜在数据类型编写不同的函数签名： ```typescript function getFirst(list: AStringList): string function getFirst(list: ANumberList): number function getFirst(list: AUserList): User ``` 但使用泛型，我们可以这样表示： ```typescript function getFirst(list: AList<T>): T ``` 这里的尖括号表示泛型类型，`T` 只是一个标识符，可以是任何以大写字母开头的名称。通常使用单字母标识符，以明确区分泛型和具体类型。 TypeScript 数组的元素必须是相同类型。如果你确实需要一个包含多种类型的线性结构，TypeScript 称之为元组，语法如下： ```typescript let myTuple: [string, number, string] = ["Jennifer", 8, "Lee"] ``` 如果你访问元组声明内的元素，返回值的类型将根据该元素在元组声明中的类型进行推断。例如，`myTuple[0]` 是一个字符串。如果你访问的元素索引高于数组中的元素数量，TypeScript 会允许这样做，但返回值的推断类型是所谓的联合类型，即该值是一个或多个基本类型的成员。 #### 5. 静态与动态类型 在编程语言中，处理类型信息有两种不同的策略：静态类型和动态类型。 静态类型语言要求在首次声明变量时为