【TS】接口(Interface)学习

介绍

接口(Interface)是TypeScript中的一个重要概念,它允许你定义对象的结构,而不需要实现具体的逻辑。接口在编译时用于类型检查,确保对象具有特定的属性和方法。

接口的作用类似于抽象类,不同点在于接口中的所有方法和属性都是没有实值的,换句话说接口中的所有方法都是抽象方法。

基本用法

定义接口
javascript 复制代码
interface Person {
    name: string;
    age: number;
}
实现接口
javascript 复制代码
const person: Person = {
    name: "张三丰",
    age: 108
};
可选属性
javascript 复制代码
interface Person {

    name: string;

    // ?代表可选属性
    age?: number; 
}
只读属性
javascript 复制代码
interface Person {

    //readonly 只读属性
    readonly name: string;

    age: number;
}
扩展接口
java 复制代码
interface Person {
    name: string;
    age: number;
}

interface Man extends Person {
    sex: string;
}
索引签名
javascript 复制代码
interface StringArray {
    [index: number]: string;
}

let myArray: StringArray;
myArray = ["张翠山", "张无忌"];

实践

  • 使用接口来定义API的形状:这样可以确保API的一致性和可预测性。
  • 在团队开发中,接口可以作为契约:明确对象的结构,减少沟通成本。、
  • 接口可以提高代码的可读性和可维护性:通过接口,你可以清晰地看到对象的结构和预期的行为。



相关推荐
kyriewen1 天前
别再对着 TypeScript 报错发呆了:我把 10 个最常见的红色波浪线翻译成了人话
前端·javascript·typescript
妙码生花1 天前
现代前端的极致性能 icon 加载方案(死磕成功版)
前端·vue.js·typescript
MonkeyKing2 天前
鸿蒙ArkTS深度剖析:ArkTS与TS/JS核心差异、静态强类型实战优势
typescript·harmonyos
Momo__3 天前
TypeScript satisfies 操作符——比 as 更安全的类型守门员
前端·typescript
Awu12274 天前
⚡从零开发 Agent CLI(四):给 CLI 装上"LLM 引擎"
typescript·ai编程·claude
假如让我当三天老蒯6 天前
TypeScript 继续学习(学习用)
前端·面试·typescript
糖拌西瓜皮6 天前
Node.js工程化实践:包管理、TypeScript配置与代码质量
typescript·node.js
Bolt8 天前
TypeScript 7.0 来了:当 tsc 用 Go 重写之后
javascript·typescript·go
Flynt9 天前
装上TypeScript 7.0 RC之后,最让我意外不是10倍提速
typescript·visual studio code
疯狂SQL9 天前
手写高性能在线 JSON 工具|Web Worker 工程化打包 + 语法自动修复 + 多语言代码生成实战
typescript·json·next.js·web worker·前端性能优化·esbuild·源码实战