react native 使用typescript

前言

TypeScript作為JavaScript的一個富類型擴展語言，深受代碼風格嚴謹的前端開發者歡迎。但在react-native下，因為packager的配置困難，使用TypeScript一直是個麻煩的選擇。

網上的大部分方案，甚至微軟的官方方案都是啟動兩個進程，一個進程將typescript編譯成javascript，另一個進程則是RN默認的packager。

實際上自從RN的packager獨立並改名為metro之后，也多了很多配置的可能性

。因此我們也能更高效的在React Native工程中使用TypeScript了。現在我們來嘗試進行這樣的配置。

正文

初始化RN工程

如果你已經有一個RN工程了，可以跳過這一步。

按照RN中文網的入門文檔安裝所需的軟件，然后初始化項目：

react-native init MyProject
cd MyProject

安裝TypeScript相關依賴

yarn add tslib @types/react @types/react-native
yarn add --dev react-native-typescript-transformer typescript

配置tsconfig.json

您可以從您之前的TS項目中復制這個文件，也可以使用tsc初始化（具體參考TypeScript的教程）。注意務必設置"jsx":"react"
注意多余的注釋可能會不兼容，需要移除。

{
  "compilerOptions": {
    "importHelpers": true,
    "target": "es2015",
    "jsx": "react",
    "noEmit": true,
    "moduleResolution": "node",
  },
  "exclude": [
    "node_modules",
  ],
}

在項目目錄中新建或編輯rn-cli.config.js，使用支持typescript的transfomer

module.exports = {
  getTransformModulePath() {
    return require.resolve('react-native-typescript-transformer');
  },
  getSourceExts() {
    return ['ts', 'tsx'];
  }
}

最后修改你的源代碼

入口index.js和App.js的文件名請不要改變，你可以新建src文件夾，在其中建立index.tsx，然后把App.js的內容改成 import './src';

然后在index.tsx里重新編寫你的入口代碼。注意引用react的寫法有所區別：

-import React, { Component } from 'react';
+import React from 'react'
+import { Component } from 'react';

自由的TS吧，少年

接下來你可以在工程中自由的使用ts/tsx來編寫TypeScript代碼啦。