TypeScript 对象

对象是包含一组键值对的实例。 值可以是标量、函数、数组、对象等,如下实例:

var object_name = { key1: "value1", // 标量 key2: "value", key3: function() { // 函数 }, key4:["content1", "content2"] //集合 }

以上对象包含了标量,函数,集合(数组或元组)。

对象实例

TypeScript

var sites = { site1:"Runoob", site2:"Google" }; // 访问对象的值 console.log(sites.site1) console.log(sites.site2)

编译以上代码,得到以下 JavaScript 代码:

JavaScript

var sites = { site1:"Runoob", site2:"Google" }; // 访问对象的值 console.log(sites.site1) console.log(sites.site2)

输出结果为:

Runoob
Google

TypeScript 类型模板

假如我们在 JavaScript 定义了一个对象:

var sites = { site1:"Runoob", site2:"Google" };

这时如果我们想在对象中添加方法,可以做以下修改:

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

如果在 TypeScript 中使用以上方式则会出现编译错误,因为Typescript 中的对象必须是特定类型的实例。

TypeScript

var sites = { site1: "Runoob", site2: "Google", sayHello: function () { } // 类型模板 }; sites.sayHello = function () { console.log("hello " + sites.site1); }; sites.sayHello();

编译以上代码,得到以下 JavaScript 代码:

JavaScript

var sites = { site1: "Runoob", site2: "Google", sayHello: function () { } // 类型模板 }; sites.sayHello = function () { console.log("hello " + sites.site1); }; sites.sayHello();

输出结果为:

hello Runoob

此外对象也可以作为一个参数传递给函数,如下实例:

TypeScript

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 代码:

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

鸭子类型(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})

TypeScript 对象的更多相关文章

  1. [TypeScript] TypeScript对象转JSON字符串范例

    [TypeScript] TypeScript对象转JSON字符串范例 Playground http://tinyurl.com/njbrnrv Samples class DataTable { ...

  2. [TypeScript] JSON对象转TypeScript对象范例

    [TypeScript] JSON对象转TypeScript对象范例 Playground http://tinyurl.com/nv4x9ak Samples class DataTable { p ...

  3. TypeScript入门三:TypeScript函数类型

    TypeScript函数类型 TypeScript函数的参数 TypeScript函数的this与箭头函数 TypeScript函数重载 一.TypeScript函数类型 在上一篇博客中已经对声明Ty ...

  4. JcApiHelper 简单好用的.Net ApiHelper

    一 背景 随着前端技术的不断发展,各种框架逐渐成熟,前端 Angular,React,Vue 三分天下.再加上移动端的崛起,前后端分离开发成为主流,前端后端代码混合开发的方式沦为被淘汰的局面.如今 M ...

  5. 用TypeScript开发Vue——如何通过vue实例化对象访问实际ViewModel对象

    用TypeScript开发Vue--如何通过vue实例化对象访问实际ViewModel对象 背景 我个人很喜欢TypeScript也很喜欢Vue,但在两者共同使用的时候遇到一个问题. Vue的实例化对 ...

  6. typeScript面对对象篇二

    接口 接触过面向对象的后端语言的应该对接口很熟悉,只接触过前端的对接口会有点陌生,在维基百科中对OOP中接口的定义是这样的: 在面向对象的语言中,术语interface经常被用来定义一个不包含数据和逻 ...

  7. typeScript面对对象篇一

    面向对象是typescript的核心部分,这里先介绍下面向对象的七大原则: 单一原则:一个类子负责一个职责. 里氏替换原则:子类可以在任何地方替换它的父类. 依赖倒置原则:代码要依赖于抽象的类,而不要 ...

  8. 在TypeScript中扩展JavaScript基础对象的功能

    最近工作中用到,记录一下:假设我们需要一个功能,把一个数字比如10000输出为下面的字符串格式“10,000”,一般是写一个方法,那么我希望更方便一点,直接向Number类型添加一个格式化方法,比如叫 ...

  9. Angular2中实现基于TypeScript的对象合并方法:extend()

    TypeScript里面没有现成的合并对象的方法,这里借鉴jQuery里的$.extend()方法.写了一个TypeScript的对象合并方法,使用方法和jQuery一样. 部分代码和jQuery代码 ...

  10. TypeScript 中限制对象键名的取值范围

    当我们使用 TypeScript 时,我们想利用它提供的类型系统限制代码的方方面面,对象的键值,也不例外. 譬如我们有个对象存储每个年级的人名,类型大概长这样: type Students = Rec ...

随机推荐

  1. iOS开发之各机型屏幕大小与键盘高度整理

    机型 屏幕宽 屏幕高 键盘高 iPhone 8 375 667 260 iPhone 8 Plus 414 736 271 iPhone X 375 812 336 iPhone Xs 375 812 ...

  2. vue-cli 根据不同的环境打包

    根据项目需要,通过vue-cli中的npm run build 打包到不同的环境,例如测试环境,预发布环境,线上环境,根据process.env分别进行接口的调用 vue-cli 中build中bui ...

  3. JavaWeb 验证码

    package com.gen; import javax.imageio.ImageIO; import javax.servlet.ServletException; import javax.s ...

  4. WCF学习系列---1、新建第一个WCF服务

    一.了解.Net平台下的分布式技术 1.WebService:基于Http协议的Soap模式 2.Remoting :也是一种分布式架构技术,常常用于TCP模式的二进制传输 3.MSMQ:这是一种分布 ...

  5. 我常用的Linux快捷命令

    alias 设置快捷自定义命令 语法: alias 快捷命令='完整命令' 因为可以直接把上述当成一条语句来执行,但是服务器重启之后会失效,被称为临时快捷命令: 但是!将他写入 ~/.bashrc 文 ...

  6. Python-numpy基本用法

    import numpy as np import numpy as np #导入numpy库 _version_显示版本号 show_config() 显示配置文件 print(np.__versi ...

  7. linux中用crontab定时任务启动jar无效

    修改前脚本内容如下: #!/bin/bash nohup java -Xms512m -Xmx512m -jar /opt/jar/xx-0.0.1-SNAPSHOT.jar & 检查了各方面 ...

  8. Ubuntu20.04修改环境变量失误导致开机循环——解决方法以及保存profile

    gedit /etc/profile配置Ubuntu环境变量时出现失误导致开机时输入密码后重复开机无法进入图画界面 解决方法:ctrl+alt+(F1~F6),我的是ctrl+alt+F2进入界面 输 ...

  9. axios响应拦截器无法显示响应头问题

    Access-Control-Expose-Headers 响应报头.跨域 公开响应头 问题现象: 前端无法获取响应头 Response Header 原因 问题原因:跨域问题 启用跨域请求(CORS ...

  10. vue-seamless-scroll 组件用法-区域内容滚动效果

    1.滚动效果 2.代码 <div class="page-container" style=""> <vue-seamless-scroll ...