持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第14天,点击查看活动详情
简介
本文从三个方面讲述,首先说明了什么是TypeScript?然后介绍了使用TypeScript之后的优势,最后讲解了TypeScript的环境的搭建。
什么是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入门之类型推断、类型断言、双重断言、非空断言、确定赋值断言、类型守卫、类型别名
后记
感谢小伙伴们的耐心观看,本文为笔者个人学习笔记,如有谬误,还请告知,万分感谢!如果本文对你有所帮助,还请点个关注点个赞~,您的支持是笔者不断更新的动力!