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.mzph.cn/news/601722.shtml

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

相关文章

Mac启动时候出现禁止符号

Mac启动时候出现禁止符号

Mac启动时候出现禁止符号 启动时候出现禁止符号,意味着 选定的启动磁盘 包含 Mac 操作系统&#xff0c;但它不是 您的 Mac 可以使用的 macOS 。您应该在这个磁盘上 重新安装 macOS 。 可以尝试以下苹果提供的方法&#xff1a; Mac启动时候出现禁止符号 不要轻易抹除磁盘&am…
阅读更多...
idea将本地编译好的代码上传到hub镜像仓库

idea将本地编译好的代码上传到hub镜像仓库

第一步&#xff1a;编译打包本地的文件 package 第二步&#xff1a;执行docker bulid打包命令 docker build -t sunyuhua/algo-ability:1.0.0 .sunyuhuasunyuhua-HKF-WXX:~/workspace/shbgit/algo-ability$ docker build -t sunyuhua/algo-ability:1.0.0 . [] Building 141.…
阅读更多...
C语言编译器（C语言编程软件）完全攻略

C语言编译器（C语言编程软件）完全攻略

介绍常用C语言编译器的安装、配置和使用。 常用的C语言编译器&#xff08;编程软件&#xff09;介绍&#xff0c;同时附带下载地址、详细的安装教程和使用教程。我们还对比了不同C语言编译器&#xff08;C语言编程软件&#xff09;的优缺点&#xff0c;让初学者知道该如何选择…
阅读更多...
差分电路原理以及为什么输出电压要偏移

差分电路原理以及为什么输出电压要偏移

我们在使用放大器芯片的时候&#xff0c;除了对放大器芯片本身应用外&#xff0c;通常还需要搭建一些外围电路来满足放大器芯片的使用条件&#xff0c;最终满足应用的功能&#xff0c;下面通过一个差分电路来熟悉这些应用。 差分运算放大电路&#xff0c;对共模信号得到有效抑…
阅读更多...
C# Image Caption

C# Image Caption

目录 介绍 效果 模型 decoder_fc_nsc.onnx encoder.onnx 项目 代码 下载 C# Image Caption 介绍 地址&#xff1a;https://github.com/ruotianluo/ImageCaptioning.pytorch I decide to sync up this repo and self-critical.pytorch. (The old master is in old ma…
阅读更多...
实战演练 | Navicat 中编辑器设置的配置

实战演练 | Navicat 中编辑器设置的配置

Navicat 是一款功能强大的数据库管理工具&#xff0c;为开发人员和数据库管理员提供稳健的环境。其中&#xff0c;一个重要功能是 SQL 编辑器&#xff0c;用户可以在 SQL 编辑器中编写和执行 SQL 查询。Navicat 的编辑器设置可让用户自定义编辑器环境&#xff0c;以满足特定的团…
阅读更多...
ejs默认配置 造成原型链污染

ejs默认配置 造成原型链污染

文章目录 ejs默认配置 造成原型链污染漏洞背景漏洞分析漏洞利用 例题 [SEETF 2023]Express JavaScript Security ejs默认配置 造成原型链污染 参考文章 漏洞背景 EJS维护者对原型链污染的问题有着很好的理解&#xff0c;并使用非常安全的函数清理他们创建的每个对象 利用Re…
阅读更多...
鸿蒙应用中的通知

鸿蒙应用中的通知

目录 1、通知流程 2、发布通知 2.1、发布基础类型通知 2.1.1、接口说明 2.1.2、普通文本类型通知 2.1.3、长文本类型通知 2.1.4、多行文本类型通知 2.1.5、图片类型通知 2.2、发布进度条类型通知 2.2.1、接口说明 2.2.2、示例 2.3、为通知添加行为意图 2.3.1、接…
阅读更多...
Python基础知识总结1-Python基础概念搞定这一篇就够了

Python基础知识总结1-Python基础概念搞定这一篇就够了

时隔多年不用忘却了很多&#xff0c;再次进行python的汇总总结。好记性不如烂笔头&#xff01; PYTHON基础 Python简介python是什么&#xff1f;Python特点Python应用场景Python版本和兼容问题解决方案python程序基本格式 Python程序的构成代码的组织和缩进使用\行连接符 对象…
阅读更多...
解决ChatGPT4.0无法上传文件

解决ChatGPT4.0无法上传文件

问题描述 ChatGPT4.0&#xff1a;上传文件时出错 解决方案&#xff1a; 仔细检查文件的编码格式&#xff0c;他似乎目前只能接受utf-8的编码&#xff0c;所以把文件的编码改为UTF-8即可成功上传
阅读更多...
【十六】【动态规划】97. 交错字符串、712. 两个字符串的最小ASCII删除和、718. 最长重复子数组，三道题目深度解析

【十六】【动态规划】97. 交错字符串、712. 两个字符串的最小ASCII删除和、718. 最长重复子数组，三道题目深度解析

动态规划 动态规划就像是解决问题的一种策略&#xff0c;它可以帮助我们更高效地找到问题的解决方案。这个策略的核心思想就是将问题分解为一系列的小问题&#xff0c;并将每个小问题的解保存起来。这样&#xff0c;当我们需要解决原始问题的时候&#xff0c;我们就可以直接利…
阅读更多...
Hadolint：Lint Dockerfile 的完整指南

Hadolint：Lint Dockerfile 的完整指南

想学习如何使用 Hadolint 对 Dockerfile 进行 lint 处理吗&#xff1f;这篇博文将向您展示如何操作。这是关于 Dockerfile linting 的完整指南。 通过对 Dockerfile 进行 lint 检查&#xff0c;您可以及早发现错误和问题&#xff0c;并确保它们遵循最佳实践。 什么是Hadolint…
阅读更多...
坐标转换 | EXCEL中批量将经纬度坐标（EPSG:4326）转换为墨卡托坐标（EPSG:3857）

坐标转换 | EXCEL中批量将经纬度坐标（EPSG:4326）转换为墨卡托坐标（EPSG:3857）

1 需求 坐标系概念&#xff1a; 经纬度坐标&#xff08;EPSG:4326&#xff09;&#xff1a;WGS84坐标系&#xff08;World Geodetic System 1984&#xff09;是一种用于地球表面点的经纬度坐标系。它是美国国防部于1984年建立的&#xff0c;用于将全球地图上的点定位&#xff0…
阅读更多...
Vue-2、初识Vue

Vue-2、初识Vue

1、helloword小案列 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>初始Vue</title><!--引入vue--><script type"text/javascript" src"https://cdn.jsdelivr.n…
阅读更多...
【贪心算法】Dijkstra 算法及其衍生

【贪心算法】Dijkstra 算法及其衍生

目录 Dijkstra 算法Dijkstra 算法正确性证明 Dijkstra 算法的复杂度优化 Dijkstra 算法的衍生SSSP的应用 Dijkstra 算法 1959 年&#xff0c;Edsger Dijkstra 提出一个非常简单的贪心算法来求解单源最短路径问题&#xff08;Single-Source Shortest Path&#xff0c;SSSP&…
阅读更多...
[C#]使用PaddleInference图片旋转四种角度检测

[C#]使用PaddleInference图片旋转四种角度检测

官方框架地址】 https://github.com/PaddlePaddle/PaddleDetection.git 【算法介绍】 PaddleDetection 是一个基于 PaddlePaddle&#xff08;飞桨&#xff09;深度学习框架的开源目标检测工具库。它提供了一系列先进的目标检测算法&#xff0c;包括但不限于 Faster R-CNN, Ma…
阅读更多...
一张照片来跳舞，AI带去你跳科目三

一张照片来跳舞，AI带去你跳科目三

大家好我是在看&#xff0c;记录普通人学习探索AI之路。 重生之我是秦始皇&#xff0c;起猛了看见兵马俑在跳舞。 最近&#xff0c;随着社交媒体上热议的科目三话题热度持续飙升&#xff0c;阿里集团旗下的通义千问项目团队精准把握住了这一社会潮流&#xff0c;借势推出了一…
阅读更多...
PHP 基础编程 1

PHP 基础编程 1

文章目录 前后端交互尝试php简介php版本php 基础语法php的变量前后端交互 - 计算器体验php数据类型php的常量和变量的区别php的运算符算数运算符自增自减比较运算符赋值运算符逻辑运算 php的控制结构ifelseelse if 前后端交互尝试 前端编程语言&#xff1a;JS &#xff08;Java…
阅读更多...
OpenHarmony鸿蒙源码下载编译和开发环境搭建

OpenHarmony鸿蒙源码下载编译和开发环境搭建

目录 一、开发环境搭建和源码下载二、编译三、总结 一、开发环境搭建 最好是在如Ubuntu18.04以上的系统中搭建&#xff0c;不然有些软件依赖需要解决&#xff0c;加大搭建时间 如gitee中开源OpenHarmony中的文档所示&#xff0c;搭建开发环境&#xff0c;搭建文档网站如下&a…
阅读更多...
Supershell反溯源配置

Supershell反溯源配置

简介 项目地址&#xff1a;https://github.com/tdragon6/Supershell Supershell是一个集成了reverse_ssh服务的WEB管理平台&#xff0c;使用docker一键部署&#xff08;快速构建&#xff09;&#xff0c;支持团队协作进行C2远程控制&#xff0c;通过在目标主机上建立反向SSH隧…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023