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.hqwc.cn/news/325904.html

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

相关文章

自定义事件总线

文章目录 什么是自定义事件总线具体实现思路分析定义结构实现 on实现 emit实现 off 源码 什么是自定义事件总线 自定义事件总线属于一种观察着模式&#xff0c;其中包括三个角色发布者&#xff08;Publisher&#xff09;&#xff1a;发出事件&#xff08;Event&#xff09;订阅…

STM32 ADC采样调试笔记

最近在搞STM32L051系列一个小MCU&#xff0c;要用这个去采集两路ADC作为输入。期间也碰到过一些问题&#xff0c;顺便记录下。 ADC采集原理不说了&#xff0c;主要采集电压&#xff0c;用数字进行细分&#xff0c;这样就可以知道输入电压多少了&#xff0c;网上也有很多相关文…

STM32G030C8T6:USART串口通信(中断)

本专栏记录STM32开发各个功能的详细过程&#xff0c;方便自己后续查看&#xff0c;当然也供正在入门STM32单片机的兄弟们参考&#xff1b; 本小节的目标是&#xff0c;系统主频64 MHZ,采用高速外部晶振&#xff0c;通过芯片PB6,PB7 的USART1 口&#xff0c;实现串口通信。 原理…

VMware17 下载安装教程

VMware17 下载安装ubuntu22.04虚拟机安装 一、VM安装 1.打开官方下载地址&#xff1a;https://www.vmware.com/products/workstation-pro/workstation-pro-evaluation.html 跳转页面后&#xff0c;点击左边的Download oad now&#xff0c;下载的就是最新版的 Workstation 17 …

GUI三维绘图

绘制三维图plot3 t0:pi/50:10*pi; xsin(t); ycos(t); zt; plot3(x,y,z); 产生栅格数据点meshgrid 这个接口在绘制三维图像里面相当重要&#xff0c;很多时候要将向量变成矩阵才能绘制三维图。 x0:0.5:5; y0:1:10; [X,Y]meshgrid(x,y); plot(X,Y,o); x和y是向量&#xff0c;…

EG网关网口连接触控一体机操作说明V1.0 20210809

前言&#xff1a;工业现场中&#xff0c;很多情况下都会使用触摸屏连接PLC这一套设备&#xff0c;此一体机是将触摸屏和PLC两款设备集成到一起&#xff0c;可以简化现场设备结构&#xff0c;方便维护。同时&#xff0c;使用蓝蜂 EG系列网关&#xff0c;可以实现远程在线监控数据…

Wnmp本地部署结合内网穿透实现任意浏览器远程访问本地服务

最近&#xff0c;我发现了一个超级强大的人工智能学习网站。它以通俗易懂的方式呈现复杂的概念&#xff0c;而且内容风趣幽默。我觉得它对大家可能会有所帮助&#xff0c;所以我在此分享。点击这里跳转到网站。 文章目录 前言1.Wnmp下载安装2.Wnmp设置3.安装cpolar内网穿透3.1…

【AI视野·今日NLP 自然语言处理论文速览 第六十八期】Tue, 2 Jan 2024

AI视野今日CS.NLP 自然语言处理论文速览 Tue, 2 Jan 2024 Totally 48 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers A Computational Framework for Behavioral Assessment of LLM Therapists Authors Yu Ying Chiu, Ashish Shar…

三叠云流程制造ERP:构建智慧工厂,实现高效生产管理

在数字化经济的浪潮下&#xff0c;新一代信息技术快速发展&#xff0c;深度整合&#xff0c;引领了工业的创新和变革&#xff0c;推动了企业向智能化发展。解决生产管理、销售管理和技术管理等难题的关键&#xff0c;在于管理者能否及时准确地掌握企业运营信息。三叠云流程制造…

vue3+Ts+Hook的方式实现商城核心功能sku选择器

Hooks是React等函数式编程框架中非常受欢迎的工具&#xff0c;随着VUE3 Composition API 函数式编程风格的推出&#xff0c;现在也受到越来越多VUE3开发者的青睐&#xff0c;它让开发者的代码具有更高的复用度且更加清晰、易于维护。 本文将通过CRMEB商城商品详情sku选择功能了…

【IPC通信--信号】

信号处理函数 • 信号发送函数 – kill(), sigqueue(), raise(), alarm(), setitimer(), pause() &#xff0c; abort() • 信号安装函数 – signal(), sigaction() • 信号集操作函数 – sigemptyset(), sigfillset(), sigaddset(), sigdelset(), sigismember() 信号发送函数—…

由浅入深理解C#中的事件

目录 本文较长&#xff0c;给大家提供了目录&#xff0c;可以直接看自己感兴趣的部分。 前言有关事件的概念示例​ 简单示例​ 标准 .NET 事件模式​ 使用泛型版本的标准 .NET 事件模式​ 补充总结 参考前言 前面介绍了C#中的委托&#xff0c;事件的很多部分都与委托…