0Pricing
TypeScript Academy · 课时

TypeScript 为 JavaScript 带来了什么

了解 TypeScript 如何通过静态类型扩展 JavaScript。

TypeScript 为 JavaScript 带来了什么 是 CoddyKit 上的免费 TypeScript Academy 课时。 这是第 2 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 TypeScript Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 4 节课。

欢迎

TypeScript 是 JavaScript 的超集,增加了静态类型注解。本课将准确介绍 TypeScript 在普通 JavaScript 之上提供了哪些功能。

TypeScript 是超集

每个有效的 JavaScript 文件也是有效的 TypeScript 文件。您可以将 JavaScript 文件重命名为 TypeScript 文件,然后进行编译。TypeScript 只是在 JavaScript 之上增加功能,从不会移除 JavaScript 语法。

类型注解

最明显的新增功能是类型注解。您可以在变量、参数或返回值名称后加上冒号来声明其类型。
let name: string = 'Alice';
let age: number = 30;
let active: boolean = true;

编译时类型检查

TypeScript 会在代码运行前检查类型。如果您赋予了错误的类型,编译器会报告错误,而不是等到运行时才崩溃。
let count: number = 5;
count = 'hello'; // Error: Type 'string' is not assignable to type 'number'

接口与类型别名

TypeScript 增加了接口和类型别名,用于描述对象结构。它们只存在于编译时,不会产生任何 JavaScript 输出。
interface User {
  name: string;
  age: number;
}

const alice: User = { name: 'Alice', age: 30 };

枚举

枚举允许您定义一组命名常量。与接口不同,枚举确实会生成 JavaScript 代码。
enum Direction { Up, Down, Left, Right }
const move: Direction = Direction.Up;

泛型

泛型允许您编写适用于任意类型且仍然保证类型安全的代码。它是 TypeScript 中实现可复用工具的重要功能。
function identity<T>(value: T): T {
  return value;
}
const n = identity<number>(42);

类上的访问修饰符

TypeScript 为类增加了公共、私有和受保护修饰符。JavaScript 使用 # 语法表示私有成员,而 TypeScript 的修饰符会在编译时进行检查。
class BankAccount {
  private balance: number = 0;
  deposit(amount: number) { this.balance += amount; }
}

非空类型

启用 strictNullChecks 后,null 和 undefined 不会自动赋值给所有类型。您必须使用联合类型显式允许它们。
let name: string = null; // Error with strictNullChecks
let maybeName: string | null = null; // OK

TypeScript 会在运行时擦除类型

所有 TypeScript 类型注解都会在编译期间被移除。输出结果是普通 JavaScript,运行时不存在类型信息。

更好的集成开发环境工具

有了类型信息,集成开发环境就能在整个项目中提供准确的自动补全、行内文档、安全重命名和查找所有引用功能。

快速检查

编译代码时,TypeScript 类型注解会发生什么变化?

回顾

TypeScript 通过类型注解、接口、枚举、泛型和访问修饰符扩展了 JavaScript。所有类型信息都会在编译时被擦除,最终得到更安全、更适合开发工具使用的 JavaScript。

常见问题解答

「TypeScript 为 JavaScript 带来了什么」课时是免费的吗?

是的 — 「TypeScript 为 JavaScript 带来了什么」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 TypeScript Academy 课程的其余内容,请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。

「TypeScript 为 JavaScript 带来了什么」这节课中我会学到什么?

了解 TypeScript 如何通过静态类型扩展 JavaScript。 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗?

无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 2 节课,共 4 节。

「TypeScript 为 JavaScript 带来了什么」课时需要多长时间?

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。

我能在这节 TypeScript Academy 课中编写并运行代码吗?

能。每节 TypeScript Academy 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. JavaScript 的痛点:运行时错误
  2. TypeScript 为 JavaScript 带来了什么
  3. 将 TypeScript 编译为 JavaScript
  4. 何时在项目中使用 TypeScript
← 返回 TypeScript Academy