將 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 開發環境中享受樂趣！
