前言:
js是弱類型的語言, 沒有類型校驗.以下是我用js開發(fā)的時候遇到的比較痛苦的場景:
編譯時看上去一切很完美,運行時可能會有莫名其妙的bug, 最后排查半天可能發(fā)現(xiàn)一個單詞拼錯了.
所以為了避免這種浪費時間的情況發(fā)生,我還是決定使用ts來做rn的開發(fā)
一睬愤、準備工作
#install brew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
#install node & watchman
brew install node
brew install watchman
#install react native cli
npm install -g yarn react-native-cli
二逼龟、創(chuàng)建React Native項目
#init react native project & start up
react-native init RNDemo
cd RNDemo
npm start
分別啟動iOS和Android模擬器府蛇,如下圖:
到這一步,basic 的react native project就弄好了
三戈盈、配置Type Script
#install type script
npm install typescript tslint rimraf concurrently --save-dev
npm install @types/react @types/react-native @types/jest --save-dev
新建tsconfig.json臣淤,并將以下內(nèi)容復(fù)制到tsconfig.json中
{
"compilerOptions": {
"target": "es2015",
"module": "es2015",
"moduleResolution": "node",
"jsx": "react",
"outDir": "build",
"rootDir": "src",
"allowSyntheticDefaultImports": true,
"noImplicitAny": false,
"preserveConstEnums": true,
"allowJs": false,
"sourceMap": true,
"noImplicitReturns": true,
"noUnusedParameters": true,
"noUnusedLocals": true
},
"filesGlob": [
"typings/index.d.ts",
"src/**/*.ts",
"src/**/*.tsx"
],
"types": [
"react",
"react-native",
"jest"
],
"exclude": [
"android",
"ios",
"build",
"node_modules"
],
"compileOnSave": false
}
四她紫、配置tslint
新建tslint.json嗅钻,并將以下內(nèi)容復(fù)制到tslint.json中
{
"rules": {
"member-access": false,
"member-ordering": [
true,
"public-before-private",
"static-before-instance",
"variables-before-functions"
],
"no-any": false,
"no-inferrable-types": [false],
"no-internal-module": true,
"no-var-requires": true,
"typedef": [false],
"typedef-whitespace": [
true, {
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
}, {
"call-signature": "space",
"index-signature": "space",
"parameter": "space",
"property-declaration": "space",
"variable-declaration": "space"
}
],
"ban": false,
"curly": false,
"forin": true,
"label-position": true,
"no-arg": true,
"no-bitwise": true,
"no-conditional-assignment": true,
"no-console": [
true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-construct": true,
"no-debugger": true,
"no-duplicate-variable": true,
"no-empty": true,
"no-eval": true,
"no-null-keyword": true,
"no-shadowed-variable": true,
"no-string-literal": true,
"no-switch-case-fall-through": true,
"no-unused-expression": true,
"no-use-before-declare": true,
"no-var-keyword": true,
"radix": true,
"switch-default": true,
"triple-equals": [
true,
"allow-undefined-check"
],
"eofline": false,
"indent": [
true,
"spaces"
],
"max-line-length": [
true,
150
],
"no-require-imports": false,
"no-trailing-whitespace": true,
"object-literal-sort-keys": false,
"trailing-comma": [
true, {
"multiline": "never",
"singleline": "never"
}
],
"align": [true],
"class-name": true,
"comment-format": [
true,
"check-space"
],
"interface-name": [false],
"jsdoc-format": true,
"no-consecutive-blank-lines": [true],
"no-parameter-properties": false,
"one-line": [
true,
"check-open-brace",
"check-catch",
"check-else",
"check-finally",
"check-whitespace"
],
"quotemark": [
true,
"single",
"avoid-escape"
],
"semicolon": [
true,
"never"
],
"variable-name": [
true,
"check-format",
"allow-leading-underscore",
"ban-keywords"
],
"whitespace": [
true,
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type"
]
}
}
// use tslint-config-prettier
// {
// "extends": ["tslint-react", "tslint-config-prettier"],
// "rules": {
// "max-line-length": [true, 120]
// },
// "linterOptions": {
// "exclude": ["config/**/*.js", "node_modules/**/*.ts"]
// }
// }
五、配置npm快捷腳本
在package.json中添加以下腳本
"scripts": {
"test": "jest",
"lint": "tslint src/**/*.ts",
"tsc": "tsc",
"clean": "rimraf ./build",
"build": "npm run clean && npm run tsc --",
"watch": "npm run build -- -w",
"start0": "node node_modules/react-native/local-cli/cli.js start",
"start": "npm run build && concurrently -r 'npm run watch' 'npm run start0'"
}
六鹊奖、驗證
接下來驗證type script 是否已經(jīng)能正常work
mkdir src
touch TestComp.ts
#TestComp.ts
export function helloWorld() {
return 'Hello World'
}
修改App.js
import { helloWorld } from './src/ts_components/TestComp'
...
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
{helloWorld()}
</Text>
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
<Text style={styles.instructions}>
{instructions}
</Text>
</View>
);
}
}
npm install
npm run start
在模擬器中查看效果:
嘗試修改helloWorld function 的return value苛聘,然后使用cmd+R | double R 刷新模擬器查看效果