我要评论9012年都过半了，还不会用ts你就out了
why ?
- 三大框架angular2以后的版本完全是用ts开发的，
- vue对ts的支持也越来越好，
react也有tsx组件
还在犹豫什么
本文不涉及框架内容，因为框架的cli已经帮你搭好了ts环境。。。
本文只教你如何在一个demo里搭建ts环境，好了，我们开始吧
第一步，安装
全局安装typescript
npm install typescript -g
安装好以后，在你的项目里就可以使用tsc 命令了
tsc [ts文件名]
使用上面的命令就可以把某个ts文件编译成js文件
tsc
这是编译所有ts文件
第二步， 配置文件
恭喜你，走完第一步你已经成功一大半了！
新建一个json类型的配置文件， 文件名是tsconfig.json。
{
"compileroptions": { // 编译选项
"target": "es2016", // 配置编译目标代码的版本标准
"module": "commonjs", // 配置编译目标使用的模块化标准
"lib": ["es2016"]
}
}
最简单的配置是这样,后面可以根据需求加上你需要的配置。
:::tip
注意！！！加入配置文件后，使用tsc 命令编译某个ts文件时不需要带上.ts文件后缀, 否则会忽略配置文件
:::
插播一条重要内容
我们的ts项目如果使用了第三方库，比如lodash,mock，jquery什么的,这些第三方库并不是用ts写的，
它们是用js写的，没有ts的类型检查， 怎么办？
有办法，官方有一个@types的类型库，它包含了很多对js代码的类型描述
比如你想用jquery, 你就可以安装@types/jquery。
ts和js分开
开发过程中我们肯定希望源代码和编译后的代码分开，加入以下两个配置选项
include : 需要编译的文件目录
outdir: 编译后的文件目录
{
"compileroptions": { // 编译选项
"target": "es2016", // 配置编译目标代码的版本标准
"module": "commonjs", // 配置编译目标使用的模块化标准
"lib": ["es2016","dom"], // 配置环境
"outdir": "./dist"
},
"include": ["./src"]
}
第三步 简化开发流程
如果你只是想用ts写个hello world， 你已经可以做到了
假设你有个hello.ts文件，文件内容是console.log('hello world');
命令行依次执行：
tsc node ./dist/hello.js
命令行就可以打印出 hello world
截至第二步， 每次修改文件你都要执行两步：
- 编译文件 tsc
执行文件 node ./dist/文件名
我们可以使用第三方库来简化这个流程ts-node
安装 npm install ts-node -d
命令行执行
ts-node /src/hello.ts
它可以在内存中直接编译ts并执行编译后的文件（不会生成dist目录）
这样还不够好，虽然它可以帮我们编译并执行，但是它不能检测代码的变化
nodemon
安装 npm install nodemon -d
命令行执行
nodemon --exec --watch src -e ts ts-node /src/hello.ts
--watch src表示只监控src文件夹下的文件
-e ts表示只监控ts文件的改变
这样你随便改hello.ts的内容它都会自动编译并运行。
最后把这条命令写在package.json的script里，完美收官！
结语
至此相信你对ts已经不那么陌生了，下篇和大家一起结合react和ts开发个小demo,
帮你熟悉项目实战。
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论