TypeScript|玩转TypeScript对象、对象作为参数进行函数传递、接口和内置对象[无敌态] javascript|开发语言|typescript

大家好，这里是X，今天带来的是TypeScript的知识，说到TypeScript，今天必须夸一下，早就想出关于TypeScript的知识啦，现在速来，今天带来的是我最喜欢的一个部分之一，那就接口和内置对象这一块，感受一下typescript不同的魅力

【TypeScript|玩转TypeScript对象、对象作为参数进行函数传递、接口和内置对象[无敌态]】

文章图片

文章目录

对象
- 初识对象
- 对象作为函数传递
接口
- 基本使用
- “合并大法”
- 不是每个人都需要
内置变量
- 无敌状态

对象初识对象对象是包含一组键值对的实例。值可以是标量、函数、数组、对象、集合等
Typescript 中的对象必须是特定类型的实例
上菜

let person = { name: "张三", age: 18, hi: function () {}, content: ["content1", "content2"]//集合 } person.hi = function (){ console.log("你好"); } person.hi(); console.log(person);

请问：在后面的两个输出中，输出的结果中hi()函数里的“你好”会被输出几次？

答：一次。
让我们来看看输出结果：

文章图片

可以看到，第一次是输出了“你好”，但是当我们将person输出的时候，他输出的结果为，额…这是个啥？
这可以理解为类型模板
对象作为函数传递对象创建的目的，大多都是为了在函数中体现它的作用，在TypeScript中对象作为参数进行传递不像Java和c，来看一个例子：

let person = { name: "张三", age: 18, hi: function () {}, content: ["content1", "content2"]//集合 } person.hi = function (){ console.log("你好"); } // 传递的参数必须和对象的保持一致，否则报错 let f1 = function(obj: {name: string, age: number}){ console.log("s1=="+obj.name); console.log("s2=="+obj.age); } console.log(f1(person));

文章图片

这里我们只用了name和age，函数和集合都没有使用，它就会直接以undefined结尾
与java、c最大的区别就是参数名问题，参数名必须和对象的属性名字保持一致，不然会报错，直接传递你想要的那个对象属性即可，这时有人会问，可不可以像Java那样，我直接传递一个对象过去，不需要在框框里写属性，这个呢，是不可以的

文章图片

报错：类型“{}”上不存在属性“name”。
接口基本使用接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。
终于来到我最爱的接口了?♀?
接口和对象很像，你可以认为是“加强版”对象，相当于制定了一套规则

interface p { name: string, age: number, hi: ()=>string } let pt1: p={ name: "张三", age:18, hi: ():string => {return "你好"} } console.log(pt1.name); console.log(pt1.age); let pt:string = pt1.hi(); console.log(pt);

文章图片

“合并大法” 讲到接口，不得不讲到它的特别牛逼的一个点，那就是“合并”，假设我现在在接口p里我想增加一个属性，我除了在p里增加外，我还可以：

interface p { name: string, age: number, hi: ()=>string } interface p { school:string } let pt1: p={ name: "张三", age:18, hi: ():string => {return "你好"}, school: "xxxx大学" }

当两个接口名称一致的时候，他会自动合并这两个接口为一个接口，我如果用的话，可能就是一个单纯放属性，另一个放方法，当然，这里仅仅是为了测试
不是每个人都需要在定义接口，并且使用的时候，每次都要将接口里所有的属性和方法都实现，这个时候会造成一定的不便，如果某一个属性不是必须的，那么我们可以在这个属性定义的时候加一个“?”
例如：年龄不是必须的：

interface p { name: string, age?: number, hi: ()=>string } interface p { school:string } let pt1: p={ name: "张三", age:18, hi: ():string => {return "你好"}, school: "xxxx大学" } let pt2: p={ name: "张三", hi: ():string => {return "你好"}, school: "xxxx大学" }

内置变量无敌状态这个状态主要为了应对“后台传过来的数据问题”，如果你不知道后台会给你返回多少数据个数、类型的时候，可以使用内置变量来解决，并且还具备类似input标签的disable属性的功能readonly，如果修改它的话会报错?
定义一个接口person：有只读属性name，可选变量age，函数a，和内置变量

interface person { readonly name: string, age?: number, a() :void, [propNames: string]:any }let p:person ={ name: "张三", abc: "123", ff: 123, a: () => { console.log("你好"); } } console.log(p);

[propNames: string]:any：接收的字段名称为string[一般不变，propNnames不是固定的，名字随意]，然后这个字段的类型为any，这样就可以随意定义变量和类型啦