TypeScript入门之环境搭建

简介: 本文从三个方面讲述,首先说明了什么是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入门之配置文件

后记

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

相关文章
|
6月前
|
JavaScript 前端开发
【TypeScript入门】TypeScript入门篇——数据类型
我们人类可以很容易的分清数字与字符的区别,但是计算机并不能呀,计算机虽然很强大,但从某种角度上看又很傻,除非你明确的告诉它,1是数字,“汉”是文字,否则它是分不清1和‘汉’的区别的,因此,在每个编程语言里都会有一个叫数据类型的东东,其实就是对常用的各种数据类型进行了明确的划分,你想让计算机进行数值运算,你就传数字给它,你想让他处理文字,就传字符串类型给他。
64 3
|
6月前
|
JavaScript 前端开发 编译器
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
124 0
|
6月前
|
编解码 JavaScript 前端开发
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
312 0
|
1月前
|
JavaScript 前端开发 编译器
【小白入门】 浏览器如何识别Typescript?
【10月更文挑战第1天】浏览器如何识别Typescript?
|
6月前
|
JavaScript
TypeScript【类的继承、访问修饰符、readonly 修饰符、存取器、实例方法与静态方法、实例属性与静态属性、静态属性、抽象类】(三)-全面详解(学习总结---从入门到深化)
TypeScript【类的继承、访问修饰符、readonly 修饰符、存取器、实例方法与静态方法、实例属性与静态属性、静态属性、抽象类】(三)-全面详解(学习总结---从入门到深化)
62 0
|
2月前
|
JavaScript 前端开发 编译器
TypeScript,从0到入门带你进入类型的世界
该文章提供了TypeScript的入门指南,从安装配置到基础语法,再到高级特性如泛型、接口等的使用,帮助初学者快速掌握TypeScript的基本用法。
|
5月前
|
JavaScript 前端开发 程序员
typescript入门笔记分享
typescript入门笔记分享
29 0
|
5月前
|
JavaScript
TypeScript环境搭建
TypeScript环境搭建
|
6月前
|
JavaScript 前端开发
TypeScript极速入门笔记1
TypeScript极速入门笔记1
72 4
|
6月前
|
JavaScript
vite+typescript从入门到实战(三)
vite+typescript从入门到实战
94 0