「React Native」TypeScript环境搭建

一.环境搭建。

1.从RN0.57版本开始已经可以直接支持typescript，无需任何配置。
2.RN版本<0.57版本配置
   2.1安装TypeScript相关依赖

yarn add tslib @types/react @types/react-native
yarn add --dev react-native-typescript-transformer typescript

   2.2配置tsconfig.json(新建tsconfig.json或者拷贝已有的ts库配置，
可以用该命令生成tsc --init --pretty --sourceMap --target es2015 --outDir ./lib --rootDir ./ --module commonjs --jsx react)

{
  "compilerOptions": {
    "importHelpers": true,
    "target": "es2015",
    "jsx": "react",
    "noEmit": true,
    "moduleResolution": "node",
  },
  "exclude": [
    "node_modules",
  ],
}

   2.3配置rn-cli.config.js（在项目目录中新建或编辑rn-cli.config.js），使用支持typescript的transfomer

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

二.使用场景。

    目前项目中pc端和app端复用一套生成的ts业务网络库，贴出实际代码，封装了一个获取token的工具类

import { AsyncStorage } from 'react-native';
class ApiTokenService {
    private static TokenKey: string = "Admin-Token";
    private static TokenValue: string = "";
    static setToken(token: string | undefined) {
        if (token == undefined) {
            token = "";
        }
        this.TokenValue = token
        AsyncStorage.setItem(this.TokenKey, token)
    }
    static getToken(): string | null  {
        return this.TokenValue || ''
    }

    static syncToken() {
        AsyncStorage.getItem(this.TokenKey).then(value => {
            this.TokenValue = value
        })
    }

    static removeToken() {
        this.TokenValue = ''
        return AsyncStorage.removeItem(this.TokenKey)
    }
}

export default ApiTokenService;

ts是强类型，并且支持泛型，对类型的约束做的更好，更适合于大型系统，减少代码的复杂性。编程中，代码的提示更友好。比如

z.png

三.####参考地址
http://www.typescriptlang.org/samples/index.html