使用TypeScript开发React Native应用示例步骤

ASP站长网创建一个示例RN应用程序，从Expo的create-react-native-app（CRNA）开始，并将其配置为使用Typescript开发我们的RN代码。
 
1.使用CRNA创建React Native项目
$ yarn global add create-react-native-app
打开终端，并cd选择您的工作文件夹。运行以下命令以创建新的React Native项目：
 
create-react-native-app CRNAExpoTSExample
在此命令中，CRNA将为您构建一个非常基本但可立即运行的React Native应用程序。一旦应用程序创建，cd以创建应用程序的项目文件夹，并确保通过CRNA脚手架基本初始应用程序正在工作。
 
2.添加Typescript
安装依赖项
 
yarn add typescript tslint -D
yarn add @types/react @types/react-native @types/react-dom -D
我们还需要rimraf和concurrently清理ts-transpiled-to-js文件的输出文件夹并同时运行npm脚本
 
yarn add concurrently rimraf -D
配置
tsc --init
tsconfig.json
 
在代码编辑器中打开项目并更新tsconfig.json为以下内容：
 
{
    "compilerOptions": {
        "module":"es2015",
        "target": "es2015",
        "jsx": "react",
        "rootDir": "src",
        "outDir": "build",
        "allowSyntheticDefaultImports": true,
        "noImplicitAny": true,
        "sourceMap": true,
        "experimentalDecorators": true,
        "preserveConstEnums": true,
        "allowJs": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noImplicitReturns": true,
        "skipLibCheck": true,
        "moduleResolution":"Node"
    },
    "filesGlob": [
        "typings/index.d.ts",
        "src/**/*.ts",
        "src/**/*.tsx",
        "node_modules/typescript/lib/lib.es6.d.ts"
    ],
    "types": [
      "react",
      "react-dom",
      "react-native"
    ],
    "exclude":[
        "build",
        "node_modules",
        "jest.config.js",
        "App.js"
        
    ],
    "compileOnSave": false
}
我们想将所有的Typescript应用程序代码文件存储在该src文件夹下的文件夹/子文件夹中。使用“rootDir”: “src ，Typescript编译器将查找文件夹及其子文件夹中的所有  文件.ts或  .tsx文件src。
 
“outDir”: “build”表示Typescript将在build文件夹下输出已转换的Javascript文件。
 
添加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,
        "always",
        "ignore-interfaces"
      ],
      "variable-name": [
        true,
        "allow-leading-underscore",
        "ban-keywords"
      ],
      "whitespace": [
        true,
        "check-branch",
        "check-decl",
        "check-operator",
        "check-separator",
        "check-type"
      ]
    }
}