1.1 TypeScript 简介-CSDN博客

本文链接：https://blog.csdn.net/cnbj_zhjy_felix/article/details/148128554

什么是 TypeScript？

TypeScript 是 JavaScript 的语法超集，添加了可选的静态类型系统，让开发者能够更轻松地编写和维护大型应用程序。

在开发阶段发现错误，而不是在运行时，提高了代码的可靠性。
通过类型注解和接口增强代码的可读性和可维护性。
完全兼容 JavaScript，可以无缝集成到已有项目中。
特别适合需要严格类型检查和更好工具支持的大型应用程序开发。

TypeScript 本质上是什么？

TypeScript 本质上就是带有额外特性的 JavaScript，最显著的特性是支持类型注解。JavaScript 是动态类型语言，类型是在运行时确定的；而 TypeScript 允许开发者在编译阶段定义类型，这有助于在开发早期捕获错误，使代码更易理解和维护。

TypeScript 的主要特性

1. 可选的静态类型检查

TypeScript 允许为变量、函数参数和返回值定义和检查类型。虽然这需要一些额外的编码工作，但能显著提高代码质量。静态类型检查有助于避免 Bug，并增强代码的可读性。

2. 基于类的对象

与 JavaScript 的原型式继承不同，TypeScript 支持真正的面向对象编程（OOP）。你可以使用类、构造函数、继承以及访问修饰符（public、private、protected）来构建结构清晰的对象模型。

3. 模块化

TypeScript 倡导模块化开发。通过使用模块，可以将代码拆分为更小、更可复用的单元，有助于代码维护和团队协作。

4. 支持 ES6 特性

TypeScript 拥抱 ECMAScript 6（ES6）的新特性。如果你熟悉箭头函数、模板字符串、解构赋值等 ES6 语法，那么学习 TypeScript 会非常自然。

5. 语法糖（Syntactic Sugar）

TypeScript 的语法更接近高级语言（如 Java），让开发者可以以更简洁、优雅的方式编写代码。

TypeScript 的结构与编译

浏览器无法直接解释 TypeScript 代码，因此需要将其编译为普通的 JavaScript。这个过程通过 TypeScript 编译器（tsc）来完成。

TypeScript 编译器（tsc）

使用 TypeScript 编写。
将 .ts 文件编译为 .js 文件。
通过 NPM（Node.js 包管理器）安装。
支持 ES6 语法。

TypeScript 与 JavaScript 对比

特性	TypeScript	JavaScript
类型系统	静态类型	动态类型
面向对象	基于类	基于原型
模块支持	支持模块	原生不支持模块
错误检测	编译时错误	运行时错误
编译需求	需要编译	可直接解释执行
代码可维护性	更强	难以维护大型项目
工具支持	高级（自动补全、重构）	基础支持
使用场景	大型复杂项目	中小型项目、快速原型

为什么 TypeScript 越来越受欢迎？

更高的代码质量：类型系统和接口让代码更健壮、可维护。
更好的开发体验：工具支持更强，如智能补全、实时报错。
主流框架采纳：例如 Angular 就全面使用 TypeScript。
活跃的社区支持：Google、Airbnb、Shopify、Asana、Adobe、Mozilla 等公司广泛采用。

我们为什么要使用 TypeScript？

✅ 更好的开发体验

TypeScript 最大的优势之一就是让 IDE 提供更丰富的开发环境，如代码自动补全、类型检查、语法提示等。对于大型项目，使用 TypeScript 可提高整体代码质量和稳定性。

✅ 更高的代码质量

通过在开发初期定义好数据结构、使用类型和接口，可以强制开发者思考系统的设计，从而做出更好的架构决策。

✅ 减少 Bug

虽然 TypeScript 不能完全避免所有错误，但它可以提前捕获许多类型相关的问题。同时支持 Source Map，让浏览器和 IDE 都能更方便地调试源码。

✅ 活跃的社区

TypeScript 正在迅速流行，已经被众多顶级公司广泛使用，在大型项目的可扩展性方面表现出色。

TypeScript 其实就是 JavaScript

TypeScript 从 JavaScript 起步，最终也会被编译为 JavaScript。它并不是另一种语言，而是在 JavaScript 基础上的扩展。这意味着你可以在任何可以运行 JavaScript 的地方运行 TypeScript 编译后的代码。

如何使用 TypeScript？

最常见的方式是使用官方提供的 TypeScript 编译器（tsc），将 TypeScript 转译为 JavaScript。大多数主流编辑器（如 Visual Studio Code）都内建 TypeScript 支持，可以在编码过程中实时提示错误并提供建议。

如何在 HTML 中使用 TypeScript？

步骤 1：创建 TypeScript 文件（types.ts）

let myString;
myString = 'Hello from ts';
console.log(myString);

myString 被声明为一个字符串变量。
被赋值为 'Hello from ts'。
最后输出到控制台。

步骤 2：编译 TypeScript 到 JavaScript

打开终端并运行：

tsc types.ts

该命令会生成一个名为 types.js 的 JavaScript 文件，内容是编译后的代码。

步骤 3：创建 HTML 文件（index.html）

<html lang="en">
  <head>
  </head>
  <body>
    <h2>欢迎来到 GeeksforGeeks</h2>
    <p>编辑器中加载了默认代码。</p>
    <script src="types.js"></script>
  </body>
</html>