什么是TypeScript
TypeScript
是一门由微软推出的开源的、跨平台的编程语言。它是JavaScript
的超集,扩展了 JavaScript
的语法,最终会被编译为JavaScript
代码。
简单直白来说TS
和JS
之间的关系其实就是Less/Sass
和CSS
之间的关系。
用一张图概括就是
使用TypeScript的优势
静态类型检查
在编译阶段
就发现大部分错误,避免了很多线上bug
,省时省力。
良好的代码提示
增强了编辑器和 IDE
的功能,包括代码补全
、接口提示
、跳转到定义
等。大大提升了我们的开发效率。
TypeScript环境搭建
我们可以使用typescript
来把ts
文件编译成js
文件然后运行。或者使用ts-node
来直接运行ts
文件。
使用typescript
首先来说说typescript
的方式。
全局安装
全局安装的优点是可以在电脑的任何目录使用tsc
命令。
npm install -g typescript
全局安装完后我们就可以使用tsc
命令将ts
文件编译成js
文件啦。
tsc index.ts
上面会把index.ts
文件编译成index.js
并放到当前目录下。
局部安装
不喜欢全局安装的也可以使用局部安装,局部安装就只能在当前目录下使用tsc
命令。
首先我们创建package.json
文件。
npm init -y
然后我们局部安装typescript
npm install typescript
然后我们生成typescript
的配置文件。
./node_modules/.bin/tsc --init
使用上面的命令后会在当前目录下生成tsconfig.json
文件。
我们先在里面配置rootDir
和outDir
。
{
"compilerOptions": {
"rootDir": "./dist", // 需要编译的ts文件目录
"outDir": "./src" // 编译后js存放的目录
}
}
然后我们在package.json
文件配置脚本。
"scripts": {
"build": "tsc",
"build:w": "tsc -w"
}
build
是全部编译,build:w
是实时编译,也就是我们ts
文件有改动就会自动编译,在学习阶段推荐使用这个命令。
这样我们在命令行执行npm run build:w
就能实时编译我们src目录下的ts
文件啦。
使用ts-node
如果觉得编译麻烦想直接运行ts
文件的话可以使用ts-node
。
全局安装
npm i -g ts-node
直接运行index.ts
文件
ts-node index.ts
局部安装
npm i ts-node
在当前目录下运行index.ts
文件
./node_modules/.bin/ts-node ts-node index.ts
使用babel
在babel7
之后我们还可以使用babel
来编译我们的ts
,这个后面笔者在讲webpack
的时候会细说,这里我们先简单了解一下即可。
好了今天先讲到这里,后面开始正式进入学习环节。
系列文章
TypeScript入门之类型推断、类型断言、双重断言、非空断言、确定赋值断言、类型守卫、类型别名
后记
感谢小伙伴们的耐心观看,本文为笔者个人学习笔记,如有谬误,还请告知,万分感谢!如果本文对你有所帮助,还请点个关注点个赞~,您的支持是笔者不断更新的动力!