TypeScript基础(四)扩展类型 - 类

简介: TypeScript是一种静态类型的编程语言,它是JavaScript的超集,可以编译成纯JavaScript代码。TypeScript引入了类的概念,使得开发者可以使用面向对象的方式来编写代码。本文将介绍TypeScript的类、继承、访问修饰符和访问器的用法。

引言

TypeScript是一种静态类型的编程语言,它是JavaScript的超集,可以编译成纯JavaScript代码。TypeScript引入了类的概念,使得开发者可以使用面向对象的方式来编写代码。本文将介绍TypeScript的类、继承、访问修饰符和访问器的用法。

类是一种模板或蓝图,用于创建具有相同属性和方法的对象。在TypeScript中,可以使用关键字class来定义一个类。类可以包含属性(成员变量)和方法(成员函数)。

下面是一个简单的示例,展示了如何定义一个名为Person的类,并在其中定义了一个属性name和一个方法sayHello()

classPerson {
name: string;
constructor(name: string) {
this.name=name;
  }
sayHello() {
console.log(`Hello, my name is ${this.name}.`);
  }
}
constperson=newPerson("Alice");
person.sayHello(); // 输出:Hello, my name is Alice.

在上面的例子中,我们首先使用关键字class定义了一个名为Person的类。然后,在类中定义了一个属性name和一个方法sayHello()。属性和方法都可以通过访问修饰符(如public, private, protected)来控制其可见性。

构造函数是一种特殊类型的方法,在创建对象时被调用。在上面的例子中,我们使用关键字constructor定义了一个构造函数,并在其中接收一个参数并将其赋值给属性name

继承

继承是一种面向对象编程的重要概念,它允许一个类继承另一个类的属性和方法。在TypeScript中,可以使用关键字extends来实现继承。

下面是一个示例,展示了如何定义一个名为Student的子类,并继承自父类Person

classStudentextendsPerson {
grade: number;
constructor(name: string, grade: number) {
super(name);
this.grade=grade;
  }
study() {
console.log(`${this.name}is studying in grade ${this.grade}.`);
  }
}
conststudent=newStudent("Bob", 5);
student.sayHello(); // 输出:Hello, my name is Bob.student.study(); // 输出:Bob is studying in grade 5.

在上面的例子中,我们使用关键字extends将子类Student与父类Person进行了继承。子类可以访问父类中的属性和方法,并且还可以添加自己的属性和方法。

在子类的构造函数中,我们使用关键字super()调用父类的构造函数,并传递相应的参数。这样可以确保父类中定义的属性得到正确地初始化。

访问修饰符

在TypeScript中,类的访问修饰符用于控制类的属性和方法的可访问性。TypeScript提供了三种访问修饰符:publicprivateprotected

  1. public: 默认的访问修饰符,表示属性或方法可以在类的内部和外部被访问。
classPerson {
publicname: string;
constructor(name: string) {
this.name=name;
  }
}
constperson=newPerson("John");
console.log(person.name); // 输出:John
  1. private: 表示属性或方法只能在类的内部被访问,外部无法访问。
classPerson {
privatename: string;
constructor(name: string) {
this.name=name;
  }
getName() {
returnthis.name;
  }
}
constperson=newPerson("John");
console.log(person.getName()); // 输出:Johnconsole.log(person.name); // 错误:属性“name”为私有属性,只能在类“Person”中访问。
  1. protected: 表示属性或方法可以在类的内部和子类中被访问,外部无法访问。
classPerson {
protectedage: number;
constructor(age: number) {
this.age=age;
  }
getAge() {
returnthis.age;
  }
}
classEmployeeextendsPerson {
privatesalary: number;
constructor(age: number, salary: number) {
super(age);
this.salary=salary;
  }
getSalary() {
returnthis.salary;
  }
}
constemployee=newEmployee(25, 5000);
console.log(employee.getAge()); // 输出:25console.log(employee.getSalary()); // 输出:5000console.log(employee.age); // 错误:属性“age”受保护,只能在类“Person”及其子类中访问。

在上面的示例中,我们定义了一个名为Person的基类,并使用不同的访问修饰符来限制属性和方法的可访问性。然后我们定义了一个名为Employee的子类,并继承了基类。子类可以访问基类中被标记为protected或者public的属性和方法。

通过使用不同的访问修饰符,我们可以控制属性和方法的可见性,从而提高代码的安全性和可维护性。

访问器

TypeScript中的访问器(Accessors)是一种特殊的方法,用于控制对类的属性的访问。访问器由getset关键字定义,分别用于获取和设置属性的值。通过使用访问器,可以在属性被读取或写入时执行特定的逻辑。

下面是一个示例,展示了如何使用访问器来控制对类的属性的访问:

classPerson {
private_name: string='A'getname(): string {
returnthis._name;
  }
setname(value: string) {
if (value.length<3) {
thrownewError("Name must be at least 3 characters long.");
    }
this._name=value;
  }
}
constperson=newPerson();
person.name="Alice";
console.log(person.name); // 输出:Aliceperson.name="Bob";
console.log(person.name); // 输出:Bobperson.name="Tom";
console.log(person.name); // 输出:Tomperson.name="Li"; // 抛出错误:Name must be at least 3 characters long.

在上面的例子中,我们定义了一个名为Person的类,并在其中定义了一个私有属性_name。然后,我们使用访问器来控制对该属性的访问。

通过定义一个名为name的get方法,我们可以获取属性值。在这个例子中,get方法返回私有属性_name

通过定义一个名为name的set方法,我们可以设置属性值。在这个例子中,set方法首先检查传入的值的长度是否小于3个字符,如果是,则抛出一个错误。否则,将传入的值赋给私有属性_name

在使用访问器时,我们可以像访问普通属性一样使用它们。在上面的例子中,我们通过person.name = "Alice"来设置属性值,并通过console.log(person.name)来获取属性值。

通过使用访问器,我们可以在对属性进行读取和写入时执行特定的逻辑。这使得我们可以对属性进行更加精细的控制和验证。


总结

TypeScript的类、继承、访问修饰符和访问器在面向对象编程中起着重要的作用,可以帮助开发者更好地组织和管理代码。

  • 类:类是一种模板或蓝图,用于创建具有相同属性和方法的对象。通过定义类,可以将相关的属性和方法封装在一起,提高代码的可读性和可维护性。
  • 继承:继承是一种面向对象编程的重要概念,它允许一个类继承另一个类的属性和方法。通过继承,子类可以复用父类中已有的代码,并且还可以添加自己特定的属性和方法。这样可以减少代码重复,并提高代码的可复用性。
  • 访问修饰符:访问修饰符用于控制类中成员(属性和方法)的可见性。TypeScript提供了三种访问修饰符:publicprivateprotected
  • public:公共成员可以在任何地方被访问,默认情况下所有成员都是公共的。
  • private:私有成员只能在定义它们的类内部被访问。
  • protected:受保护成员可以在定义它们的类及其子类中被访问。
  • 访问器:访问器是一种特殊的方法,用于控制对类的属性的访问。通过使用访问器,可以在属性被读取或写入时执行特定的逻辑。访问器由getset关键字定义,分别用于获取和设置属性的值。通过使用访问器,可以对属性进行更加精细的控制和验证。
目录
相关文章
|
22天前
|
设计模式 JavaScript 安全
TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等
本文深入探讨了TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等,旨在帮助开发者在保证代码质量的同时,实现高效的性能优化,提升用户体验和项目稳定性。
40 6
|
21天前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
35 2
|
29天前
|
JavaScript 安全 前端开发
TypeScript类型声明:基础与进阶
通过本文的介绍,我们详细探讨了TypeScript的基础与进阶类型声明。从基本数据类型到复杂的泛型和高级类型,TypeScript提供了丰富的工具来确保代码的类型安全和可维护性。掌握这些类型声明能够帮助开发者编写更加健壮和高效的代码,提高开发效率和代码质量。希望本文能为您在使用TypeScript时提供实用的参考和指导。
34 2
|
1月前
|
JavaScript 开发者
在 Babel 插件中使用 TypeScript 类型
【10月更文挑战第23天】可以在 Babel 插件中更有效地使用 TypeScript 类型,提高插件的开发效率和质量,减少潜在的类型错误。同时,也有助于提升代码的可理解性和可维护性,使插件的功能更易于扩展和升级。
|
2月前
|
JavaScript 前端开发
TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第11天】TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
2月前
|
JavaScript 前端开发
Vue2整合TypeScript:借助vue-property-decorator以类模式编写组件
Vue2整合TypeScript:借助vue-property-decorator以类模式编写组件
169 3
|
2月前
|
JavaScript 前端开发 安全
TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第9天】TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
2月前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与最佳实践
【10月更文挑战第8天】深入理解TypeScript:类型系统与最佳实践
|
2月前
|
移动开发 JavaScript 前端开发
TypeScript:数组类型&函数使用&内置对象
本文介绍了 TypeScript 中的数组类型、对象数组、二维数组、函数、函数重载、内置对象等概念,并通过代码示例详细展示了它们的使用方法。还提供了一个使用 HTML5 Canvas 实现的下雨效果的小案例。
|
1月前
|
JavaScript 前端开发 安全
TypeScript进阶:类型系统与高级类型的应用
【10月更文挑战第25天】TypeScript作为JavaScript的超集,其类型系统是其核心特性之一。本文通过代码示例介绍了TypeScript的基本数据类型、联合类型、交叉类型、泛型和条件类型等高级类型的应用。这些特性不仅提高了代码的可读性和可维护性,还帮助开发者构建更健壮的应用程序。
29 0