前置條件：npm install -g typescript和npm install -g tslint

步驟一：

分別運(yùn)行下面幾個(gè)命令：

yarn add --dev typescript yarn add --dev react-native-typescript-transformer yarn tsc --init --pretty --jsx react-native touch rn-cli.config.js yarn add --dev @types/react @types/react-native

步驟二：

打開tsconfig.json

{ ... // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ ... }

步驟三：

打開rn-cli.config.js，如果沒有就新建一個(gè)，添加以下代碼

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

步驟四：

運(yùn)行以下命令：

yarn add --dev @types/jest @types/react-test-renderer

步驟五：（第三方包的使用,例如redux）

運(yùn)行以下命令：

npm install -S redux react-redux @types/react-redux或

yarn add -S redux react-redux @types/react-redux

步驟七：（創(chuàng)建tslint配置文件）

通過tslint --init

創(chuàng)建tslint.json文件,之后自己配置規(guī)則

步驟八：

修改tsconfig.json文件

添加"include": ["src/**/*"], // 只檢查src

步驟九：

.ts，.tsx文件引用.js文件/模塊

需要在創(chuàng)建xx.d.ts聲明文件

例如：export declare const TextColor:any;

不止是在 TypeScript 中導(dǎo)入未聲明 JavaScript，導(dǎo)入.png、.json等文件時(shí)也同樣需要去編寫聲明文件。

例如：declare module "*.json" 

declare module "*.png"

image.png

創(chuàng)建xx.d.ts聲明文件說明可參考以下文章：http://www.itdecent.cn/p/22051d562eaf

http://daief.coding.me/2018-09-04/declaration-files-of-typescript.html