【零基础入门TypeScript】对象

目录

句法

示例:对象文字表示法

TypeScript 类型模板

示例:Typescript 类型模板

示例:对象作为函数参数

示例:匿名对象

鸭子打字

例子



对象是包含一组键值对的实例这些值可以是标量值或函数,甚至是其他对象的数组。语法如下 -

句法

var object_name = { key1: “value1”, //scalar value key2: “value”,  key3: function() {//functions }, key4:[“content1”, “content2”] //collection  
};

如上所示,对象可以包含标量值、函数以及数组和元组等结构。

示例:对象文字表示法


var person = { firstname:"Tom", lastname:"Hanks" 
}; 
//access the object values 
console.log(person.firstname) 
console.log(person.lastname)

编译时,它将在 JavaScript 中生成相同的代码。

上述代码的输出如下 -

Tom 
Hanks

TypeScript 类型模板

假设您在 JavaScript 中创建了一个对象文字:


var person = { firstname:"Tom", lastname:"Hanks" 
};

如果您想向对象添加一些值,JavaScript 允许您进行必要的修改。假设我们稍后需要向 person 对象添加一个函数,这就是您可以执行此操作的方式。


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

如果您在 Typescript 中使用相同的代码,编译器会给出错误。这是因为在 Typescript 中,具体对象应该有一个类型模板。Typescript 中的对象必须是特定类型的实例。

您可以通过在声明中使用方法模板来解决此问题。

示例:Typescript 类型模板


var person = {firstName:"Tom", lastName:"Hanks", sayHello:function() {  }  //Type template 
} 
person.sayHello = function() {  console.log("hello "+person.firstName)
}  
person.sayHello()

编译时,它将在 JavaScript 中生成相同的代码。

上述代码的输出如下 -

hello Tom

对象也可以作为参数传递给函数。

示例:对象作为函数参数


var person = { firstname:"Tom", lastname:"Hanks" 
}; 
var invokeperson = function(obj: { firstname:string, lastname :string }) { console.log("first name :"+obj.firstname) console.log("last name :"+obj.lastname) 
} 
invokeperson(person)

该示例声明了一个对象文字。函数表达式是通过传递 person 对象来调用的。

编译时,它将生成以下 JavaScript 代码。


//Generated by typescript 1.8.10
var person = {firstname: "Tom",lastname: "Hanks"
};var invokeperson = function (obj) {console.log("first name :" + obj.firstname);console.log("last name :" + obj.lastname);
};invokeperson(person);

其输出如下 -

first name :Tom 
last name :Hanks

您可以动态创建并传递匿名对象。

示例:匿名对象


var invokeperson = function(obj:{ firstname:string, lastname :string}) { console.log("first name :"+obj.firstname) console.log("last name :"+obj.lastname) 
} 
invokeperson({firstname:"Sachin",lastname:"Tendulkar"});

编译时,它将生成以下 JavaScript 代码。


//Generated by typescript 1.8.10
var invokeperson = function (obj) {console.log("first name :" + obj.firstname);console.log("last name :" + obj.lastname);
};invokeperson({ firstname: "Sachin", lastname: "Tendulkar" });
invokeperson({ firstname: "Sachin", lastname: "Tendulkar" });

其输出如下 -

first name :Sachin 
last name :Tendulkar

鸭子打字

在鸭子类型中,如果两个对象共享相同的属性集,则两个对象被认为是同一类型。鸭子类型验证对象中是否存在某些属性,而不是它们的实际类型,以检查它们的适用性。这个概念通常用以下短语来解释 -

“当我看到一只鸟像鸭子一样走路、像鸭子一样游泳、像鸭子一样嘎嘎叫时,我就称那只鸟为鸭子。”

TypeScript 编译器实现了鸭子类型系统,允许动态创建对象,同时保持类型安全。下面的示例展示了如何将未显式实现接口但包含函数所需的所有成员的对象传递给函数。

例子


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} 
} //Valid 
var newPoint = addPoints({x:3,y:4},{x:5,y:1})  //Error 
var newPoint2 = addPoints({x:1},{x:4,y:3})

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

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

相关文章

react 路由的基本原理及实现

1. react 路由原理 不同路径渲染不同的组件 有两种实现方式 ● HasRouter 利用hash实现路由切换 ● BrowserRouter 实现h5 API实现路由切换 1. 1 HasRouter 利用hash 实现路由切换 1.2 BrowserRouter 利用h5 Api实现路由的切换 1.2.1 history HTML5规范给我们提供了一个…

GB28181 —— Ubuntu20.04下使用ZLMediaKit+WVP搭建GB28181流媒体监控平台(连接带云台摄像机)

最终效果 简介 GB28181协议是视频监控领域的国家标准。该标准规定了公共安全视频监控联网系统的互联结构, 传输、交换、控制的基本要求和安全性要求, 以及控制、传输流程和协议接口等技术要求,是视频监控领域的国家标准。GB28181协议信令层面使用的是SIP(Session Initiatio…

FPFH特征匹配以及ransac粗配准

一、代码 Python import open3d as o3d import numpy as npdef extract_points(point_cloud, salient_radius5, non_max_radius5, gamma_210.95, gamma_320.95, min_neighbors6):keypoints o3d.geometry.keypoint.compute_iss_keypoints(point_cloud,salient_radiussalient_…

【MATLAB源码-第151期】基于matlab的开普勒化算法(KOA)无人机三维路径规划,输出做短路径图和适应度曲线。

操作环境: MATLAB 2022a 1、算法描述 开普勒优化算法(Kepler Optimization Algorithm, KOA)是一个虚构的、灵感来自天文学的优化算法,它借鉴了开普勒行星运动定律的概念来设计。在这个构想中,算法模仿行星围绕太阳的…

Windows下查看端口占用以及关闭该端口程序

打开命令窗口 windowsR 输入 cmd 查看所有运行端口 netstat -ano 该命令列出所有端口的使用情况。 在列表中我们观察被占用的端口,比如是 80,首先找到它。 查看被占用端口对应的 PID netstat -aon|findstr "80" 回车执行该命令&#xff…

StarRocks——Stream Load 事务接口实现原理

目录 前言 一、StarRocks 数据导入 二、StarRocks 事务写入原理 三、InLong 实时写入StarRocks原理 3.1 InLong概述 3.2 基本原理 3.3 详细流程 3.3.1 任务写入数据 3.3.2 任务保存检查点 3.3.3 任务如何确认保存点成功 3.3.4 任务如何初始化 3.4 Exactly Once 保证…

windows安装部署node.js并搭建Vue项目

一、官网下载安装包 官网地址:https://nodejs.org/zh-cn/download/ 二、安装程序 1、安装过程 如果有C/C编程的需求,勾选一下下图所示的部分,没有的话除了选择一下node.js安装路径,直接一路next 2、测试安装是否成功 【winR】…

Python 实现Excel自动化办公(中)

在上一篇文章的基础上进行一些特殊的处理,这里的特殊处理主要是涉及到了日期格式数据的处理(上一篇文章大家估计也看到了日期数据的处理是不对的)以及常用的聚合数据统计处理,可以有效的实现你的常用统计要求。代码如下&#xff1…

kotlin与java的相互转换

Kotlin转java 将kotlin代码反编译成java Tools -> Kotlin -> Show Kotlin Bytecode 然后点击 【Decompile】 生成java代码 java转kotlin Code -> Convert Java File To Kotlin File

在Node.js中如何实现用户身份验证和授权

当涉及到构建安全的应用程序时,用户身份验证和授权是至关重要的一环。在Node.js中,我们可以利用一些流行的库和技术来实现这些功能,确保我们的应用程序具有所需的安全性。本篇博客将介绍如何在Node.js中实现用户身份验证和授权。 用户身份验…

[数据集][目标检测]狗狗表情识别VOC+YOLO格式3971张4类别

数据集格式:Pascal VOC格式YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):3971 标注数量(xml文件个数):3971 标注数量(txt文件个数):3971 标注…

“智农”-农业一体化管控平台

大棚可视化|设施农业可视化|农业元宇宙|农业数字孪生|大棚物联网|大棚数字孪生|农业一体化管控平台|智慧农业可视化|智农|农业物联网可视化|农业物联网数字孪生|智慧农业|大棚三维可视化|智慧大棚可视化|智慧大棚|农业智慧园区|数字农业|数字大棚|农业大脑|智慧牧业数字孪生|智…