开心档之TypeScript 对象

简介: 开心档之TypeScript 对象

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})


目录
相关文章
|
6月前
|
存储 JavaScript
如何理解TypeScript 对象
如何理解TypeScript 对象
70 1
|
JavaScript 前端开发
开心档之TypeScript 命名空间
开心档之TypeScript 命名空间
47 0
|
JavaScript
开心档之TypeScript String(字符串)
开心档之TypeScript String(字符串)
39 0
|
2月前
|
JavaScript
typeScript基础(5)_对象的类型-interfaces接口
本文介绍了TypeScript中接口(interfaces)的基本概念和用法,包括如何定义接口、接口的简单使用、自定义属性、以及如何使用`readonly`关键字定义只读属性。接口在TypeScript中是定义对象形状的重要方式,可以规定对象的必有属性、可选属性、自定义属性和只读属性。
39 1
|
3月前
|
开发框架 缓存 前端开发
基于SqlSugar的开发框架循序渐进介绍(14)-- 基于Vue3+TypeScript的全局对象的注入和使用
基于SqlSugar的开发框架循序渐进介绍(14)-- 基于Vue3+TypeScript的全局对象的注入和使用
|
3月前
|
开发框架 前端开发 JavaScript
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口
在基于vue-next-admin的Vue3+TypeScript前端项目中,为了使用方便全局挂载对象接口
|
3月前
|
JavaScript 前端开发 API
Vue 3+TypeScript项目实战:解锁vue-next-admin中的全局挂载对象接口,让跨组件共享变得高效而优雅!
【8月更文挑战第3天】在构建Vue 3与TypeScript及vue-next-admin框架的应用时,为提高多组件间共享数据或方法的效率和可维护性,全局挂载对象接口成为关键。本文通过问答形式介绍其必要性和实现方法:首先定义全局接口及其实现,如日期格式化工具;接着在`main.ts`中通过`app.config.globalProperties`将其挂载;最后在组件内通过Composition API的`getCurrentInstance`访问。这种方式简化了跨组件通信,增强了代码复用性和维护性。
56 0
|
5月前
|
JavaScript 安全
TypeScript类型(数字、字符串、字面量、数组、元组、枚举、对象等)
TypeScript类型(数字、字符串、字面量、数组、元组、枚举、对象等)
|
JavaScript 前端开发
TypeScript 对象
TypeScript 对象
33 0
|
JavaScript 前端开发
开心档之TypeScript 模块
开心档之TypeScript 模块
40 0