带你读《现代TypeScript高级教程》四、接口和类(1)

简介: 带你读《现代TypeScript高级教程》四、接口和类(1)

四、接口和类

在 TypeScript 中,接口(Interfaces)和类(Classes)是实现面向对象编程(Object-Oriented Programming,OOP)的基础工具。这些工具提供了一种方式来定义和组织复杂的数据结构和行为。


1.接口


接口在 TypeScript 中扮演着关键的角色,用于强类型系统的支持。接口可以描述对象的形状,使我们可以编写出预期的行为。接口可用于描述对象、函数或者类的公共部分。

 

以下是一个基本的接口示例:

interface LabelledValue {
  label: string;}
function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);}
let myObj = { size: 10, label: "Size 10 Object" };printLabel(myObj);

在这个例子中,LabelledValue接口就像一个名片,告诉其他代码,只要一个对象有label属性,并且类型为string,那么就可以认为它是LabelledValue

 

接口也可以描述函数类型:

 

interface SearchFunc {
  (source: string, subString: string): boolean;}
let mySearch: SearchFunc;mySearch = function(src: string, sub: string): boolean {
  let result = src.search(sub);
  return result > -1;}

 

 

 

此外,接口还能用于描述数组和索引类型:

 

interface StringArray {
  [index: number]: string;}
let myArray: StringArray;
myArray = ["Bob", "Fred"];
interface Dictionary {
  [index: string]: string;}
let myDict: Dictionary;
myDict = { "key": "value" };


2.类


与传统的 JavaScript 一样,TypeScript 也使用类(Classes)来定义对象的行为。然而,TypeScript 的类具有一些额外的特性,如访问修饰符(Access Modifiers)、静态属性(Static Properties)、抽象类(Abstract Classes)等。

 

以下是一个基本的类示例:

class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
  greet() {
    return "Hello, " + this.greeting;
  }}
let greeter = new Greeter("world");

 

TypeScript 还引入了访问修饰符 publicprivate protected。如果没有指定访问修饰符,则默认为 public

 

class Animal {
  private name: string;
  constructor(theName: string) { this.name = theName; }}

 

带你读《现代TypeScript高级教程》四、接口和类(2)https://developer.aliyun.com/article/1348556?groupCode=tech_library

相关文章
|
4月前
|
JavaScript
​​​​Typescript 接口 和继承 数组处理
ts的基础数据类型,可用来处理一般数据,但是碰到后台传入的复杂对象数组的时候,我们可以使用ts中的接口来定义处理
30 0
|
3月前
|
JavaScript 前端开发 C++
Typescript.中文.接口声明.lib.es5.d.ts
Typescript.中文.接口声明.lib.es5.d.ts
22 0
|
4月前
|
JavaScript 前端开发 安全
ES6的类 vs TypeScript的类:解密两种语言中的面向对象之争
ES6的类 vs TypeScript的类:解密两种语言中的面向对象之争
|
4月前
|
JavaScript
TypeScript【类的继承、访问修饰符、readonly 修饰符、存取器、实例方法与静态方法、实例属性与静态属性、静态属性、抽象类】(三)-全面详解(学习总结---从入门到深化)
TypeScript【类的继承、访问修饰符、readonly 修饰符、存取器、实例方法与静态方法、实例属性与静态属性、静态属性、抽象类】(三)-全面详解(学习总结---从入门到深化)
20 0
|
8天前
|
JavaScript 前端开发 编译器
TypeScript中的高级类型:联合类型、交叉类型与条件类型深入解析
【4月更文挑战第23天】探索TypeScript的高级类型。这些特性增强类型系统的灵活性,提升代码质量和维护性。
|
2月前
|
JavaScript 安全
TypeScript 中的高级类型转换技术:映射类型、条件类型和类型推断
TypeScript 中的高级类型转换技术:映射类型、条件类型和类型推断
|
3月前
|
JavaScript 前端开发 索引
【HarmonyOS 4.0 应用开发实战】TypeScript入门之接口详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之接口详讲
40 0
|
3月前
|
JavaScript
【HarmonyOS 4.0 应用开发实战】TypeScript入门之声明、数据类型、函数、类的详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之声明、数据类型、函数、类的详讲
44 0
|
4月前
|
存储 缓存 JavaScript
【lib.es5】ArrayBuffer、DataView 的TypeScript接口
【lib.es5】ArrayBuffer、DataView 的TypeScript接口
119 0
|
4月前
|
JavaScript 前端开发 索引
[ Typescript 手册] JavaScript `Array` 在 Typescript 中的接口
[ Typescript 手册] JavaScript `Array` 在 Typescript 中的接口
21 0