TypeScript学习-第1章：入门

各位前端工友们，是不是总遇到这样的糟心时刻：写JS代码时行云流水，一运行就报"undefined is not a function"；改了个变量名，全局搜了八遍还是漏改一处，上线后直接翻车；对接后端接口，对着文档猜字段类型，少个属性排查两小时？

如果你被这些问题反复拿捏，那今天的主角------TypeScript（以下简称TS），就是来救你于水火的"代码安全卫士"。这一章咱们不搞晦涩术语堆砌，用唠嗑的方式搞懂TS到底是个啥、为啥要学，以及怎么快速搭好环境跑起第一个程序。

一、TS与JS：不是替代，是"升级加强包"

很多新手一听到TS就犯怵："我JS还没学明白，又来个TS，是不是要从头再来？" 大错特错！TS和JS的关系，就像普通奶茶和加了珍珠、奶盖、双份糖的升级款奶茶------基础还是奶茶（JS），只是多了一堆让体验更好的"配料"（类型系统等特性）。

官方定义TS是JS的"超集"，翻译成人话就是：所有JS代码都能直接在TS环境里跑，TS只是在JS的基础上增加了额外的规则和功能。就像你穿惯了休闲装，现在加了件防弹背心（类型校验），行动不受限，但安全性直接拉满。

这里要澄清两个关键认知，避免踩坑：

静态类型 vs 动态类型：JS是动态类型语言，变量类型只有运行时才知道，比如你给一个数字变量赋值字符串，JS不会拦着你，直到运行报错才告诉你"错了"；而TS是静态类型语言，写代码时就要给变量"贴标签"（声明类型），写错类型编辑器直接标红警告，相当于"写作业时老师当场纠错"，不用等到交卷（运行）才翻车。
编译型 vs 解释型：JS是解释型语言，浏览器或Node.js能直接解析运行；TS不能直接运行，需要先通过编译器（tsc）编译成JS代码，再交给环境执行。这个过程就像你给外国人讲方言，得先翻译成普通话（JS），对方才能听懂。

二、TS的核心优势：不止是"多了层校验"

如果说JS是"自由散漫的野马"，TS就是"套了缰绳但不束缚奔跑的良驹"，核心优势全在"既自由又安全"上：

类型校验：提前排雷，告别"运行时惊喜"：这是TS最核心的能力。比如你定义一个数字类型的变量，不小心赋值成字符串，VS Code直接红波浪线警告，还会告诉你"预期是number，实际是string"。以前要等运行才发现的低级错误，现在写代码时就被扼杀在摇篮里，尤其适合大型项目------想象一下几百行代码里找一个类型错误，和编辑器直接定位，效率天差地别。
代码提示：堪比"开了外挂的导航"：写JS时，变量的属性、方法全靠记忆或查文档，忘了就只能猜；TS因为知道变量的类型，会自动提示所有可用的属性和方法，甚至会告诉你参数格式。比如你定义一个数组类型，输入"数组.xxx"，编辑器直接列出push、pop、map等方法，还标注参数和返回值，新手不用死记API，老手也能少写错别字。
重构友好：大胆改，不慌神：做项目迭代时，改变量名、改函数参数是常事。JS里改完一个地方，得全局搜索所有用到的地方，稍有遗漏就会报错；TS里只要改了类型声明，所有引用该变量/函数的地方都会自动校验，漏改的地方直接标红，重构时再也不用"提心吊胆"，改完心里有底。
完美兼容JS：零成本过渡：不用担心旧项目没法迁移，也不用怕学了TS就丢了JS。你可以在TS文件里直接写JS代码，也可以逐步把JS文件改成TS文件，混合开发完全没问题。对于新手来说，哪怕先写JS逻辑，再慢慢补类型标注，也是一种稳妥的学习方式。

三、环境搭建：三步搞定，新手也不翻车

TS的环境搭建比想象中简单，核心就三件套：Node.js、TS编译器（tsc）、开发工具（VS Code）。咱们一步步来，避开常见坑：

1. 安装Node.js和npm/yarn

TS编译器依赖Node.js环境，所以先装Node.js（自带npm包管理工具）。直接去Node.js官网下载，选LTS版本（长期支持版，更稳定），安装时一路下一步就行（记得勾选"Add to PATH"，自动配置环境变量）。

安装完成后，打开终端（Windows用命令提示符或PowerShell，Mac用终端），输入以下命令验证：

bash 复制代码

node -v  # 显示Node.js版本，比如v18.17.0
npm -v   # 显示npm版本，比如9.6.7

如果能正常显示版本号，说明安装成功。要是提示"不是内部或外部命令"，大概率是没配置环境变量，重启终端再试，还不行就重新安装Node.js，记得勾选PATH选项。

yarn是可选的包管理工具，比npm快一点，想装的话输入npm install -g yarn即可。

2. 安装TS编译器（tsc）

终端输入全局安装命令，一键搞定：

bash 复制代码

npm install -g typescript  # npm安装
# 或者
yarn global add typescript  # yarn安装

安装完成后，输入tsc -v验证，显示版本号（比如Version 5.2.2）就说明成功了。

四、第一个TS程序：从"写代码"到"跑起来"

环境搭好了，咱们来写第一个TS程序，体验一下"编写→编译→运行"的完整流程。建议新手跟着动手敲，别光看！

1. 编写TS代码

新建一个文件夹（比如叫ts-study），打开VS Code，用"文件→打开文件夹"打开这个文件夹。然后新建一个文件，命名为hello.ts（TS文件后缀是.ts），写入以下代码：

typescript 复制代码

// 定义一个字符串类型的变量
const message: string = "Hello TypeScript！我是第一个TS程序～";
// 定义一个函数，参数是字符串类型，无返回值
function printMessage(msg: string): void {
  console.log(msg);
}
// 调用函数
printMessage(message);

这里我们给变量message标了string类型，给函数参数msg也标了string类型，函数返回值标了void（表示无返回值），这就是TS的类型标注核心语法。

2. 编译TS为JS

TS代码不能直接运行，需要编译成JS。打开VS Code的终端（菜单栏→终端→新建终端），输入以下命令：

bash 复制代码

tsc hello.ts

执行完后，你会发现文件夹里多了一个hello.js文件，这就是编译后的JS代码，内容如下（可以打开看看，TS的类型标注会被移除，变成纯JS）：

javascript 复制代码

// 编译后的JS代码，类型标注已被移除
var message = "Hello TypeScript！我是第一个TS程序～";
function printMessage(msg) {
  console.log(msg);
}
printMessage(message);

3. 运行JS代码

用Node.js运行编译后的JS文件，终端输入：

bash 复制代码

node hello.js

此时终端会输出：Hello TypeScript！我是第一个TS程序～，恭喜你！成功跑通了第一个TS程序～

五、开发工具配置：VS Code高效技巧

手动输入tsc hello.ts编译太麻烦，VS Code有很多技巧能让开发更高效，咱们配置两个核心功能：

1. 安装TS相关插件

打开VS Code的插件市场（左侧边栏最后一个图标），搜索并安装以下插件：

TypeScript and JavaScript Language Features：VS Code自带，一般不用额外装，提供TS语法高亮、代码提示、类型校验。
ESLint：代码检查工具，配合TS能进一步规范代码格式，提前发现问题。
Prettier：代码格式化工具，自动排版代码，让格式更统一。

2. 自动编译配置（告别手动敲命令）

每次改完TS代码都要手动编译，效率太低，我们可以配置自动编译：

终端输入tsc --init，生成TS的配置文件tsconfig.json（这个文件是TS项目的核心配置，后续会详细讲，现在先改两个关键配置）。
打开tsconfig.json，找到以下两个配置项，修改为对应值：
"outDir": "./dist", // 编译后的JS文件输出到dist文件夹 "rootDir": "./src", // TS源码文件放在src文件夹
新建src文件夹，把hello.ts移进去；手动新建dist文件夹（编译后JS会自动生成到这里）。
终端输入tsc --watch（开启监听模式），此时TS会监听src文件夹里的TS文件，只要文件有修改并保存，就会自动编译成JS并输出到dist文件夹，再也不用手动敲编译命令了！

六、本章小结：入门不难，核心在"理解"

这一章咱们搞定了TS的入门三件事：知道了TS是JS的超集，核心优势是静态类型校验；搭好了开发环境，跑通了第一个TS程序；配置了VS Code高效开发技巧。

其实TS入门并不难，难的是养成"写代码先想类型"的习惯------以前写JS是"先写再试"，现在写TS是"先定义再写"，这种思维转变需要慢慢适应。但相信我，当你习惯了TS的代码提示和类型校验，再回头写JS会觉得"没安全感"。

下一章咱们就深入TS的基础类型，解锁更多类型标注的玩法，一起把"类型"这个工具用熟～有任何问题欢迎在评论区留言，咱们一起踩坑一起进步！