TypeScript基础入门 - 接口 - 简介

简介: 转载地址TypeScript基础入门 - 接口 - 简介项目实践仓库https://github.com/durban89/typescript_demo.gittag: 1.0.6为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能直接运行看到输出的结果。

转载地址

TypeScript基础入门 - 接口 - 简介

项目实践仓库

https://github.com/durban89/typescript_demo.git
tag: 1.0.6

为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能直接运行看到输出的结果。

npm install -D ts-node

后面自己在练习的时候可以这样使用

npx ts-node src/learn_basic_types.ts
npx ts-node 脚本路径

接口

TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

接口初探

下面通过一个简单示例来观察接口是如何工作的:

function printLabel(labelledObj: { label: string }) {
    console.log(labelledObj.label);
}

let myObj = { size: 10, label: "Size 10 Object" };
printLabel(myObj);


运行后接到的结果如下

Size 10 Object

类型检查器会查看printLabel的调用。 printLabel有一个参数,并要求这个对象参数有一个名为label类型为string的属性。 需要注意的是,我们传入的对象参数实际上会包含很多属性,但是编译器只会检查那些必需的属性是否存在,并且其类型是否匹配。 然而,有些时候TypeScript却并不会这么宽松,示例演示如下。下面我们重写上面的例子,这次使用接口来描述:必须包含一个label属性且类型为string:

interface LabelledValue {
  label: string;
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);


运行后接到的结果如下

Size 10 Object

LabelledValue接口就好比一个名字,用来描述上面例子里的要求。 它代表了有一个 label属性且类型为string的对象。 需要注意的是,我们在这里并不能像在其它语言里一样,说传给 printLabel的对象实现了这个接口。我们只会去关注值的外形。 只要传入的对象满足上面提到的必要条件,那么它就是被允许的。

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


本实例结束实践项目地址

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