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，一经查实，立即删除！

相关文章

问题 H: 取余运算

问题 H: 取余运算

题目描述 输入b&#xff0c;p&#xff0c;k的值&#xff0c;求b^p mod k的值&#xff08;即b的p次方除以k的余数&#xff09;。其中b&#xff0c;p&#xff0c;k*k为32位整数。 输入 输入b&#xff0c;p&#xff0c;k的值 输出 输出b^p mod k的值 样例输入 2 10 9 样例…
阅读更多...
Backtrader 文档学习-Strategy（中）

Backtrader 文档学习-Strategy（中）

Backtrader 文档学习-Strategy&#xff08;中&#xff09; Strategy是BT的核心模块&#xff0c;需要慢慢摸索内部设计的流程&#xff0c;方法的用途&#xff0c;使用场景&#xff0c;还要一些常用的状态值。 本章主要介绍关于strategy的生存周期&#xff0c;notify_order方法&…
阅读更多...
npm指令

npm指令

1、npm install express&#xff1a;安装Node模块 安装完毕后会产生一个node_modules目录&#xff0c;其目录下就是安装的各个node模块。 2、npm view express&#xff1a;查看node模块的package.json文件夹 注意事项&#xff1a;如果想要查看package.json文件夹下某个标签的…
阅读更多...
Mac启动时候出现禁止符号

Mac启动时候出现禁止符号

Mac启动时候出现禁止符号 启动时候出现禁止符号,意味着 选定的启动磁盘 包含 Mac 操作系统&#xff0c;但它不是 您的 Mac 可以使用的 macOS 。您应该在这个磁盘上 重新安装 macOS 。 可以尝试以下苹果提供的方法&#xff1a; Mac启动时候出现禁止符号 不要轻易抹除磁盘&am…
阅读更多...
指针和引用

指针和引用

指针使用操作符 "*" 和 "->"&#xff0c;引用使用操作符"."&#xff0c;他们具有相同的功能&#xff0c;都是间接的引用其他对象。 指针和引用的选择 在任何情况下都不能使用指向空值的引用&#xff0c;引用总是必须指向某些对象。如果你使…
阅读更多...
鸡兔同笼问题加强版

鸡兔同笼问题加强版

描述 已知鸡和兔的总数量为 n,总腿数为 m。输入 n 和 m,依次输出鸡和兔的数目&#xff0c;如果无解&#xff0c;则输出 “No answer”(不要引号)。 输入描述 第一行输入一个数据 a,代表接下来共有几组数据&#xff0c;在接下来的 (a≤100000) a 行里&#xff0c;每行都有一个…
阅读更多...
GhostscriptExample GS

GhostscriptExample GS

1.导出图片 package cn.net.haotuo.pojo; import java.io.*;public class GhostscriptExample {public static void main(String[] args) { String gsPath "C:/Program Files/gs/gs9.54.0/bin/gswin64c.exe";String inputFilePath "C:\\Users\\Admini…
阅读更多...
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;对共模信号得到有效抑…
阅读更多...
微软的一些公开课，Python、机器学习、SQL、AI，全部免费

微软的一些公开课，Python、机器学习、SQL、AI，全部免费

大家好&#xff0c;我是老章&#xff0c;刷X看到一位博主Alif Hossain⚡alifcoder总结了微软的一些公开课&#xff0c;全部免费&#xff0c;蛮不错的。感兴趣可以学一波&#xff0c;还能领徽章。 1. 机器学习简介 本课程是学习机器学习基础知识和用例的好方法。 → 11 个模块…
阅读更多...
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程序的构成代码的组织和缩进使用\行连接符 对象…
阅读更多...
从零学Java 内部类

从零学Java 内部类

Java 内部类 文章目录 Java 内部类1 什么是内部类?2 内部类的分类2.1 成员内部类2.2 静态内部类2.3 局部内部类2.4 匿名内部类 1 什么是内部类? 概念: 在一个类的内部再定义一个完整的类, 内层的类称为内部类 特点: 编译之后可生成独立的字节码文件 内部类可以访问外部类的…
阅读更多...
解决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…
阅读更多...
最新文章

Copyright @ 2022~2023