掌握 TypeScript 的基础语法

TypeScript 是 JavaScript 的超集，添加了静态类型系统和其他功能。它可以帮助开发人员在编写代码时发现潜在的错误，从而提高代码质量和可维护性。掌握 TypeScript 的基础语法，是进入现代 JavaScript 开发的重要一步。

1. TypeScript 与 JavaScript 的区别

TypeScript 和 JavaScript 的主要区别在于类型系统，TypeScript 在 JavaScript 的基础上增加了静态类型检查。通过类型注解，TypeScript 可以在编译时发现潜在的错误，避免许多运行时错误。

核心区别：

• 静态类型：TypeScript 引入了静态类型系统，可以在编写代码时指定变量的类型。
• 编译：TypeScript 代码需要编译成 JavaScript 才能执行，JavaScript 不需要编译。
• 类型推导：TypeScript 具备类型推导能力，能够根据变量的初始值推断出类型。

2. TypeScript 基础类型

TypeScript 提供了多种基本类型，用于为变量、函数等指定类型。

2.1 number 类型

number 类型用于表示数字类型，包括整数和浮点数。

let age: number = 25; // 声明一个数字类型的变量
let price: number = 99.99; // 声明一个浮动类型的数字

2.2 string 类型

string 类型用于表示字符串。

let name: string = "John"; // 声明一个字符串类型的变量
let greeting: string = `Hello, ${name}!`; // 使用模板字符串

2.3 boolean 类型

boolean 类型用于表示布尔值，只有两个可能的值：true 或 false。

let isActive: boolean = true; // 声明一个布尔类型的变量
let isCompleted: boolean = false;

2.4 array 类型

数组类型可以通过 [] 或 Array<类型> 来声明。

let numbers: number[] = [1, 2, 3, 4]; // 使用 [] 声明数字类型数组
let strings: Array<string> = ["apple", "banana", "cherry"]; // 使用 Array<类型> 声明数组

2.5 tuple 类型

tuple 类型允许声明固定长度的数组，并且每个位置的元素可以有不同的类型。

let person: [string, number] = ["John", 25]; // 声明一个元组类型

2.6 enum 类型

enum 类型用于表示一组命名的常数。

enum Color {
  Red = "red",
  Green = "green",
  Blue = "blue",
}

let color: Color = Color.Green; // 使用枚举

3. TypeScript 函数类型

在 TypeScript 中，我们可以给函数添加类型注解，明确输入和输出类型。

3.1 基本函数类型

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

let result = greet("John"); // 调用函数并获取返回值

3.2 可选参数

TypeScript 支持可选参数，通过 ? 来标记。

function greet(name: string, age?: number): string {
  if (age) {
    return `Hello, ${name}, age ${age}`;
  }
  return `Hello, ${name}`;
}

console.log(greet("John")); // 输出：Hello, John
console.log(greet("John", 25)); // 输出：Hello, John, age 25

3.3 默认参数

函数参数可以指定默认值。

function greet(name: string, age: number = 18): string {
  return `Hello, ${name}, age ${age}`;
}

console.log(greet("John")); // 输出：Hello, John, age 18

4. 类型注解与类型推导

4.1 类型注解

在声明变量时，我们可以通过 : 来指定变量的类型。

let message: string = "Hello, TypeScript!"; // 显式指定变量类型

4.2 类型推导

TypeScript 能够根据变量的初始值自动推导出变量的类型。

let message = "Hello, TypeScript!"; // TypeScript 自动推导类型为 string

4.3 联合类型

TypeScript 允许变量有多种类型，称为联合类型。

let value: string | number = "Hello";
value = 42; // 可以赋予数字类型

5. 对象类型与接口

在 TypeScript 中，可以使用 interface 或 type 来定义对象的类型。

5.1 对象类型

let person: { name: string; age: number } = {
  name: "John",
  age: 25,
};

5.2 接口

interface 用于定义对象的结构。

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

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

5.3 可选属性与只读属性

接口中可以指定可选属性和只读属性。

interface Person {
  name: string;
  age: number;
  address?: string; // 可选属性
  readonly id: number; // 只读属性
}

let person: Person = { name: "John", age: 25, id: 1234 };
person.id = 5678; // 编译错误：id 是只读属性

6. 类型别名与联合类型

type 可以创建类型别名，并支持联合类型、交叉类型等高级特性。

6.1 类型别名

type Point = { x: number; y: number };

let point: Point = { x: 10, y: 20 }; // 使用类型别名

6.2 联合类型

type StringOrNumber = string | number; // 联合类型
let value: StringOrNumber = "Hello";
value = 42; // 可以是字符串或数字

7. 泛型（Generics）

泛型是 TypeScript 的强大特性之一，它可以在保持类型安全的前提下，使函数和类能适应不同类型的数据。

7.1 泛型函数

function identity<T>(arg: T): T {
  return arg;
}

let result = identity<string>("Hello"); // 指定泛型类型为 string

7.2 泛型接口

interface GenericIdentity<T> {
  value: T;
}

let identityObj: GenericIdentity<number> = { value: 42 };

8. 总结

TypeScript 为 JavaScript 提供了类型系统，并通过类型注解、接口、泛型等特性，提高了代码的可维护性和可读性。掌握 TypeScript 的基础语法，可以帮助开发人员在项目中更好地管理类型和提高开发效率。

1. 基础类型：number、string、boolean、array、tuple、enum。
2. 函数类型：明确指定函数的输入和输出类型。
3. 类型推导与注解：通过类型注解和类型推导使代码更严谨。
4. 接口与类型别名：使用 interface 和 type 定义对象类型。
5. 泛型：使用泛型创建通用函数和组件，增加代码复用性。

掌握这些基础知识是继续深入 TypeScript 的重要基础。