知识点:
很多人已经在用 TypeScript 做开发了,这种方式确实有很大的优势,在开发和测试阶段给前端提供了非常大的助力,如果你还没有使用过,不妨试一试。
在项目跟目录下运行 npm install -g typescript 即可安装好 TypeScript,输入 tsc -v 看一下是否已安装好。
在 TS 中可以很方便的使用一些 ES 6 中存在的特性,比如继承、箭头函数、class 类等,在这个的基础上,TS 还可以输入参数的类型、接口、枚举等高级特性,往常这些特性都是存在于强类型语言中的,这里使用这些特性增强了 JS 的开发效率,减少了很多不必要的错误。
在根目录下输入命令 tsc -init 初始化默认的 TS 配置文件。
在根目录下添加一个 demo.ts 文件,简单的使用一些 TS 特性的语法。
class Base {
//变量a,类型string
a: string = "test_a";
}
class Demo extends Base {
b: string = "test_b";
//方法c,参数类型string,返回string
c(d: string): string {
return this.a;
}
static e() {
return "aaa";
}
}
let demo = new Demo();
console.log(demo.c("t"))
console.log(Demo.e())
执行 tsc demo.ts 命令,在文件的同一目录下回生成 demo.js 文件,这个就是 TS 转化之后的结果。可以打开看看,TS 已经把其特性都转化为了 JS 的形式,类型检测则在编译的时候去掉了。
执行 node demo.js,运行生成的代码,可以看到正确输出了我们想要输出的值。
test_a
aaa
要想在项目中使用 tsc 还需要修改配置文件,不然 tsc 命令会把所有 TS 文件都生成在源文件的同一目录下。
删掉旧的 tsconfig.json 文件,运行生成命令 tsc --init --pretty --sourceMap --target es2015 --outDir ./dist --module commonjs --jsx react 直接生成新的配置文件。
也可以自己修改文件的参数,具体的解释在配置中也有说明。
"target": "es6", //新语法
"module": "commonjs", //加载方式
"jsx": "react", //支持jsx
"sourceMap": true, //生成map文件
"outDir": "./dist", //生成文件的位置
"strict": true, //严格模式
"esModuleInterop": true //
不要忘了将要编译的源代码路径写到配置里,这样就不会编译其他地方的代码了。
"include": ["./src/"]
本地安装 jest 的 ts 支持。
npm install --save-dev ts-jest typescript
修改 packagejson 文件,给 jest 的配置加上 ts 的内容。
"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"
}
如果使用 VScode 的话还可以安装下面的几个包,让编辑器可以智能提示方法、参数等。
npm install --save-dev @types/jest @types/react @types/react-native @types/react-test-renderer @types/react-navigation
我们改造一下 src 下的 index.js,试一下 TS 的效果怎么样,在 src 下新建一个 index.tsx 文件,因为使用到了 jsx 的语法,所以这里必须使用 tsx 的后缀名。
'use strict';
import React from 'react';
import {
StyleSheet,
Image
} from 'react-native';
//添加路由组件
import Navigation from 'react-navigation';
//创建路由
const Pages = Navigation.StackNavigator({
}, {
// initialRouteName:'OrderDetail',
//这里做了一个页面跳转的动画
transitionConfig: () => ({
screenInterpolator: sceneProps => {
const { layout, position, scene } = sceneProps;
const { index } = scene;
const translateX = position.interpolate({
inputRange: [index - 1, index, index + 1],
outputRange: [layout.initWidth, 0, 0]
});
const opacity = position.interpolate({
inputRange: [index - 1, index - 0.99, index, index + 0.99, index + 1],
outputRange: [0, 1, 1, 0.3, 0]
});
return { opacity, transform: [{ translateX }] };
}
}),
navigationOptions: {
header: null
}
});
//创建一个自己的容器,方便以后对路由做一些处理
export default class extends React.Component {
constructor(props: any) {
super(props);
}
render() {
return
;
}
//监听路由的跳转
listenChange(state1: any, state2: any, action: any) {}
}
在根目录下执行命令 tsc,就可以在 dist 中发现生成的 index.js 文件,该文件就是我们最后要的结果了。
不要忘记修改根目录下的 index.js 文件,将引用的地址指向 dist 文件夹,不然启动模拟器之后是不会加载编译之后的代码的。
如果你使用的是 VScode 编辑器的话,编辑器自带了一个运行命令,可以很简单的执行 TS 命令。
单击菜单中的“运行/运行”命令,在弹出的命令中可以发现有两个专门为 TS 准备的命令。执行构建,即可编译一次项目的 ts 文件,执行监视即可监听所有文件改动。在 ts 文件被修改的时候会自动执行一次编译。
Parcel 是一个新的打包构建工具,安装和使用非常简单,中文文档。
执行命令 npm install -g parcel-bundler 全局安装打包工具。
由于我们之前已经安装好了 TypeScript 的所有东西,此时其实已经不需要在干额外的事情了,Parcel 本身是支持非常多的第三方处理包的。例如,Web 常用的 Less、图片压缩、HTML 压缩等,这里我们只用了 TS 的功能。
Webpack 已经有非常多的人在使用了,如果对这个东西非常熟悉,也可以使用 Webpack 处理 TS 到 JS 的转化。
安装依赖包:
npm install --save-dev babel babel-loader babel-polyfill babel-preset-env ts-loader typescript uglifyjs-webpack-plugin webpack webpack-dev-server webpack-merge
"target": "es2017",// 可以使用 Promise、async、await 等新语法
配置处理规则:
rules: [{
test: /\.ts(x?)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: babelOptions
},
{
loader: 'ts-loader'
}
]
}]},
到这里就可以正常使用 TS 了。
一般情况下,直接处理可以使用 ES 6 的语法开发 TS,如果还想要使用 ES 7 的语法就需要使用 babel 预先处理一次 TS 了。