TypeScript接口、对象

目录

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.rhkb.cn/news/233414.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

提升图像分割精度:学习UNet++算法

文章目录 一、UNet 算法简介1.1 什么是 UNet 算法1.2 UNet 的优缺点1.3 UNet 在图像分割领域的应用 二、准备工作2.1 Python 环境配置2.2 相关库的安装 三、数据处理3.1 数据的获取与预处理3.2 数据的可视化与分析 四、网络结构4.1 UNet 的网络结构4.2 UNet 各层的作用 五、训练…

10本审稿及出版效率均较好的科普期刊参数分享!

医、药、护、技及医学工程等相关的人员&#xff0c;进行卫生高级职称评审时&#xff0c;需要在专业期刊上公开发表本专业学术论文&#xff0c;论文的方向、内容质量以及发表的刊物都至关重要。今天常笑医学给大家整理了10本审稿及出版效率均较好的科普期刊&#xff01;参数分享…

java 音乐会售票平台系统Myeclipse开发mysql数据库struts2结构java编程计算机网页项目

一、源码特点 java 音乐会售票平台系统 是一套完善的web设计系统&#xff0c;对理解JSP java编程开发语言有帮助struts2框架开发mvc模式&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发 环境为TOCAT7.0,Myeclipse8.5开发&#xff0c;数据…

深入了解鸿鹄电子招投标系统:Java版企业电子招标采购系统的核心功能

随着市场竞争的加剧和企业规模的扩大&#xff0c;招采管理逐渐成为企业核心竞争力的重要组成部分。为了提高招采工作的效率和质量&#xff0c;我们提出了一种基于电子化平台的解决方案。该方案旨在通过电子化招投标&#xff0c;使得招标采购的质量更高、速度更快&#xff0c;同…

FFmpeg读取Assets资源文件

在Android开发中我们经常把原生资源文件放在assets目录下以供需要时读取&#xff0c;通过API提供的resources.assets.open(filename)/openFd(filenam)方法可以非常方便获得InputStream或FileDescriptor&#xff08;文件标识符&#xff09;&#xff0c;但是在使用FFmpeg读取Asse…

PHPStudy快速搭建网站并结合内网穿透远程访问本地站点

文章目录 [toc]使用工具1. 本地搭建web网站1.1 下载phpstudy后解压并安装1.2 打开默认站点&#xff0c;测试1.3 下载静态演示站点1.4 打开站点根目录1.5 复制演示站点到站网根目录1.6 在浏览器中&#xff0c;查看演示效果。 2. 将本地web网站发布到公网2.1 安装cpolar内网穿透2…

Google Earth Engine(GEE)深度学习入门教程- GEE导出篇

GEE导出篇 官方教程&#xff1a;TFRecord 和地球引擎 在GEE的JS Code Editor中&#xff0c;我们按照我们的需要去处理对应的遥感影像&#xff0c;得到处理后Image影像。为了导出后读取数据&#xff0c;在导出前一定清楚每个波段的名称&#xff08;不然没法读取&#xff09;。…

数环通12月产品更新:新增数据表相关功能、优化编辑器,15+应用进行更新

为了满足用户不断增长的需求&#xff0c;我们持续努力提升产品的功能和性能&#xff0c;以更好地支持用户的工作。 数环通12月的最新产品更新已经正式发布&#xff0c;带来了一系列强大的功能&#xff0c;以提升您的工作效率和系统的可靠性。 更新快速预览 新增&优化功能&a…

小梅哥Xilinx FPGA学习笔记20——无源蜂鸣器驱动设计与验证(音乐发生器设计)

目录 一&#xff1a;章节导读 二&#xff1a;无源蜂鸣器驱动原理 三&#xff1a;PWM 发生器模块设计 3.1 PWM 发生器模块框图 3.2 PWM 发生器模块接口功能描述 3.3 PWM波生成设计文件代码 3.4 测试仿真文件 3.5 测试仿真结果 3.6 板级调试与验证之顶层文件设计 四&am…

【Project】TPC-Online Module (manuscript_2024-01-07)

PRD正文 一、概述 本模块实现隧道点云数据的线上汇总和可视化。用户可以通过注册和登录功能进行身份验证&#xff0c;然后上传原始隧道点云数据和经过处理的数据到后台服务器。该模块提供数据查询、筛选和可视化等操作&#xff0c;同时支持对指定里程的分段显示和点云颜色更改…

系列十一、(三)Sentinel控制台

一、Sentinel控制台 二、实时监控 2.1、概述 实时监控&#xff0c;顾名思义是用来实时监控的&#xff0c;具体监控的是接口请求通过的QPS和拒绝的QPS&#xff0c;默认情况下没有访问记录&#xff0c;所以看不到任何记录&#xff0c;需要访问接口才会有记录。另外需要注意&…

C++ 模板进阶

目录 一、非类型模板参数 二、模板的特化 1、函数模板特化 2、类模板特化 全特化 偏特化 3、例题 三、模板分离编译 1、定义 2、解决方法 3、模板总结 一、非类型模板参数 模板参数分类类型形参与非类型形参。 类型形参即&#xff1a;出现在模板参数列表中&#xf…

662. 二叉树最大宽度

题目 给你一棵二叉树的根节点 root &#xff0c;返回树的 最大宽度 。 树的 最大宽度 是所有层中最大的 宽度 。 每一层的 宽度 被定义为该层最左和最右的非空节点&#xff08;即&#xff0c;两个端点&#xff09;之间的长度。将这个二叉树视作与满二叉树结构相同&#xff0…

【Python学习】Python学习5-条件语句

目录 【Python学习】Python学习5-条件语句 前言if语句if语句判断条件简单的语句组参考 文章所属专区 Python学习 前言 本章节主要说明Python的条件语句&#xff0c;Python条件语句是通过一条或多条语句的执行结果&#xff08;True或者False&#xff09;来决定执行的代码块。 …

日志服务管理和inode号

一、系统日志管理 1.1系统日志的介绍 在现实生活中&#xff0c;记录日志也非常重要&#xff0c;比如银行的转账记录&#xff0c;飞机上的黑盒子&#xff0c;那么将系统和应用发生的事件记录至日志中&#xff0c;以助于排错和分析使用 日志记录的内容包括&#xff1a; 历史事…

设计模式② :交给子类

文章目录 一、前言二、Template Method 模式1. 介绍2. 应用3. 总结 三、Factory Method 模式1. 介绍2. 应用3. 总结 参考内容 一、前言 有时候不想动脑子&#xff0c;就懒得看源码又不像浪费时间所以会看看书&#xff0c;但是又记不住&#xff0c;所以决定开始写"抄书&qu…

代码随想录算法训练营day6|242.有效的字母异位词、349.两个数组的交集、202.快乐数

哈希表理论基础 建议&#xff1a;大家要了解哈希表的内部实现原理&#xff0c;哈希函数&#xff0c;哈希碰撞&#xff0c;以及常见哈希表的区别&#xff0c;数组&#xff0c;set 和map。 什么时候想到用哈希法&#xff0c;当我们遇到了要快速判断一个元素是否出现集合里的时…

【React系列】React中的CSS

本文来自#React系列教程&#xff1a;https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNA&actiongetalbum&album_id1566025152667107329) 一. React中的css方案 1.1. react 中的 css 事实上&#xff0c;css 一直是 React 的痛点&#xff0c;也是被很多开发…

自动生成表结构screw

采用的组件 screw 操作流程&#xff1a; 1、新建springboot 项目 2、引入相关的依赖 <!-- screw核心 --><dependency><groupId>cn.smallbun.screw</groupId><artifactId>screw-core</artifactId><version>1.0.4</version><…

2023 年精选:每个 DevOps 团队都应该了解的 5 种微服务设计模式

微服务彻底改变了应用程序开发世界&#xff0c;将大型整体系统分解为更小、更易于管理的组件。这种架构风格的特点是独立、松散耦合的服务&#xff0c;带来了从可扩展性、模块化到更高的灵活性等众多优势。 DevOps 团队如何最好地利用这种方法来实现最高效率&#xff1f;答案在…