TypeScript入门之环境搭建

1,039 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第14天,点击查看活动详情

简介

本文从三个方面讲述,首先说明了什么是TypeScript?然后介绍了使用TypeScript之后的优势,最后讲解了TypeScript的环境的搭建。

什么是TypeScript

TypeScript是一门由微软推出的开源的、跨平台的编程语言。它是JavaScript的超集,扩展了 JavaScript 的语法,最终会被编译为JavaScript代码。

简单直白来说TSJS之间的关系其实就是Less/SassCSS之间的关系。

用一张图概括就是

image.png

使用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文件。

我们先在里面配置rootDiroutDir

{
  "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入门之环境搭建

TypeScript入门之数据类型

TypeScript入门之函数

TypeScript入门之接口

TypeScript入门之类

TypeScript入门之类型推断、类型断言、双重断言、非空断言、确定赋值断言、类型守卫、类型别名

TypeScript入门之泛型

TypeScript入门之装饰器

TypeScript入门之模块与命名空间

TypeScript入门之申明文件

TypeScript入门之常用内置工具类型

TypeScript入门之配置文件

后记

感谢小伙伴们的耐心观看,本文为笔者个人学习笔记,如有谬误,还请告知,万分感谢!如果本文对你有所帮助,还请点个关注点个赞~,您的支持是笔者不断更新的动力!