前置條件:npm install -g typescript和npm install -g tslint
步驟一:
分別運行下面幾個命令:
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撵摆,如果沒有就新建一個底靠,添加以下代碼
module.exports = { getTransformModulePath() { return require.resolve("react-native-typescript-transformer"); }, getSourceExts() { return ["ts", "tsx"]; } };
步驟四:
運行以下命令:
yarn add --dev @types/jest @types/react-test-renderer
步驟五:(第三方包的使用,例如redux)
運行以下命令:
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等文件時也同樣需要去編寫聲明文件。
例如:declare module "*.json"
declare module "*.png"
創(chuàng)建xx.d.ts聲明文件說明可參考以下文章:http://www.reibang.com/p/22051d562eaf
http://daief.coding.me/2018-09-04/declaration-files-of-typescript.html