TypeScript接口、对象

news2024/12/26 5:17:37

目录

1、TypeScript 接口

1.1、实例

1.2、联合类型和接口

1.3、接口和数组

1.4、接口和继承

1.5、单继承实例

1.6、多继承实例

2、TypeScript 对象

2.2、对象实例

2.3、TypeScript类型模板

2.4、鸭子类型（Duck typing）

1、TypeScript 接口

        接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。

        TypeScript 接口定义如下：

interface interface_name { 
}
1.1、实例

        以下实例中，我们定义了一个接口 IPerson，接着定义了一个变量 customer，它的类型是 IPerson。customer 实现了接口 IPerson 的属性和方法。

interface IPerson { 
    firstName:string, 
    lastName:string, 
    sayHi: ()=>string 
} 
 
var customer:IPerson = { 
    firstName:"Tom",
    lastName:"Hanks", 
    sayHi: ():string =>{return "Hi there"} 
} 
 
console.log("Customer 对象 ") 
console.log(customer.firstName) 
console.log(customer.lastName) 
console.log(customer.sayHi())  
 
var employee:IPerson = { 
    firstName:"Jim",
    lastName:"Blakes", 
    sayHi: ():string =>{return "Hello!!!"} 
} 
 
console.log("Employee  对象 ") 
console.log(employee.firstName) 
console.log(employee.lastName)

需要注意：接口不能转换为 JavaScript。 它只是 TypeScript 的一部分。

        编译以上代码，得到以下 JavaScript 代码：

var customer = {
    firstName: "Tom",
    lastName: "Hanks",
    sayHi: function () { return "Hi there"; }
};
console.log("Customer 对象 ");
console.log(customer.firstName);
console.log(customer.lastName);
console.log(customer.sayHi());
var employee = {
    firstName: "Jim",
    lastName: "Blakes",
    sayHi: function () { return "Hello!!!"; }
};
console.log("Employee  对象 ");
console.log(employee.firstName);
console.log(employee.lastName);

         输出结果为：

Customer 对象
Tom
Hanks
Hi there
Employee  对象
Jim
Blakes
1.2、联合类型和接口

        以下实例演示了如何在接口中使用联合类型：

interface RunOptions { 
    program:string; 
    commandline:string[]|string|(()=>string); 
} 
 
// commandline 是字符串
var options:RunOptions = {program:"test1",commandline:"Hello"}; 
console.log(options.commandline)  
 
// commandline 是字符串数组
options = {program:"test1",commandline:["Hello","World"]}; 
console.log(options.commandline[0]); 
console.log(options.commandline[1]);  
 
// commandline 是一个函数表达式
options = {program:"test1",commandline:()=>{return "**Hello World**";}}; 
 
var fn:any = options.commandline; 
console.log(fn());

        编译以上代码，得到以下 JavaScript 代码：

// commandline 是字符串
var options = { program: "test1", commandline: "Hello" };
console.log(options.commandline);
// commandline 是字符串数组
options = { program: "test1", commandline: ["Hello", "World"] };
console.log(options.commandline[0]);
console.log(options.commandline[1]);
// commandline 是一个函数表达式
options = { program: "test1", commandline: function () { return "**Hello World**"; } };
var fn = options.commandline;
console.log(fn());

        输出结果为：

Hello
Hello
World
**Hello World**
1.3、接口和数组

        接口中我们可以将数组的索引值和元素设置为不同类型，索引值可以是数字或字符串。

        设置元素为字符串类型：

interface namelist { 
   [index:number]:string 
} 
 
// 类型一致，正确
var list2:namelist = ["Google","Runoob","Taobao"]
// 错误元素 1 不是 string 类型
// var list2:namelist = ["Runoob",1,"Taobao"]

        如果使用了其他类型会报错：

interface namelist { 
   [index:number]:string 
} 
 
// 类型一致，正确
// var list2:namelist = ["Google","Runoob","Taobao"]
// 错误元素 1 不是 string 类型
var list2:namelist = ["John",1,"Bran"]

        执行后报错如下，显示类型不一致：

script.ts(8,30): error TS2322: Type 'number' is not assignable to type 'string'.

        设置元素为数字类型，数组索引值为字符串：

interface ages { 
   [index:string]:number 
} 
 
var agelist:ages; 
 // 类型正确 
agelist["runoob"] = 15  
 
// 类型错误，输出  error TS2322: Type '"google"' is not assignable to type 'number'.
// agelist[2] = "google"
1.4、接口和继承

        接口继承就是说接口可以通过其他接口来扩展自己。Typescript 允许接口继承多个接口。继承使用关键字 extends。单接口继承语法格式：

Child_interface_name extends super_interface_name

        多接口继承语法格式：

Child_interface_name extends super_interface1_name, super_interface2_name,…,super_interfaceN_name

继承的各个接口使用逗号 , 分隔。

1.5、单继承实例
interface Person { 
   age:number 
} 
 
interface Musician extends Person { 
   instrument:string 
} 
 
var drummer = <Musician>{}; 
drummer.age = 27 
drummer.instrument = "Drums" 
console.log("年龄:  "+drummer.age)
console.log("喜欢的乐器:  "+drummer.instrument)

         编译以上代码，得到以下 JavaScript 代码：

var drummer = {};
drummer.age = 27;
drummer.instrument = "Drums";
console.log("年龄:  " + drummer.age);
console.log("喜欢的乐器:  " + drummer.instrument);

        输出结果为：

年龄:  27
喜欢的乐器:  Drums
1.6、多继承实例
interface IParent1 { 
    v1:number 
} 
 
interface IParent2 { 
    v2:number 
} 
 
interface Child extends IParent1, IParent2 { } 
var Iobj:Child = { v1:12, v2:23} 
console.log("value 1: "+Iobj.v1+" value 2: "+Iobj.v2)

        编译以上代码，得到以下 JavaScript 代码：

var Iobj = { v1: 12, v2: 23 };
console.log("value 1: " + Iobj.v1 + " value 2: " + Iobj.v2);

        输出结果为：

value 1: 12 value 2: 23

2、TypeScript 对象

        对象是包含一组键值对的实例。 值可以是标量、函数、数组、对象等，如下实例：

var object_name = { 
    key1: "value1", // 标量
    key2: "value",  
    key3: function() {
        // 函数
    }, 
    key4:["content1", "content2"] //集合
}

        以上对象包含了标量，函数，集合(数组或元组)。

2.2、对象实例
var sites = { 
   site1:"Runoob", 
   site2:"Google" 
}; 
// 访问对象的值
console.log(sites.site1) 
console.log(sites.site2)

        编译以上代码，得到以下 JavaScript 代码：

var sites = { 
   site1:"Runoob", 
   site2:"Google" 
}; 
// 访问对象的值
console.log(sites.site1) 
console.log(sites.site2)

        输出结果为：

2.3、TypeScript类型模板

        假如我们在 JavaScript 定义了一个对象： 

var sites = { 
   site1:"Runoob", 
   site2:"Google" 
};

        这时如果我们想在对象中添加方法，可以做以下修改：

sites.sayHello = function(){ return "hello";}

        如果在 TypeScript 中使用以上方式则会出现编译错误，因为Typescript 中的对象必须是特定类型的实例。

var sites = {
    site1: "Runoob",
    site2: "Google",
    sayHello: function () { } // 类型模板
};
sites.sayHello = function () {
    console.log("hello " + sites.site1);
};
sites.sayHello();

        编译以上代码，得到以下 JavaScript 代码：

var sites = {
    site1: "Runoob",
    site2: "Google",
    sayHello: function () { } // 类型模板
};
sites.sayHello = function () {
    console.log("hello " + sites.site1);
};
sites.sayHello();

输出结果为：

hello Runoob

        此外对象也可以作为一个参数传递给函数，如下实例：

var sites = { 
    site1:"Runoob", 
    site2:"Google",
}; 
var invokesites = function(obj: { site1:string, site2 :string }) { 
    console.log("site1 :"+obj.site1) 
    console.log("site2 :"+obj.site2) 
} 
invokesites(sites)

        编译以上代码，得到以下 JavaScript 代码：

var sites = {
    site1: "Runoob",
    site2: "Google"
};
var invokesites = function (obj) {
    console.log("site1 :" + obj.site1);
    console.log("site2 :" + obj.site2);
};
invokesites(sites);

        输出结果为：

site1 :Runoob
site2 :Google
2.4、鸭子类型（Duck typing）

        鸭子类型（英语：duck typing）是动态类型的一种风格，是多态(polymorphism)的一种形式。

        在这种风格中，一个对象有效的语义，不是由继承自特定的类或实现特定的接口，而是由"当前方法和属性的集合"决定。

可以这样表述：

"当看到一只鸟走起来像鸭子、游泳起来像鸭子、叫起来也像鸭子，那么这只鸟就可以被称为鸭子。"

        在鸭子类型中，关注点在于对象的行为能做什么，而不是关注对象所属的类型。例如，在不使用鸭子类型的语言中，我们可以编写一个函数，它接受一个类型为"鸭子"的对象，并调用它的"走"和"叫"方法。在使用鸭子类型的语言中，这样的一个函数可以接受一个任意类型的对象，并调用它的"走"和"叫"方法。如果这些需要被调用的方法不存在，那么将引发一个运行时错误。任何拥有这样的正确的"走"和"叫"方法的对象都可被函数接受的这种行为引出了以上表述，这种决定类型的方式因此得名。

interface IPoint { 
    x:number 
    y:number 
} 
function addPoints(p1:IPoint,p2:IPoint):IPoint { 
    var x = p1.x + p2.x 
    var y = p1.y + p2.y 
    return {x:x,y:y} 
} 
 
// 正确
var newPoint = addPoints({x:3,y:4},{x:5,y:1})  
 
// 错误 
var newPoint2 = addPoints({x:1},{x:4,y:3})

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1362560.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

rust sqlx包（数据库相关）使用方法+问题解决

rust sqlx包（数据库相关）使用方法+问题解决

可以操作pgsql、mysql、mssql、sqlite 异步的&#xff0c;性能应该不错&#xff0c;具体使用有几个坑 除了sqlx库&#xff0c;还有对于具体数据库的库&#xff0c;比如postgres库 演示以pgsql为例&#xff0c;更新时间2024.1.6 官方github: sqlx github rust官方文档&#xff1…
阅读更多...
C++ Qt开发：Charts与数据库组件联动

C++ Qt开发：Charts与数据库组件联动

Qt 是一个跨平台C图形界面开发库&#xff0c;利用Qt可以快速开发跨平台窗体应用程序&#xff0c;在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置&#xff0c;实现图形化开发极大的方便了开发效率&#xff0c;本章将重点介绍Charts组件与QSql数据库组件的常用方法及灵活…
阅读更多...
【深度学习】cv领域中各种loss损失介绍

【深度学习】cv领域中各种loss损失介绍

文章目录 前言一、均方误差二、交叉熵损失三、二元交叉熵损失四、Smooth L1 Loss五、IOU系列的loss 前言 损失函数是度量模型的预测输出与真实标签之间的差异或误差&#xff0c;在深度学习算法中起着重要作用。具体作用&#xff1a; 1、目标优化&#xff1a;损失函数是优化算法…
阅读更多...
Unable to connect to Redis server

Unable to connect to Redis server

报错内容&#xff1a; Exception in thread "main" org.redisson.client.RedisConnectionException: java.util.concurrent.ExecutionException: org.redisson.client.RedisConnectionException: Unable to connect to Redis server: 175.24.186.230/175.24.186.230…
阅读更多...
C语言scanf（）函数详解

C语言scanf（）函数详解

目录 1. scanf&#xff08;&#xff09;函数简介 1.1 函数原型 1.2 头文件 1.3 返回值 1.4 参数 2.格式说明符 3.输入格式控制 关于‘ * ’的例子 关于width域宽的例子 关于length长度修饰符的说明 4. 其他常见问题说明 4.1 scanf&#xff08;&#xff09;函数连…
阅读更多...
2024年【烟花爆竹经营单位主要负责人】考试题及烟花爆竹经营单位主要负责人考试资料

2024年【烟花爆竹经营单位主要负责人】考试题及烟花爆竹经营单位主要负责人考试资料

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年【烟花爆竹经营单位主要负责人】考试题及烟花爆竹经营单位主要负责人考试资料&#xff0c;包含烟花爆竹经营单位主要负责人考试题答案和解析及烟花爆竹经营单位主要负责人考试资料练习。安全生产模拟考试一点通…
阅读更多...
纹理贴图如何为游戏角色增添质感

纹理贴图如何为游戏角色增添质感

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 游戏角色的3D建模是位移贴图技术广泛应用的领域之一。通过位移贴图&a…
阅读更多...
记录汇川：H5U与Fctory IO 测试1

记录汇川：H5U与Fctory IO 测试1

主程序&#xff1a; 子程序&#xff1a; Fctory IO通讯配置如下 &#xff1a; H5U作服务器&#xff0c;Fctory IO作客户端 这里参考&#xff1a;HU5作服务器地址 实现的动作如下&#xff1a; H5U与Factory IO联动
阅读更多...
华为MDC610接口说明

华为MDC610接口说明

1、MDC610对外功能接口 2、1、MDC610硬件技术规格
阅读更多...
数据库初始化脚本（用 truncate 命令一键清空某个数据库中全部数据表数据）

数据库初始化脚本（用 truncate 命令一键清空某个数据库中全部数据表数据）

数据库初始化脚本&#xff08;用 truncate 命令一键清空某个数据库中全部数据表数据&#xff09; 1.执行下面的sql语句生成“清空数据库的sql脚本”2.执行“清空数据库的sql脚本” 在开发中&#xff0c;当数据表结构有变动或者数据库中有脏数据时&#xff0c;想要清空数据表中的…
阅读更多...
Python中的@abstractmethod

Python中的@abstractmethod

abstractmethod 是 Python 中 abc 模块&#xff08;Abstract Base Classes&#xff09;提供的一个装饰器&#xff0c;用于声明抽象方法。抽象方法是指在抽象类中声明但没有提供具体实现的方法&#xff0c;而是由其子类提供具体实现。 使用 abstractmethod 装饰器可以使得子类在…
阅读更多...
普通BUG

普通BUG

IDEA包折叠 如果自动紧凑包名,则有些时候创建新包或类的时候不能达到想要的摆放层级关系,此时右上角搜索按钮搜hide middle,关掉紧凑即可,然后既可以每层一个包不折叠. 效果: 20240105println输出多个参数 int a 10;int b 20;报错println是可以输出多个参数的,但不支持直接用…
阅读更多...
C++中的new和delete

C++中的new和delete

相关文章 C智能指针 文章目录 相关文章前言一、new 运算符1. operator new 函数的范围2. 在类中重载new运算符3. 分配失败 二、delete 运算符1. 内存泄露统计示例2. 在类中重载delete运算符 总结 前言 在C中&#xff0c;new和delete是用于动态内存管理的运算符&#xff0c;它们…
阅读更多...
优势演员-评论家算法 A2C

优势演员-评论家算法 A2C

优势演员-评论家算法 A2C 优势演员-评论家算法 A2C主要思想目标函数 优势演员-评论家算法 A2C 前置知识&#xff1a;演员-评论家算法&#xff1a;多智能体强化学习核心框架 主要思想 AC 网络结构&#xff1a; 策略网络 - 演员: 这个网络负责根据当前的状态选择动作。它输出的是…
阅读更多...
更改ERPNEXT源

更改ERPNEXT源

更改ERPNEXT源 一&#xff0c; 更改源 针对已经安装了erpnext的&#xff0c;需要更改源的情况&#xff1a; 1, 更改为官方默认源, 进入frapp-bench的目录&#xff0c; 然后执行: bench remote-reset-url frappe //重设frappe的源为官方github地址。 bench remote-reset-url…
阅读更多...
如何使用免费的ZeroSSL证书保护您的网站

如何使用免费的ZeroSSL证书保护您的网站

使用 ZeroSSL 在您的站点上轻松实施 SSL。我们的指南涵盖了免费证书设置&#xff0c;确保安全和加密的用户连接。 如今&#xff0c;保护您的网站不仅是一种建议&#xff0c;而且是一种必需品。这就是SSL证书发挥作用的地方。它们对用户浏览器和网站之间传输的数据进行加密&…
阅读更多...
复旦MBA科创青干营（二期）：探索合肥科创企业的创新之路

复旦MBA科创青干营（二期）：探索合肥科创企业的创新之路

11月18日-19日&#xff0c;复旦MBA科创青干营二期学生开启了整合实践活动的第三次企业参访&#xff0c;前往位于合肥的蔚来第二先进制造基地、安徽万邦医药科技股份有限公司和合肥国轩高科动力能源有限公司&#xff0c;在学术导师和科创企业家“双导师”的指导下&#xff0c;深…
阅读更多...
LeetCode 每日一题 Day 3334(hard)35 ||二进制枚举/单调栈/链表遍历

LeetCode 每日一题 Day 3334(hard)35 ||二进制枚举/单调栈/链表遍历

2397. 被列覆盖的最多行数 给你一个下标从 0 开始、大小为 m x n 的二进制矩阵 matrix &#xff1b;另给你一个整数 numSelect&#xff0c;表示你必须从 matrix 中选择的 不同 列的数量。 如果一行中所有的 1 都被你选中的列所覆盖&#xff0c;则认为这一行被 覆盖 了。 形式…
阅读更多...
MyBatis - 批量更新(update foreach)报错

MyBatis - 批量更新(update foreach)报错

在使用mybatis执行批量更新(update foreach)数据的时候报错如下&#xff1a; org.springframework.jdbc.BadSqlGrammarException: ### Error updating database. Cause: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: You have an error in your SQL syntax; c…
阅读更多...
Merge还是Rebase？这次终于懂了

Merge还是Rebase？这次终于懂了

《Git分支管理&#xff1a;Merge还是Rebase&#xff1f;》 导语&#xff1a; 在Git的分支管理中&#xff0c;Merge和Rebase是两种常见的合并策略&#xff0c;每一种都有其优劣之处。究竟应该选择Merge还是Rebase&#xff0c;取决于项目的需求和团队的工作流程。本文将深入探讨…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023