ts的接口介绍和使用

简言

了解下ts接口(interface)的作用和使用方式。

接口

介绍

在TypeScript里,接口的作用就是为你的代码或第三方代码做类型声明,是命名对象类型的一种方式。

使用关键字:interface 定义。

ts的接口需要以定义(限制)的角度来理解,只要传入的对象满足接口提到的必要条件,那么它就是被允许的。

还有一点值得提的是,类型检查器不会去检查属性的顺序,只要相应的属性存在并且类型也是对的就可以。

typescript 复制代码
//  接口
interface LabelledValue {
  label: string;
}

//  参数使用接口
function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

let myObj = {
  label: "Size 10 Object",
  size: 10,
  run: () => {
    console.log(this.size);
  }
};
printLabel(myObj);

可选属性

语法: 定义属性时,冒号前面加?,例如:interface A {a?:string}

接口里的属性不全都是必需的。 有些是只在某些条件下存在,或者根本不存在。 可选属性在应用"option bags"模式时很常用,即给函数传入的参数对象中只有部分属性赋值了。

typescript 复制代码
interface Options {
  a: number,
  b?: number, //  可选属性b
}

function run(options: Options): boolean {
  const { a, b } = options
  console.log(a);
  console.log(b);
  //  b是可选属性,使用时加判断
  if (b)
    return a > b
  else
    return true
}

run({ a: 10 })

只读属性

语法: 定义属性时, 属性前加readonly,代表这个是只读属性。例如:interface A { readonly a:number }

一些对象属性只能在对象刚刚创建的时候修改其值。 你可以在属性名前用 readonly来指定只读属性.

可合并

interface声明的对象类型允许合并。不过,如果是含有同名属性,它的类型要保持一致。

可继承

interface声明的对象类型可以继承其他接口对象类型,使用extends扩展。

结语

interface是一个使用率非常高的声明对象类型的方式。

相关推荐
叫我阿柒啊5 小时前
从Java全栈到前端框架:一次真实的面试对话与技术解析
java·javascript·typescript·vue·springboot·react·前端开发
lypzcgf8 小时前
Coze源码分析-资源库-删除提示词-前端源码
前端·typescript·react·ai应用·coze·coze源码分析·智能体平台
子兮曰9 小时前
🚀99% 的前端把 reduce 用成了「高级 for 循环」—— 这 20 个骚操作让你一次看懂真正的「函数式折叠」
前端·javascript·typescript
芭拉拉小魔仙10 小时前
【Vue3+TypeScript】H5项目实现企业微信OAuth2.0授权登录完整指南
javascript·typescript·企业微信
摘星编程15 小时前
Cursor Pair Programming:在前端项目里用 AI 快速迭代 UI 组件
前端·人工智能·ui·typescript·前端开发·cursorai
叫我阿柒啊15 小时前
从Java全栈到云原生:一场技术深度对话
java·spring boot·docker·微服务·typescript·消息队列·vue3
已读不回14316 小时前
TypeScript 泛型入门(新手友好、完整详解)
typescript
已读不回14316 小时前
TypeScript 内置工具类型大全(ReturnType、Omit、Pick 等)
typescript
已读不回14316 小时前
实现 TypeScript 内置工具类型(源码解析与实现)
typescript
YaeZed16 小时前
TypeScript6(class类)
前端·typescript