从JavaScript到TypeScript：初学者指南

你好啊，未来的编程巨星！我很高兴能成为你从JavaScript到TypeScript这段激动人心旅程的向导。作为一个教授计算机科学多年的老师，我见证了无数学生完成这个转变，我会尽力让你这个过程变得尽可能顺利。所以，拿起你最喜欢的饮料，舒服地坐下来，让我们一起开始吧！

From JavaScript To TypeScript

TypeScript是什么？

在我们开始迁移之旅之前，让我们先了解一下TypeScript是什么，以及为什么它越来越受欢迎。

TypeScript就像是JavaScript更有组织、更自律的表亲。它是JavaScript的超集，这意味着所有有效的JavaScript代码也都是有效的TypeScript代码。然而，TypeScript增加了可选的静态类型和其他特性，使得编写大型应用程序更加容易，也更不容易出错。

想象你正在建造一座房子。JavaScript就像是使用乐高积木建造——灵活且有趣，但有时东西并不完全匹配。TypeScript就像是带有详细说明书的乐高积木——你知道每个部分应该放在哪里，减少了出错的可能性。

为什么从JavaScript迁移到TypeScript？

你可能会想，“JavaScript不是很好用吗，为什么要麻烦用TypeScript？”这是个好问题！以下是一些原因：

改进代码质量：TypeScript的静态类型有助于在开发过程的早期捕获错误。
更好的工具支持：IDE可以为TypeScript提供更好的自动完成和重构工具。
增强的可读性：类型注解使代码更具自文档性，更容易理解。
更容易维护：随着项目的增长，TypeScript的特性有助于管理复杂性。

现在我们知道TypeScript有多棒了，让我们开始我们的迁移之旅吧！

从JavaScript迁移到TypeScript的步骤

1. 安装TypeScript

首先，我们需要安装TypeScript。打开你的终端并运行：

npm install -g typescript

这个命令会在你的机器上全局安装TypeScript。现在你可以使用tsc命令来编译TypeScript代码。

2. 将.js文件重命名为.ts

下一步是将你的JavaScript文件从.js重命名为.ts。例如，app.js变成app.ts。别担心，你的代码仍然可以工作！

3. 创建tsconfig.json文件

现在，让我们为TypeScript创建一个配置文件。在你的项目根目录下，创建一个名为tsconfig.json的文件，并添加以下内容：

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"esModuleInterop": true
}
}

这个配置告诉TypeScript如何编译你的代码。就像给厨师提供如何准备你餐点的指示！

4. 开始添加类型注解

现在到了有趣的部分——给你的JavaScript代码添加类型！让我们看一些例子：

示例1：变量

// JavaScript
let name = "Alice";
let age = 30;

// TypeScript
let name: string = "Alice";
let age: number = 30;

在这个例子中，我们告诉TypeScript，name应该始终是字符串类型，age应该始终是数字类型。如果我们稍后尝试将一个数字赋值给name，TypeScript会警告我们。就像有一个友好的朋友在你肩膀上看着你说，“你确定你想这么做吗？”

示例2：函数

// JavaScript
function greet(name) {
return "Hello, " + name + "!";
}

// TypeScript
function greet(name: string): string {
return `Hello, ${name}!`;
}

在这里，我们指定greet函数接受一个string参数并返回一个string。这有助于防止像意外传递一个数字给greet这样的错误。

示例3：对象

// JavaScript
let person = {
name: "Bob",
age: 25
};

// TypeScript
interface Person {
name: string;
age: number;
}

let person: Person = {
name: "Bob",
age: 25
};

在这个例子中，我们定义了一个Person接口来描述我们的对象结构。这有助于确保person始终具有正确的属性和类型。

5. 处理任何类型

在你迁移的过程中，你可能会遇到TypeScript无法推断类型的地方。在这些情况下，你会看到any类型。虽然到处使用any很诱人，但尽可能避免它。相反，定义适当的类型或接口。

6. 使用TypeScript特有的特性

TypeScript提供了一些JavaScript中没有的酷炫特性。让我们看两个：

枚举（Enums）

enum Color {
Red,
Green,
Blue
}

let favoriteColor: Color = Color.Blue;

枚举允许我们定义一组命名的常量。就像创建了一个选项菜单供我们选择。

联合类型（Union Types）

function printId(id: number | string) {
console.log("Your ID is: " + id);
}

printId(101);  // 可以
printId("202");  // 也可以
printId(true);  // 错误！

联合类型允许一个值是几个类型中的一个。就像说，“这个可以是数字或字符串，但不能是其他！”

7. 逐渐增加严格性

TypeScript在tsconfig.json中有几个严格性标志可以启用。从不太严格设置开始，随着你对TypeScript越来越熟悉，逐渐增加它们。

标志	描述
`noImplicitAny`	在表达式和声明中隐含的 'any' 类型上抛出错误
`strictNullChecks`	启用严格的null检查
`strictFunctionTypes`	启用函数类型的严格检查
`strictBindCallApply`	启用对函数的 'bind'、'call' 和 'apply' 方法的严格检查
`strictPropertyInitialization`	启用类中属性初始化的严格检查
`noImplicitThis`	在 'this' 表达式隐含的 'any' 类型上抛出错误
`alwaysStrict`	以严格模式解析并针对每个源文件发出 "use strict"

8. 重构和优化

在你迁移的过程中，你可能会发现重构和改进代码的机会。TypeScript的静态类型可以帮助你捕获错误并使代码更健壮。

结论

恭喜你！你已经迈出了从JavaScript迁移到TypeScript的第一步。记住，这是一个旅程，而不是比赛。慢慢来，多尝试，不要害怕犯错误——这是我们学习的方式！

TypeScript一开始可能看起来有点吓人，但相信我，一旦你掌握了它，你会想知道没有它你以前是怎么过的。就像从骑自行车升级到摩托车——学习曲线有点陡，但获得的力量和速度是惊人的。

继续练习，保持好奇心，最重要的是，享受乐趣！在你意识到之前，你将像专业人士一样编写TypeScript。快乐编程！

Credits: Image by storyset

上一教程:

TypeScript - tsconfig.json