WebStrom + TypeScript + MobX 构建项目

新建项目·react-native init xxx 项⽬

npm install -g typescript 集成typescript

npm install -g typings

typings install dt~react-native --globals —save

设置.babelrc

{
  "presets": ["react-native"],
  "plugins": ["transform-decorators-legacy"]
}

新建 jsconfig.json

{
  "compilerOptions": {
  "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "emitDecoratorMetadata": true
  }, 
  "exclude": [
    "node_modules"
  ]
}

新建 tsconfig.json

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
    "module": "commonjs",
    "lib": [
      "ES5",
      "ES2015",
      "DOM",
      "ScriptHost"],
    "jsx": "react",                           /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
    "noEmit": true,                           /* Do not emit outputs. */
    "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    "baseUrl": "./",                          /* Base directory to resolve non-absolute module names. */
    "allowSyntheticDefaultImports": true,     /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
    "esModuleInterop": true ,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    "emitDecoratorMetadata": true ,       /* Enables experimental support for emitting type metadata for decorators. */
    "noImplicitAny": true,
    "experimentalDecorators": true
  },
  "exclude": [
    "node_modules",
  ]
}

设置package.json

{
  "name": "项目名字",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "han": "0.0.7",
    "mobx": "4.3.0",
    "mobx-react": "5.1.2",
    "prop-types": "15.6.1",
    "react": "16.4.0",
    "react-native": "0.54.3",
    "react-navigation": "^1.0.0-beta.13",
    "reflect-metadata": "0.1.12",
    "typedjson-npm": "^0.1.7"
  },
  "devDependencies": {
    "@types/jest": "22.2.3",
    "@types/react": "16.3.14",
    "@types/react-native": "0.52.25",
    "@types/react-test-renderer": "16.0.1",
    "babel-jest": "22.4.3",
    "babel-plugin-transform-decorators-legacy": "1.3.4",
    "babel-preset-react-native": "4.0.0",
    "jest": "22.4.3",
    "react-addons-test-utils": "15.6.2",
    "react-native-mock": "0.3.1",
    "react-native-typescript-transformer": "1.2.7",
    "react-test-renderer": "16.4.0",
    "ts-jest": "22.4.6",
    "typescript": "2.8.1"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js"
    ],
    "transform": {
      "^.+\\.(js)$": "/node_modules/babel-jest",
      "\\.(ts|tsx)$": "/node_modules/ts-jest/preprocessor.js"
    },
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
    "testPathIgnorePatterns": [
      "\\.snap$",
      "/node_modules/",
      "/lib/"
    ],
    "cacheDirectory": ".jest/cache"
  }
}

新建 rn-cli.config.js

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

执行

npm install typedjson-npm
typings install npm:typedjson-npm

npm I

TS效果、MobX装饰器效果

image.png

MobX装饰器效果

image.png

❗️ js引入ts报错 home.js homeRequest.ts

image.png

关闭服务，重新运行