TypeScript是什么?

TypeScript是JavaScript的超集,就像给JS添加了强大的辅助工具。它由微软开发,在JS的基础上添加了静态类型系统

大白话解释: 你可以把TypeScript看作是加了”类型检查”的JavaScript。写代码时告诉变量是什么类型,这样就能在运行前发现错误。

为什么需要TypeScript?

JavaScript是动态类型语言,变量类型可以随时改变:

// JavaScript示例:运行时才报错
let age = 25;
age = “二十五”; // 这在JS是允许的,但会导致后续问题
console.log(age.toFixed(2)); // 运行时错误!

TypeScript会在代码运行前就发现这类问题:

// TypeScript示例:写代码时就报错
let age: number = 25;
age = “二十五”; // 这里就会报错:不能把字符串赋给数字类型

基本类型

TypeScript提供了比JavaScript更丰富的类型系统:

// 基本类型示例
let name: string = “小明”; // 字符串
let age: number = 20; // 数字
let isStudent: boolean = true; // 布尔值
let hobbies: string[] = [“篮球”, “读书”]; // 字符串数组
let anything: any = “可以是任意类型”; // 任意类型(慎用)
anything = 123; // 不会报错
let unknownValue: unknown; // 未知类型(比any更安全)

类型推断: TypeScript很聪明,如果你不指定类型,它会自己推断:

let username = “小红”; // TS自动推断为string类型
username = 123; // 错误!不能将数字赋给字符串

函数

TypeScript让函数更安全,可以定义参数类型和返回值类型:

// 定义参数类型和返回值类型
function add(a: number, b: number): number {
  return a + b;
}

// 调用函数
add(5, 3); // 正确
add(5, “3”); // 错误!第二个参数应该是数字

可选参数和默认值

// 可选参数使用问号(?)
function greet(name: string, greeting?: string): string {
  return `${greeting || “你好”}, ${name}!`;
}

// 使用默认值
function multiply(a: number, b: number = 1): number {
  return a * b;
}

接口(Interface)

接口用来定义对象的形状 – 即对象应该有哪些属性,各是什么类型:

// 定义一个用户接口
interface User {
  name: string;
  age: number;
  email?: string; // 可选属性
  readonly id: number; // 只读属性
}

// 使用接口
let user1: User = {
  name: “张三”,
  age: 30,
  id: 12345
};

user1.age = 31; // 正确
user1.id = 54321; // 错误!id是只读的

接口 vs 类型别名: 接口和类型别名(type)很相似,但接口更适合定义对象结构,且可以被扩展(extends)。

类(Class)

TypeScript中的类支持面向对象编程特性:

class Animal {
  // 属性(需要声明类型)
  name: string;
  private age: number; // 私有属性

  // 构造函数
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  // 方法
  speak(): void {
    console.log(`我是${this.name}`);
  }

  // 获取私有属性
  getAge(): number {
    return this.age;
  }
}

// 创建实例
let dog = new Animal(“旺财”, 3);
dog.speak(); // 输出: 我是旺财
console.log(dog.name); // 正确
console.log(dog.age); // 错误!age是私有属性

泛型(Generics)

泛型让代码可重用性更高,可以创建适用于多种类型的组件:

// 一个简单的泛型函数
function identity<T>(arg: T): T {
  return arg;
}

// 使用
let output1 = identity<string>(“hello”); // 类型为string
let output2 = identity<number>(100); // 类型为number

// 泛型接口
interface KeyValuePair<K, V> {
  key: K;
  value: V;
}

// 使用
let pair1: KeyValuePair<number, string> = { key: 1, value: “苹果” };
let pair2: KeyValuePair<string, boolean> = { key: “isAvailable”, value: true };

泛型的好处: 提高代码复用性,同时保持类型安全。在数组操作、API响应处理等场景非常有用。