TypeScript-1-介绍

雨橄

已于 2022-11-23 11:20:59 修改

阅读量2.3k

点赞数 5

分类专栏：前端文章标签： typescript javascript 前端

于 2022-09-07 23:37:21 首次发布

本文链接：https://blog.youkuaiyun.com/xiao_yu_gan/article/details/126756069

版权

14 篇文章

订阅专栏

TypeScript是微软开发的开源编程语言（简称：TS），是 JavaScript 的超集（JS 有的 TS 都有）。

TS官网：https://www.tslang.cn。

TypeScript = Type + JavaScript（在 JS 基础之上，为 JS 添加了类型支持，可以看作是对ES规范的拓展）。

在这里插入图片描述

JS存在的缺陷

众所周知，js是一门动态弱类型解释型脚本语言，动态带来了很多的便利，我们可以在代码运行中随意的修改变量类型以达到预期目的。

但是针对一个大型项目，面对无比复杂的逻辑和庞大代码量，很难通过代码看出某个变量是什么类型，这个变量要做什么，很可能一不小心就会操作出问题。

而且，js是解释性脚本语言，编写代码时变量类型操作异常无法感知，需要等到代码真正运行的时候才能发现错误（晚）。

TS类型支持

// TS代码，有明确的类型，此处为number类型
let age: number = 18;
// JS代码，无明确变量类型（弱类型）
let age = 18;

TS代码编译的时候，会进行类型检查，代码运行前就可以发现错误（早）。

配合VSCode等开发工具，TS可以提前到在编写代码的同时就发现代码中的错误，减少找 Bug、改 Bug 时间。

Vue3源码使用TS重写、Angular默认支持TS、React与TS完美配合，TS已成为大中型前端项目的首先编程语言。

为什么要安装TS编译工具包

虽然TS对ES规范进行了拓展，但是nodejs、各大浏览器都只认识ES规范，所以需要将TS代码编译转换成符合ES规范的JS代码，然后才能正常运行。

TS编译工具包的作用就是将TS代码编译转换为JS代码。

在这里插入图片描述

TS编译工具包的运行依赖nodejs，需提前安装nodejs。

安装命令：npm i -g typescript。

验证是否安装成功命令：tsc -v（查看TS版本信息）。

编译TS代码，转换为JS代码

如下ts代码文件：hello.ts

let age: number = 18;
console.log(age);

在ts代码文件路径终端，执行tsc hello.ts命令，会在当前路径生成一个同名JS文件（hello.js），内容如下：

var age = 18;
console.log(age);

此时生成的JS代码，nodejs、浏览器就能正常运行了。

nodejs运行TS代码工具包

如上面的操作，每次TS代码发生变化，都需要执行tsc命令进行编译，然后再交给nodejs执行，过程繁琐。

在nodejs中安装ts-node工具包，nodejs即可直接运行TS代码。

安装命令：npm i -g ts-node。

验证是否安装成功命令：ts-node -v（查看ts-node版本信息）。

nodejs运行TS代码命令：ts-node ts文件，例如：ts-node hello.ts。

原理：ts-node工具包在内部将TS => JS，然后nodejs再运行JS代码。

注意：初次运行ts-node命令可能会因ts-node版本因素报错：

error TS2584: Cannot find name 'console'. Do you need to change your target library? Try changing the 'lib' compiler option to include 'dom'.

全局安装 ts-node 运行依赖包 tslib 和 @types/node即可。

安装命令：npm i -g tslib @types/node。