TypeScript-接口

简介: TypeScript-接口

前言


TypeScript 中的接口(Interface)是用于定义对象的结构和类型的强大工具。它允许开发者明确定义对象应该包含哪些属性和方法,并在代码中实现类型检查和约束。接口提高了代码的可读性、可维护性和类型安全性,促进了团队协作。通过接口,可以创建自定义类型,以适应各种复杂数据结构和对象,从而在开发过程中提供更好的代码组织和错误预防。



接口类型概述


和 number, string, boolean, enum 这些数据类型一样 接口也是一种类型, 也是用来约束使用者的

先来看看如果没有使用接口之前的弊端,如我现在有一个需求要求定义一个函数输出一个人完整的姓名, 这个人的姓必须是字符串, 这个人的名也必须是一个字符串:

let obj = {
    firstName: "BN",
    lastName: "Tang"
}
function say({firstName, lastName}): void {
    console.log(`我的姓名是: ${firstName}_${lastName}`);
}
say(obj);

如上是正常的字符串类型,那么如果我给的不是字符串类型又会发生什么情况呢,当我把 lastName 存储的值改为 18 的时候编译器并没有报错,因为 JS 是弱类型的,那么这个时候就会有问题,因为我的需求是要求都是字符串类型的:

let obj = {
    firstName: "BN",
    lastName: 18
}
function say({firstName, lastName}): void {
    console.log(`我的姓名是: ${firstName}_${lastName}`);
}
say(obj);

利用 TS 当中的接口改造一下如上的小示例,来进行约束一下调用函数的时候给入的参数类型如下:



定义一个接口类型


interface FullName {
    firstName: string
    lastName: string
}

然后在改造一下函数的入参类型为刚刚定义的接口类型如下,然后发现编译器就直接报错了:

interface FullName {
    firstName: string
    lastName: string
}
let obj = {
    firstName: "BN",
    lastName: 18
}
function say({firstName, lastName}: FullName): void {
    console.log(`我的姓名是: ${firstName}_${lastName}`);
}
say(obj);

18 改为正常的字符串类型,然后在查看编译器,就不会报错了如下:

interface FullName {
    firstName: string
    lastName: string
}
let obj = {
    firstName: "BN",
    lastName: "Tang"
}
function say({firstName, lastName}: FullName): void {
    console.log(`我的姓名是: ${firstName}_${lastName}`);
}
say(obj);

最后


本期结束咱们下次再见👋~

🌊 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗

相关文章
|
9月前
|
JavaScript
​​​​Typescript 接口 和继承 数组处理
ts的基础数据类型,可用来处理一般数据,但是碰到后台传入的复杂对象数组的时候,我们可以使用ts中的接口来定义处理
79 0
|
9月前
|
JavaScript 前端开发 C++
Typescript.中文.接口声明.lib.es5.d.ts
Typescript.中文.接口声明.lib.es5.d.ts
81 0
|
5月前
|
JavaScript
typeScript基础(5)_对象的类型-interfaces接口
本文介绍了TypeScript中接口(interfaces)的基本概念和用法,包括如何定义接口、接口的简单使用、自定义属性、以及如何使用`readonly`关键字定义只读属性。接口在TypeScript中是定义对象形状的重要方式,可以规定对象的必有属性、可选属性、自定义属性和只读属性。
55 1
|
4月前
|
JavaScript 前端开发 Java
TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第10天】TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
5月前
|
数据采集 JavaScript 前端开发
使用 TypeScript 接口优化数据结构
使用 TypeScript 接口优化数据结构
|
6月前
|
开发框架 前端开发 JavaScript
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口
|
7月前
|
JavaScript 开发者 索引
TypeScript接口与类型别名:深入解析与应用实践
【7月更文挑战第10天】TypeScript的接口和类型别名是定义类型的关键工具。接口描述对象结构,用于类、对象和函数参数的形状约束,支持可选、只读属性及继承。类型别名则为复杂类型提供新名称,便于重用和简化。接口适合面向对象场景,类型别名在类型重用和复杂类型简化时更有优势。选择时要考虑场景和灵活性。
|
6月前
|
JavaScript 前端开发 API
Vue 3+TypeScript项目实战:解锁vue-next-admin中的全局挂载对象接口,让跨组件共享变得高效而优雅!
【8月更文挑战第3天】在构建Vue 3与TypeScript及vue-next-admin框架的应用时,为提高多组件间共享数据或方法的效率和可维护性,全局挂载对象接口成为关键。本文通过问答形式介绍其必要性和实现方法:首先定义全局接口及其实现,如日期格式化工具;接着在`main.ts`中通过`app.config.globalProperties`将其挂载;最后在组件内通过Composition API的`getCurrentInstance`访问。这种方式简化了跨组件通信,增强了代码复用性和维护性。
84 0
|
8月前
|
JavaScript 索引 前端开发
9.【TypeScript 教程】接口(Interface)
9.【TypeScript 教程】接口(Interface)
77 4
|
7月前
|
JavaScript 前端开发 程序员
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
106 0