Tailwind CSSTailwind CSS
Home
  • Tailwind CSS 书籍目录
  • Vue 3 开发实战指南
  • React 和 Next.js 学习
  • TypeScript
  • React开发框架书籍大纲
  • Shadcn学习大纲
  • Swift 编程语言:从入门到进阶
  • SwiftUI 学习指南
  • 函数式编程大纲
  • Swift 异步编程语言
  • Swift 协议化编程
  • SwiftUI MVVM 开发模式
  • SwiftUI 图表开发书籍
  • SwiftData
  • ArkTS编程语言:从入门到精通
  • 仓颉编程语言:从入门到精通
  • 鸿蒙手机客户端开发实战
  • WPF书籍
  • C#开发书籍
learn
  • Java编程语言
  • Kotlin 编程入门与实战
  • /python/outline.html
  • AI Agent
  • MCP (Model Context Protocol) 应用指南
  • 深度学习
  • 深度学习
  • 强化学习: 理论与实践
  • 扩散模型书籍
  • Agentic AI for Everyone
langchain
Home
  • Tailwind CSS 书籍目录
  • Vue 3 开发实战指南
  • React 和 Next.js 学习
  • TypeScript
  • React开发框架书籍大纲
  • Shadcn学习大纲
  • Swift 编程语言:从入门到进阶
  • SwiftUI 学习指南
  • 函数式编程大纲
  • Swift 异步编程语言
  • Swift 协议化编程
  • SwiftUI MVVM 开发模式
  • SwiftUI 图表开发书籍
  • SwiftData
  • ArkTS编程语言:从入门到精通
  • 仓颉编程语言:从入门到精通
  • 鸿蒙手机客户端开发实战
  • WPF书籍
  • C#开发书籍
learn
  • Java编程语言
  • Kotlin 编程入门与实战
  • /python/outline.html
  • AI Agent
  • MCP (Model Context Protocol) 应用指南
  • 深度学习
  • 深度学习
  • 强化学习: 理论与实践
  • 扩散模型书籍
  • Agentic AI for Everyone
langchain
  • 第5章:类与面向对象编程

第5章:类与面向对象编程

类的基本语法

TypeScript 提供了完整的面向对象编程(OOP)支持,其中 class 是最核心的语法之一。通过类可以封装数据和行为,实现代码的复用和组织。

1. 类的定义

使用 class 关键字定义一个类,类名通常采用帕斯卡命名法(首字母大写):

class Person {
  // 类成员(属性和方法)定义在这里
}

2. 类的成员

属性

类的属性用于描述对象的状态:

class Person {
  name: string;  // 类型注解
  age: number = 0; // 带默认值
}

方法

类的方法是对象的行为:

class Person {
  greet(): string {
    return "Hello!";
  }
}

3. 实例化

通过 new 关键字创建类的实例:

const person = new Person();
person.name = "Alice";
console.log(person.greet()); // 输出: "Hello!"

4. 构造函数

constructor 是类的特殊方法,用于初始化对象:

class Person {
  name: string;
  
  constructor(name: string) {
    this.name = name;
  }
}

const person = new Person("Bob"); // 通过构造函数初始化

5. 类成员的访问

默认情况下,所有成员都是 public(可自由访问):

class Person {
  public name: string; // 显式声明 public(可省略)
}

const p = new Person();
p.name = "Charlie"; // 直接访问

6. 完整示例

class Animal {
  name: string;
  
  constructor(name: string) {
    this.name = name;
  }
  
  move(distance: number = 0) {
    console.log(`${this.name} moved ${distance} meters`);
  }
}

const dog = new Animal("Rex");
dog.move(10); // 输出: "Rex moved 10 meters"

关键特性

  1. 类型检查:类属性需要类型注解
  2. 编译为ES5/ES6:TypeScript 类会被编译为 JavaScript 的构造函数
  3. 完整OOP支持:支持继承、多态等特性(后续章节介绍)

注意:TypeScript 的类编译后会移除所有类型信息,最终生成标准的 JavaScript 代码。

Last Updated:: 3/27/25, 10:50 AM