一.环境搭建。
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
