使用 TypeScript
TypeScript 是一种通过添加类型定义来扩展 JavaScript 的语言。新的 React Native 项目默认使用 TypeScript,但也支持 JavaScript 和 Flow。
TypeScript 入门
由 React Native CLI 或像 Ignite 这样的流行模板创建的新项目将默认使用 TypeScript。
TypeScript 也可以与 Expo 一起使用,Expo 维护 TypeScript 模板,或者当 .ts
或 .tsx
文件添加到您的项目时,它会提示您自动安装和配置 TypeScript。
npx create-expo-app --template
将 TypeScript 添加到现有项目
- 将 TypeScript、类型和 ESLint 插件添加到您的项目。
- npm
- Yarn
npm install -D typescript @react-native/typescript-config @types/jest @types/react @types/react-test-renderer
yarn add --dev typescript @react-native/typescript-config @types/jest @types/react @types/react-test-renderer
此命令添加了每个依赖项的最新版本。版本可能需要更改以匹配您的项目使用的现有包。您可以使用像 React Native 升级助手 这样的工具来查看 React Native 附带的版本。
- 添加 TypeScript 配置文件。在项目根目录创建
tsconfig.json
{
"extends": "@react-native/typescript-config"
}
- 将 JavaScript 文件重命名为
*.tsx
您应该保留
./index.js
入口文件,否则在打包生产版本时可能会遇到问题。
- 运行
tsc
来检查您的新 TypeScript 文件的类型。
- npm
- Yarn
npx tsc
yarn tsc
使用 JavaScript 而不是 TypeScript
React Native 默认将新应用程序设置为 TypeScript,但仍可使用 JavaScript。扩展名为 .jsx
的文件被视为 JavaScript 而不是 TypeScript,并且不会进行类型检查。TypeScript 模块仍可导入 JavaScript 模块,反之亦然。
TypeScript 和 React Native 的工作原理
开箱即用,TypeScript 源代码在打包期间由 Babel 转换。我们建议您仅将 TypeScript 编译器用于类型检查。这是 tsc
对于新创建的应用程序的默认行为。如果您有现有 TypeScript 代码正在移植到 React Native,则使用 Babel 而不是 TypeScript 有 一两个注意事项。
React Native + TypeScript 是什么样子
您可以通过 React.Component<Props, State>
为 React 组件的 属性 和 状态 提供接口,这将在 JSX 中使用该组件时提供类型检查和编辑器自动补全功能。
import {useState} from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';
export type Props = {
name: string;
baseEnthusiasmLevel?: number;
};
function Hello({name, baseEnthusiasmLevel = 0}: Props) {
const [enthusiasmLevel, setEnthusiasmLevel] = useState(
baseEnthusiasmLevel,
);
const onIncrement = () =>
setEnthusiasmLevel(enthusiasmLevel + 1);
const onDecrement = () =>
setEnthusiasmLevel(
enthusiasmLevel > 0 ? enthusiasmLevel - 1 : 0,
);
const getExclamationMarks = (numChars: number) =>
numChars > 0 ? Array(numChars + 1).join('!') : '';
return (
<View style={styles.container}>
<Text style={styles.greeting}>
Hello {name}
{getExclamationMarks(enthusiasmLevel)}
</Text>
<View>
<Button
title="Increase enthusiasm"
accessibilityLabel="increment"
onPress={onIncrement}
color="blue"
/>
<Button
title="Decrease enthusiasm"
accessibilityLabel="decrement"
onPress={onDecrement}
color="red"
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
greeting: {
fontSize: 20,
fontWeight: 'bold',
margin: 16,
},
});
export default Hello;
您可以在 TypeScript playground 中探索更多语法。
在哪里可以找到有用的建议
- TypeScript 手册
- React 关于 TypeScript 的文档
- React + TypeScript 速查表 提供了关于如何将 React 与 TypeScript 结合使用的良好概述
在 TypeScript 中使用自定义路径别名
要在 TypeScript 中使用自定义路径别名,您需要同时设置 Babel 和 TypeScript 的路径别名。方法如下:
- 编辑您的
tsconfig.json
以包含您的 自定义路径映射。将src
根目录下的任何内容设置为无需前置路径引用即可访问,并允许通过使用tests/File.tsx
访问任何测试文件。
{
- "extends": "@react-native/typescript-config"
+ "extends": "@react-native/typescript-config",
+ "compilerOptions": {
+ "baseUrl": ".",
+ "paths": {
+ "*": ["src/*"],
+ "tests": ["tests/*"],
+ "@components/*": ["src/components/*"],
+ },
+ }
}
- 将
babel-plugin-module-resolver
作为开发包添加到您的项目
- npm
- Yarn
npm install --save-dev babel-plugin-module-resolver
yarn add --dev babel-plugin-module-resolver
- 最后,配置您的
babel.config.js
(请注意,babel.config.js
的语法与tsconfig.json
不同)
{
presets: ['module:metro-react-native-babel-preset'],
+ plugins: [
+ [
+ 'module-resolver',
+ {
+ root: ['./src'],
+ extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
+ alias: {
+ tests: ['./tests/'],
+ "@components": "./src/components",
+ }
+ }
+ ]
+ ]
}