【typescript入门手册】接口

简介: 【typescript入门手册】接口

1、介绍:


TypeScript中的接口(Interface)用于定义对象的结构和类型。接口类似于制定一份合同或规范,描述了对象应该具有的属性、方法等特征,但并不提供具体的实现。


2、接口初探:


接口定义了对象应该具备的属性和方法。例如,我们可以定义一个Person接口来描述一个人的基本信息:


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


示例代码:


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


3、可选属性:


接口的属性可以是可选的,即在对象中可以存在也可以不存在。使用?来标记可选属性。例如,我们可以将年龄属性改为可选:


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


示例代码:


let person1: Person = {
  name: "Alice"
};
let person2: Person = {
  name: "Bob",
  age: 30
};


4、只读属性:


接口的属性可以设置为只读,即在对象创建后不可修改。使用readonly关键字来标记只读属性。例如,我们可以将姓名属性设置为只读:


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


示例代码:


let person: Person = {
  name: "Alice",
  age: 25
};
person.name = "Bob"; // 错误,只读属性不可修改


5、额外的检查属性:


当我们将一个对象赋值给接口类型的变量时,TypeScript会对该对象进行额外的检查,确保对象中没有未定义的属性。如果我们确实需要将额外的属性赋给对象,可以使用索引签名。例如:


interface Person {
  name: string;
  age?: number;
  [propName: string]: any;
}


示例代码:


let person: Person = {
  name: "Alice",
  age: 25,
  gender: "female" // 额外的属性,使用索引签名允许赋值
};


6、函数类型:


接口不仅可以描述对象的结构,还可以描述函数的类型。例如,我们可以定义一个接口来描述一个求和函数:


interface Calculator {
  (a: number, b: number): number;
}


示例代码:


let add: Calculator = function(a, b) {
  return a + b;
};


7、可索引的类型:


接口可以描述具有索引签名的对象,例如数组或字典。索引签名允许我们使用不同的索引类型来访问对象的属性。例如,我们可以定义一个字符串数组的接口:


interface StringArray {
  [index: number]: string;
}


示例代码:


let colors: StringArray = ["red", "green", "blue"];
let color: string = colors[0];


8、类类型:


接口可以用来描述类的结构和实现,类可以实现(implement)接口并满足接口的要求。例如,我们可以定义一个接口描述一个时钟类:


interface Clock {
  currentTime: Date;
  setTime(date: Date): void;
}
class DigitalClock implements Clock {
  currentTime: Date;
  constructor(date: Date) {
    this.currentTime = date;
  }
  setTime(date: Date) {
    this.currentTime = date;
  }
}
class AnalogClock implements Clock {
  currentTime: Date;
  constructor(date: Date) {
    this.currentTime = date;
  }
  setTime(date: Date) {
    this.currentTime = date;
  }
}


示例代码:


let digitalClock = new DigitalClock(new Date());
let analogClock = new AnalogClock(new Date());


9、继承接口:


接口可以继承其他接口,从而组合多个接口的特性。继承可以帮助我们更好地组织和重用代码。例如:


interface Shape {
  color: string;
}
interface Square extends Shape {
  sideLength: number;
}


示例代码:


let square: Square = {
  color: "red",
  sideLength: 10
};


10、混合类型:


接口可以描述具有多种类型的对象,这些对象可以同时具备函数、属性等特征。这样的接口被称为混合类型接口。例如,我们可以定义一个具有倒计时功能和属性的接口:


interface Counter {
  (): void;
  count: number;
}


示例代码:


function createCounter(): Counter {
  let count = 0;
  const counter = () => {
    count++;
    console.log("Count: ", count);
  };
  counter.count = count;
  return counter;
}
let counter = createCounter();
counter(); // 输出:Count: 1
counter(); // 输出:Count: 2
console.log(counter.count); // 输出:2


11、接口继承类:


接口可以继承类的成员,但不继承其实现。这样可以使用接口来约束类的结构,使其他类可以通过实现该接口来满足特定的要求。例如:


class Control {
  private state: any;
}
interface SelectableControl extends Control {
  select(): void;
}


示例代码:


class Button extends Control implements SelectableControl {
  select() {
    console.log("Button selected.");
  }
}


总之,接口在TypeScript中起到了约束和规范的作用,使代码更加可靠、可维护。通过使用接口,我们可以明确定义对象的结构、类的实现以及函数的类型,从而提高代码的可读性和可靠性。

相关文章
|
2月前
|
JavaScript 前端开发
【TypeScript入门】TypeScript入门篇——数据类型
我们人类可以很容易的分清数字与字符的区别,但是计算机并不能呀,计算机虽然很强大,但从某种角度上看又很傻,除非你明确的告诉它,1是数字,“汉”是文字,否则它是分不清1和‘汉’的区别的,因此,在每个编程语言里都会有一个叫数据类型的东东,其实就是对常用的各种数据类型进行了明确的划分,你想让计算机进行数值运算,你就传数字给它,你想让他处理文字,就传字符串类型给他。
17 3
|
11天前
|
JavaScript 前端开发 开发者
【Web 前端】TypeScript 中的接口是什么?
【5月更文挑战第1天】【Web 前端】TypeScript 中的接口是什么?
|
12天前
|
JavaScript 前端开发 开发者
【TypeScript技术专栏】TypeScript类型系统与接口详解
【4月更文挑战第30天】TypeScript扩展JavaScript,引入静态类型检查以减少错误。其类型系统包括基本类型、数组等,而接口是定义对象结构的机制。接口描述对象外形,不涉及实现,可用于规定对象属性和方法。通过声明、实现接口,以及利用可选、只读属性,接口继承和合并,TypeScript增强了代码的健壮性和维护性。学习和掌握TypeScript的接口对于大型项目开发至关重要。
|
26天前
|
JavaScript
vite+typescript从入门到实战(三)
vite+typescript从入门到实战
31 0
|
26天前
|
JavaScript
vite+typescript从入门到实战(二)
vite+typescript从入门到实战
40 0
|
26天前
|
JavaScript 前端开发
vite+typescript从入门到实战(一)
vite+typescript从入门到实战
66 0
|
1月前
|
JavaScript 前端开发
TypeScript极速入门笔记1
TypeScript极速入门笔记1
34 4
|
3月前
|
存储 JavaScript 前端开发
【HarmonyOS 4.0 应用开发实战】TypeScript入门之元组详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之元组详讲
45 0
|
3月前
|
JavaScript 前端开发
【HarmonyOS 4.0 应用开发实战】TypeScript入门之模块化详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之模块化详讲
33 0
|
3月前
|
JavaScript 前端开发 索引
【HarmonyOS 4.0 应用开发实战】TypeScript入门之接口详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之接口详讲
43 0