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

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

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

文章目录

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

对象

初识对象

对象是包含一组键值对的实例。 值可以是标量、函数、数组、对象、集合等
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那样,我直接传递一个对象过去,不需要在框框里写属性,这个呢,是不可以的
玩转TypeScript对象、对象作为参数进行函数传递、接口和内置对象[无敌态]_第2张图片
报错:类型“{}”上不存在属性“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是我们新定义的,接口里并没有,可谓为“无敌状态”

你可能感兴趣的:(TypeScript,typescript,javascript,开发语言)