TypeScript 入门教程：从零开始掌握现代 JavaScr

什么是 TypeScript？

简单来说，TypeScript 是 JavaScript 的一个超集。它在 JavaScript 的基础上添加了静态类型等特性，让你的代码在运行前就能发现潜在的错误，就像给 JavaScript 穿上了一件“盔甲”，让它更加安全可靠。

你可以把 TypeScript 理解为：

• JavaScript + 类型系统
• 更强大的 JavaScript

为什么要用 TypeScript？

你可能会问，JavaScript 不是挺好的吗？为什么要用 TypeScript？ 别急，我们来对比一下：

总结一下，TypeScript 的优势在于：

• 提前发现错误： 编译时就能发现类型错误，减少运行时 bug。
• 代码可读性更高： 明确的类型让代码更容易理解和维护。
• 更强大的 IDE 支持： 智能提示、自动补全等功能，提高开发效率。
• 更适合大型项目： 类型系统让大型项目更易于管理和维护。

如何开始使用 TypeScript？

1. 安装 TypeScript：

   首先，你需要安装 Node.js 和 npm (或 yarn)。然后，在终端中运行以下命令全局安装 TypeScript：

   npm install -g typescript
   

   或者在你的项目中局部安装：

   npm install typescript --save-dev
   

2. 创建 TypeScript 文件：

   创建一个以 .ts 为后缀的文件，例如 hello.ts。

3. 编写 TypeScript 代码：

   在 hello.ts 中输入以下代码：

   //表示 `name` 参数的类型是字符串,函数返回类型为字符串
   function greet(name: string): string {
     return "Hello, " + name;
   }
   
   // 变量类型为字符串
   let user: string = "TypeScript";
   console.log(greet(user));
   

4. 编译 TypeScript 代码：

   在终端中，使用 tsc 命令编译 hello.ts 文件：

   tsc hello.ts
   

   这会生成一个 hello.js 文件，其中包含编译后的 JavaScript 代码。

5. 运行 JavaScript 代码：

   使用 Node.js 运行 hello.js 文件：

   node hello.js
   

   你会在控制台看到输出：Hello, TypeScript

TypeScript 的基本类型

TypeScript 提供了多种基本类型，包括：

• string： 字符串类型，例如 "hello"、'world'。
• number： 数字类型，例如 10、3.14。
• boolean： 布尔类型，例如 true、false。
• null： 空值。
• undefined： 未定义的值。
• any： 任意类型，不建议使用，会失去类型检查的优势。
• void： 表示函数没有返回值。
• array： 数组类型，例如 string[]、number[]。
• tuple： 元组类型，可以存储不同类型的元素，例如 [string, number]。
• enum： 枚举类型，用于定义一组命名的常量。
• object： 对象类型。

示例：

let message: string = "Hello";
let count: number = 10;
let isDone: boolean = true;
let fruits: string[] = ["apple", "banana", "orange"];
let person: [string, number] = ["Alice", 30];
enum Color { Red, Green, Blue };
let myColor: Color = Color.Green;
let obj: object = { name: "Bob", age: 25 };

TypeScript 的函数

TypeScript 可以为函数定义参数类型和返回值类型，让函数更加健壮。

示例：

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

TypeScript 的接口

接口（Interface）用于定义对象的结构，可以约束对象的属性和方法。

示例：

interface Person {
  name: string;
  age: number;
  greet(): void;
}

let user: Person = {
  name: "Charlie",
  age: 28,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

user.greet();