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

相关文章
|
3月前
|
JavaScript
typeScript基础(5)_对象的类型-interfaces接口
本文介绍了TypeScript中接口(interfaces)的基本概念和用法,包括如何定义接口、接口的简单使用、自定义属性、以及如何使用`readonly`关键字定义只读属性。接口在TypeScript中是定义对象形状的重要方式,可以规定对象的必有属性、可选属性、自定义属性和只读属性。
47 1
|
2月前
|
JavaScript 前端开发 Java
TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第10天】TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
2月前
|
JavaScript 前端开发 编译器
【小白入门】 浏览器如何识别Typescript?
【10月更文挑战第1天】浏览器如何识别Typescript?
|
3月前
|
数据采集 JavaScript 前端开发
使用 TypeScript 接口优化数据结构
使用 TypeScript 接口优化数据结构
|
3月前
|
JavaScript 前端开发 编译器
TypeScript,从0到入门带你进入类型的世界
该文章提供了TypeScript的入门指南,从安装配置到基础语法,再到高级特性如泛型、接口等的使用,帮助初学者快速掌握TypeScript的基本用法。
|
4月前
|
开发框架 前端开发 JavaScript
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口
|
5月前
|
JavaScript 开发者 索引
TypeScript接口与类型别名:深入解析与应用实践
【7月更文挑战第10天】TypeScript的接口和类型别名是定义类型的关键工具。接口描述对象结构,用于类、对象和函数参数的形状约束,支持可选、只读属性及继承。类型别名则为复杂类型提供新名称,便于重用和简化。接口适合面向对象场景,类型别名在类型重用和复杂类型简化时更有优势。选择时要考虑场景和灵活性。
|
4月前
|
JavaScript 前端开发 API
Vue 3+TypeScript项目实战:解锁vue-next-admin中的全局挂载对象接口,让跨组件共享变得高效而优雅!
【8月更文挑战第3天】在构建Vue 3与TypeScript及vue-next-admin框架的应用时,为提高多组件间共享数据或方法的效率和可维护性,全局挂载对象接口成为关键。本文通过问答形式介绍其必要性和实现方法:首先定义全局接口及其实现,如日期格式化工具;接着在`main.ts`中通过`app.config.globalProperties`将其挂载;最后在组件内通过Composition API的`getCurrentInstance`访问。这种方式简化了跨组件通信,增强了代码复用性和维护性。
67 0
|
5月前
|
JavaScript 前端开发 程序员
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
90 0
|
5月前
|
JavaScript Java 索引
TypeScript(四)接口
TypeScript(四)接口
53 0