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

大家好，这里是X，今天带来的是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，这样就可以随意定义变量和类型啦

可以看到ff是我们新定义的，接口里并没有，可谓为“无敌状态”

这篇好文章是转载于：学新通技术网