前言
之前一直被灌输TS大法好，可以通过TS规避项目的很多基本错误。例如：
TypeScript的优势
-
规避静态类型出错
TS通过静态类型检查，能把错误从运行时提前至编译时，避免了一些基本bug。
大数据证明了这一点，随着TypeScript的普及，undefined is not a function的关键字搜索大大减少
-
应对接口改变 快速准确
假如后端改变了一些接口字段，可以通过直接改变编译出错的地方，快速替换。而不需要一个一个字段地寻找。
在知乎上看到一段话，引用一下：
公司现在的前端项目大概有十几万行代码，各种从后端拿到的数据类型有上百种以前后端接口一改，要改字段，瞬间懵逼。全局搜索，一个个改，各种牵扯到的东西改下来再测试一顿估计小半天没了。用了 TypeScript 之后，把数据对应的 interface 改掉，然后重新编译一次，把编译失败的地方全部改掉就好了。而且在优秀的 TypeScript 架构中，业务开发基本不需要写类型，所有外部输入的类型都可以自动拿到，只需要把一些 local variable 和 output 的类型定义一下就好了，基本跟手写 ES 6 没有区别。写代码的过程中各种错误在越早期修改的成本就越低。试想没有静态检查跑一遍代码进某个奇怪的 case 才能复现的错误在写代码时期就直接给你的个错误提示，将是多么省时省力省钱。
开始
初始化项目
react-native init TypeScriptLearn
引入TypeScript
在RN的packager未独立之前，我们采用的是启用两个进程，一个进程将typescript编译为javascript，另一个为RN默认 的packager。但在RN的packager独立并改名为metro后，多了很多配置的可能性。因此我们也能更高效的在React Native工程中使用TypeScript了
安装TypeScript相关依赖:
yarn add tslib @types/react @types/react-native
yarn add --dev react-native-typescript-transformer typescript
我们借助这个react-native-typescript-transformer库进行转换
配置tsconfig.json
可使用tsc进行初始化，但务必设置"jsx":"react"。
{
"compilerOptions": {
"importHelpers": true,
"target": "es2015",
"jsx": "react",
"noEmit": true,
"moduleResolution": "node",
},
"exclude": [
"node_modules",
],
}
配置rn-li.config.js
module.exports = {
getTransformModulePath() {
return require.resolve('react-native-typescript-transformer');
},
getSourceExts() {
return ['ts', 'tsx'];
}
}
引入react navigation
yarn add react-navigation
修改App.js为App.tsx
最后修改你的源代码
入口index.js的文件名请不要改变。你可以把App.js 改为 App.tsx在这里开始编写入口代码。你也可以新建src文件夹，在其中建立index.tsx。然后在index.tsx里重新编写你的入口代码。注意引用react的写法有所区别：
-import React, { Component } from 'react';
+import * as React from 'react'
+import { Component } from 'react';
接下来便可以在工程中自由的使用ts/tsx来编写TypeScript代码。
To be continued...
网友评论