快速上手 TS（环境篇）

前言

在前面两篇文章中，我分享了自己从 Vue 转 React 的心得，希望对大家有所帮助，今天再给大家分享一下如何搭建 TS 的学习环境。

为什么要学习TS

从铺天盖地的 TS 教程，到 Vue3 被 TS 重写，种种迹象就可以见得 TS 的地位越来越重，TS 给我们开发到底带来了什么？用JS就不行吗？

TS的静态类型系统允许我们在开发阶段就可以发现错误，通过显示类型注解和类型推断，让我们在团队开发中协作，TS引入面向对象编程特效，接口泛型让我们可以写更👍的代码。

TS 和 JS 的关系

一句话解释就是 TS 是 JS 的超集。

TS 与 C、Java 等众多后端语言类似，都需要先对代码进行编译才能运行。具体来说，TS 会将代码编译成浏览器或者 Node 能够读懂的 JS 代码。每次运行 TS 代码，首先需要通过 tsc 将其编译成 JS 文件，可能会生成不止一个 JS 文件。然后，我们就能够利用 TS 提供的高级特性来编写代码，同时确保最终生成的 JS 代码仍然能够成功运行。

环境搭建

安装TS

TS 支持全局安装和本地安装，全局顾名思义就是我们可以在任意控制台运行TS，适合个人开发配置。而本地安装则更适用于团队开发，确保项目中使用相同版本的TS。

全局安装

bash 复制代码

npm i typescript -g

安装完毕，现在控制台允许我们使用ts编译器，执行tsc命令，输入以下指令查看TS版本，如果可以看到，则说明安装成功

bash 复制代码

tsc -v

本地安装

bash 复制代码

npm i --save-dev typescript

然后我们可以使用npx来运行TS编译器

bash 复制代码

npx tsc -v

同样，如果可以看到ts版本，则说明安装成功

初始化

在运行TS代码之前，我们需要对目录进行初始化，执行以下命令会生成一个tsconfig.json配置文件

bash 复制代码

tsc --init

配置文件说明

tsconfig.json顾名思义允许我们对TS进行配置，其中一些重要的配置项

一个典型的tsconfig.json文件结构如下：

json 复制代码

{
  "compilerOptions": {
    // 编译选项
  },
  "include": [
    // 包含的文件或目录
  ],
  "exclude": [
    // 排除的文件或目录
  ],
  "files": [
    // 需要编译的特定文件
  ]
}

compilerOptions可以配置TS编译器行为，常用配置项包括以下几个：

json 复制代码

"target": "es2016", //指定编译后代码的ES版本
"module": "commonjs", //指定生成的模块系统
"strict": true, //开启严格模式
"outDir": "./", //指定编译后的文件输出的目录
"jsx": "react", //指定JSX代码的编译方式
"allowJs": true  //允许编译JS文件

其实这些在tsconfig.json文件都有注解，这里就不过多赘述

运行代码

首先我们在目录下创建一个.ts文件，在里面书写我们需要运行的代码。

🙋‍♀️🌰创建一个ts文件，内容如下：

ts 复制代码

//1.ts
let nickname:string = "阳阳羊";
console.log(nickname);

接着我们在控制台输入tsc命令，目录会生成一个对应的JS文件

tsc将ts文件编译成了js文件

js 复制代码

//1.js
"use strict";
let nickname = "阳阳羊";
console.log(nickname);

但是每当我们修改TS代码又需要重新执行一次tsc，很麻烦，TS 提供了一个指令tsc --watch（简写tsc -w）执行这段命令后，编译器会持续监听文件内容的变化，然后更新编译后的JS文件，就不用每次手动编译。

拿到编译好的JS文件，我们执行 node 命令运行这个编译后的文件即可。

三方运行工具

如果你觉得以上运行方式太复杂了，你可以安装第三方工具，这里我介绍两种，如果有好用的，欢迎大家在评论区分享！

ts-node

在控制台输入以下命令

bash 复制代码

npm i ts-node -g

安装完毕后，在控制台输入命令ts-node加文件名即可

bash 复制代码

ts-node 1.ts

Code Runner

还有一个是VScode中的一个插件

安装完这个插件我们直接在文件右上角点击运行即可

这样我们可以在输出窗口看到代码运行结果

总结

以上就是《快速上手 TS（环境篇）》的全部内容了，如果你也对 TS 感兴趣，可以关注加三连，后期我会继续更新 TS 的相关知识。

最后

码字不易，感谢三连！

已将学习代码上传至 github，欢迎大家学习指正！

技术小白记录学习过程，有错误或不解的地方还请评论区留言，如果这篇文章对你有所帮助请 "点赞收藏+关注" ，感谢支持！！