在 React Native 中配置 Type Script(一

前言：
js是弱类型的语言, 没有类型校验.以下是我用js开发的时候遇到的比较痛苦的场景：
编译时看上去一切很完美,运行时可能会有莫名其妙的bug, 最后排查半天可能发现一个单词拼错了.
所以为了避免这种浪费时间的情况发生,我还是决定使用ts来做rn的开发

一、准备工作

#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

二、创建React Native项目

#init react native project & start up
react-native init RNDemo
cd RNDemo
npm start

分别启动iOS和Android模拟器，如下图：

Screen Shot 2018-03-27 at 3.47.27 PM.png

到这一步，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，并将以下内容复制到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，并将以下内容复制到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 是否已经能正常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

在模拟器中查看效果：

Screen Shot 2018-03-27 at 5.16.23 PM.png

尝试修改helloWorld function 的return value，然后使用cmd+R | double R 刷新模拟器查看效果