TypeScript 入门篇 - Day01 - 初识 TypeScript：类型系统与编译运行

原创于 2025-09-30 16:07:53 发布 · 748 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #javascript #前端

程序员之TypeScript 专栏收录该内容

1 篇文章

订阅专栏

TypeScript 入门篇 - Day01 - 初识 TypeScript：类型系统与编译运行

1. 什么是 TypeScript

TypeScript（简称 TS）是 JavaScript 的超集（Superset），在语法层面完全兼容 JavaScript，同时引入了 静态类型系统 与 编译阶段检查。
它的目标是让 JavaScript 的开发更加安全、可维护和可扩展。

官方定义：

TypeScript = JavaScript + 类型系统 + 编译器。

2. TypeScript 的安装与运行

2.1 安装

首先需要安装 TypeScript 编译器：

npm install -g typescript

安装完成后，可以通过命令查看版本：

tsc -v

2.2 编写并编译

创建一个 hello.ts 文件：

function greet(name: string): string {
  return "Hello, " + name;
}

let user: string = "Tom";
console.log(greet(user));

编译为 JavaScript：

tsc hello.ts

会生成一个 hello.js 文件，可以直接在 Node.js 或浏览器中运行。

3. 类型系统的初体验

TypeScript 的核心价值在于 类型检查。
举个例子：

function add(a: number, b: number): number {
  return a + b;
}

console.log(add(10, 20));    // ✅ 正确
console.log(add("10", "20")); // ❌ 报错，类型不匹配

这里的 a: number 和 b: number 是 静态类型声明。编译器会在代码运行前发现错误，从而避免运行时异常。

4. TypeScript 与 JavaScript 的关系

兼容性：所有合法的 JS 代码，也都是合法的 TS 代码。
渐进增强：TS 允许开发者逐步增加类型声明，而不是一次性强制。
编译目标：TS 最终会被编译为纯 JS 文件，才能被浏览器或 Node.js 执行。

理解

一、理论理解

JavaScript 是一门 动态类型语言，灵活但存在隐患：

变量类型随时可变，容易产生运行时错误；
参数传错、属性拼写错误，往往只能在运行时报错；
项目规模增大后，代码难以维护。

TypeScript 的价值在于引入 静态类型系统，在 编译阶段 提前发现问题。

类型是代码的契约，限制了变量与函数的使用方式；
编译器在运行前就能发现潜在 bug，大大降低了生产事故概率；
IDE 可以通过类型信息提供自动补全、重构、跳转，提升开发体验。

一句话总结：TypeScript 用更多的“编译时约束”换取更高的“运行时安全”。

二、大厂实战理解

在大厂的实际业务场景中，TypeScript 已经成为 前端开发的标准配置：

阿里巴巴：在 Ant Design、Egg.js、Midway 等核心框架中全面引入 TS，统一类型定义，减少多人协作接口错误。
字节跳动：所有中大型 Web 项目都默认使用 TS，接口规范由类型文件定义，避免了文档与代码不一致的问题。
Google：Angular 框架完全基于 TS 构建，其成功证明了静态类型在大规模团队开发中的优势。
OpenAI / NVIDIA：在 SDK 和前端工具中逐步引入 TS，以保证复杂系统的稳定性和开发者体验。

大厂共识：小项目可以用 JS，大项目必须用 TS。

大厂面试题

问题 1：为什么大厂普遍推荐使用 TypeScript，而不是直接使用 JavaScript？

答案：
因为 TypeScript 引入了 静态类型系统 和 编译时检查，能够在运行前发现错误，提高代码安全性和可维护性。在大规模团队协作中，类型约束能减少接口误用和属性拼写错误，显著降低沟通成本和生产事故风险。

问题 2：TypeScript 与 JavaScript 的关系是什么？

答案：
TypeScript 是 JavaScript 的 超集（Superset），在语法层面完全兼容 JS，新增了类型系统和编译器工具。所有合法的 JS 代码在 TS 中都合法，但 TS 代码需要编译为 JS 才能被浏览器或 Node.js 执行。

问题 3：TypeScript 的编译流程是怎样的？

答案：

词法分析和语法分析：检查代码结构是否合法；
类型检查：根据声明和推断验证代码逻辑；
转换与输出：编译为标准 JavaScript 文件；
最终运行的始终是 JavaScript。

问题 4：能否说出 TypeScript 相较于 JavaScript 的三个核心优势？

答案：

安全性：在编译阶段捕获错误，减少运行时异常。
可维护性：类型系统让代码契约更清晰，便于多人协作和重构。
开发体验：IDE 可基于类型提供自动补全、智能提示和跳转，大幅提升效率。

大厂场景题

场景一：电商平台订单金额错误

某电商公司在大促活动中，后端返回的订单 JSON 字段本应为 price，但前端误写成了 prcie。

在 JavaScript 中，这种错误不会在编译时报错，直到上线后才发现大量订单金额展示为 undefined，造成严重事故。
如果使用 TypeScript，类型定义文件（Order { price: number }）会在编译阶段立即发现 prcie 不存在，从而阻止错误上线。