将 TypeScript 与 React Native 结合使用
JavaScript！我们都爱它。但我们中的一些人也喜欢类型。幸运的是，存在为 JavaScript 添加更强类型的方法。我最喜欢的是TypeScript，但 React Native 对Flow支持开箱即用。您更喜欢哪种取决于个人喜好，它们都有自己为 JavaScript 添加类型魔法的方法。今天，我们将探讨如何在 React Native 应用中使用 TypeScript。
本文以 Microsoft 的TypeScript-React-Native-Starter仓库为指导。
更新：自此博客文章撰写以来，事情变得更加容易。您可以通过运行一个命令来替换本文中描述的所有设置
npx react-native init MyAwesomeProject --template react-native-template-typescript
然而，Babel 对 TypeScript 的支持确实存在一些限制，上述博客文章对此进行了详细介绍。本文中概述的步骤仍然有效，Artsy 仍在生产环境中使用react-native-typescript-transformer，但使用上述命令是使用 React Native 和 TypeScript 快速启动和运行的最快方法。如果需要，您可以稍后进行切换。
无论如何，玩得开心！原始博客文章继续如下。
先决条件
由于您可能在多个不同的平台之一上开发，针对多种不同类型的设备，因此基本设置可能很复杂。您应该首先确保可以在没有 TypeScript 的情况下运行纯 React Native 应用。请按照React Native 网站上的说明开始操作。当您成功部署到设备或模拟器后，您就可以开始使用 TypeScript React Native 应用了。
初始化
一旦您尝试搭建一个普通的React Native项目，您就可以开始添加TypeScript了。让我们继续进行。
react-native init MyAwesomeProject
cd MyAwesomeProject
添加 TypeScript
下一步是将 TypeScript 添加到您的项目中。以下命令将：
- 将 TypeScript 添加到您的项目
- 将React Native TypeScript Transformer添加到您的项目
- 初始化一个空的 TypeScript 配置文件，我们接下来会配置它
- 添加一个空的 React Native TypeScript Transformer 配置文件，我们接下来会配置它
- 添加 React 和 React Native 的类型定义
好的，让我们继续运行这些命令。
yarn add --dev typescript
yarn add --dev react-native-typescript-transformer
yarn tsc --init --pretty --jsx react
touch rn-cli.config.js
yarn add --dev @types/react @types/react-native
tsconfig.json 文件包含 TypeScript 编译器的所有设置。上面命令创建的默认设置大部分都很好，但请打开文件并取消注释以下行
{
/* Search the config file for the following line and uncomment it. */
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
}
rn-cli.config.js 包含 React Native TypeScript Transformer 的设置。打开它并添加以下内容
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
},
getSourceExts() {
return ['ts', 'tsx'];
},
};
迁移到 TypeScript
将生成的 App.js 和 __tests_/App.js 文件重命名为 App.tsx。index.js 需要使用 .js 扩展名。所有新文件都应使用 .tsx 扩展名（如果文件不包含任何 JSX，则使用 .ts）。
如果您现在尝试运行该应用，将会收到类似 object prototype may only be an object or null 的错误。这是由于未能同时导入 React 的默认导出和同一行中的命名导出所致。打开 App.tsx 并修改文件顶部的导入语句
-import React, { Component } from 'react';
+import React from 'react'
+import { Component } from 'react';
其中一些与 Babel 和 TypeScript 如何与 CommonJS 模块互操作的差异有关。将来，两者将在相同的行为上稳定下来。
此时，您应该能够运行React Native应用程序。
添加 TypeScript 测试基础设施
React Native 自带Jest，因此为了用 TypeScript 测试 React Native 应用，我们需要将ts-jest添加到我们的 devDependencies。
yarn add --dev ts-jest
然后，我们将打开 package.json 并将 jest 字段替换为以下内容
{
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js"
],
"transform": {
"^.+\\.(js)$": "<rootDir>/node_modules/babel-jest",
"\\.(ts|tsx)$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
},
"testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
"testPathIgnorePatterns": [
"\\.snap$",
"<rootDir>/node_modules/"
],
"cacheDirectory": ".jest/cache"
}
}
这将配置 Jest 以使用 `ts-jest` 运行 `.ts` 和 `.tsx` 文件。
安装依赖项类型声明
为了在 TypeScript 中获得最佳体验，我们希望类型检查器能够理解我们依赖项的形状和 API。一些库会发布带有 .d.ts 文件（类型声明/类型定义文件）的包，这些文件可以描述底层 JavaScript 的形状。对于其他库，我们需要在 @types/ npm 作用域中显式安装相应的包。
例如，这里我们需要 Jest、React、React Native 和 React Test Renderer 的类型。
yarn add --dev @types/jest @types/react @types/react-native @types/react-test-renderer
我们将这些声明文件包保存到我们的 开发依赖项中，因为这是一个 React Native 应用，它只在开发过程中而不是运行时使用这些依赖项。如果我们要将一个库发布到 NPM，我们可能需要将其中一些类型依赖项添加为常规依赖项。
您可以在此处阅读更多关于获取 .d.ts 文件信息。
忽略更多文件
为了您的源代码控制，您将希望开始忽略 .jest 文件夹。如果您正在使用 git，我们可以直接将条目添加到我们的 .gitignore 文件中。
# Jest
#
.jest/
作为一个检查点，考虑将您的文件提交到版本控制。
git init
git add .gitignore # import to do this first, to ignore our files
git add .
git commit -am "Initial commit."
添加组件
让我们为我们的应用程序添加一个组件。我们来创建一个 `Hello.tsx` 组件。这是一个教学组件，不是您在实际应用程序中会编写的东西，而是一些非平凡的例子，展示了如何在 React Native 中使用 TypeScript。
创建一个 components 目录并添加以下示例。
// components/Hello.tsx
import React from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';
export interface Props {
name: string;
enthusiasmLevel?: number;
}
interface State {
enthusiasmLevel: number;
}
export class Hello extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
if ((props.enthusiasmLevel || 0) <= 0) {
throw new Error(
'You could be a little more enthusiastic. :D',
);
}
this.state = {
enthusiasmLevel: props.enthusiasmLevel || 1,
};
}
onIncrement = () =>
this.setState({
enthusiasmLevel: this.state.enthusiasmLevel + 1,
});
onDecrement = () =>
this.setState({
enthusiasmLevel: this.state.enthusiasmLevel - 1,
});
getExclamationMarks = (numChars: number) =>
Array(numChars + 1).join('!');
render() {
return (
<View style={styles.root}>
<Text style={styles.greeting}>
Hello{' '}
{this.props.name +
this.getExclamationMarks(this.state.enthusiasmLevel)}
</Text>
<View style={styles.buttons}>
<View style={styles.button}>
<Button
title="-"
onPress={this.onDecrement}
accessibilityLabel="decrement"
color="red"
/>
</View>
<View style={styles.button}>
<Button
title="+"
onPress={this.onIncrement}
accessibilityLabel="increment"
color="blue"
/>
</View>
</View>
</View>
);
}
}
// styles
const styles = StyleSheet.create({
root: {
alignItems: 'center',
alignSelf: 'center',
},
buttons: {
flexDirection: 'row',
minHeight: 70,
alignItems: 'stretch',
alignSelf: 'center',
borderWidth: 5,
},
button: {
flex: 1,
paddingVertical: 0,
},
greeting: {
color: '#999',
fontWeight: 'bold',
},
});
哇！这很多，但让我们分解一下：
- 我们没有渲染像 `div`、`span`、`h1` 等 HTML 元素，而是渲染像 `View` 和 `Button` 这样的组件。这些是可以在不同平台上工作的原生组件。
- 样式是使用React Native提供的
StyleSheet.create函数指定的。React的样式表允许我们使用Flexbox控制布局，并使用类似于CSS的其他结构来设置样式。
添加组件测试
现在我们有了一个组件，让我们尝试测试它。
我们已经安装了 Jest 作为测试运行器。我们将为我们的组件编写快照测试，让我们添加快照测试所需的附加组件
yarn add --dev react-addons-test-utils
现在，让我们在 components 目录中创建一个 __tests__ 文件夹，并为 Hello.tsx 添加一个测试
// components/__tests__/Hello.tsx
import React from 'react';
import renderer from 'react-test-renderer';
import {Hello} from '../Hello';
it('renders correctly with defaults', () => {
const button = renderer
.create(<Hello name="World" enthusiasmLevel={1} />)
.toJSON();
expect(button).toMatchSnapshot();
});
首次运行测试时，它将创建渲染组件的快照并将其存储在 components/__tests__/__snapshots__/Hello.tsx.snap 文件中。修改组件时，您需要更新快照并审查更新是否存在意外更改。您可以在此处阅读有关测试 React Native 组件的更多信息。
后续步骤
可以查看官方React 教程和状态管理库Redux。这些资源在编写 React Native 应用时可能会有所帮助。此外，您可能还想看看ReactXP，这是一个完全用 TypeScript 编写的组件库，支持 Web 上的 React 和 React Native。
祝您在更类型安全的React Native开发环境中玩得开心！
