TypeScript:“鸭式辨型法”或“结构性子类型化”-接口!

「这是我参与11月更文挑战的第5天,活动详情查看:2021最后一次更文挑战」

前言

接口的作用就是为对值所具有的 结构 进行类型检查命名和为你的代码或第三方代码定义契约

简单小栗子

如果我们定义一个函数,且该函数需要传入一个具有value键值的对象的参数

function test(obj: { value: string }) {
    console.log(obj.value); 
}

很简单是不是,下面我们重写一下方法,并为其参数添加接口

interface Parameter {
    value: string; 
}
function test(obj: Parameter) { 
    console.log(obj.value); 
}

接口就好比一个名字,用来描述上面例子里的要求。

它代表了有一个value属性且类型为string的对象。

值得提的是,类型检查器不会去检查属性的顺序,只要相应javascript的属性存在并且类型也是对的就可以。

可选属性

就和函数一样,有些属性可以是不全需要的,有些只是个别javascript百炼成仙情况下需要,有些或者根本不存在的!
那我们继续稍微改造一下上面的方法!

interface Parameter {
    value: string; 
    name?: string;
}
function test(obj: Parameter) { 
    console.log(obj.value); 
    if(obj.name) {
        console.log(obj.name); 
    }
}

可选属性的好处之一是可以对可能存在的属性进行预定义,好处之二是可以捕获引用了不存在的属性时的错误。比如说,这里我们还是用上面的例子,我们再调用 obj参数的时候,输索引失效的几种情况入错误索引obj.value1就会得到一个错误提示java面试题

function test(obj: Parameter) {
    console.log(obj.value1);  // 报错 Property 'value1' does not exist on type 'Parameter'. Did you mean 'value'?
}

Property 'valjavascriptue1' does not exist on type 'Parameter'. Did you mean 'value'?

我们就会接口和抽象类的区别得到这样的报错,很贴心是不是?

只读属性

一些对象属性变量值只能变量值在对象刚刚创建的时候修改其值。这就有点像const常量了,当然还有Object.freeze了,不过这两个还是有区别的;

let my_copy = {
    foo: 100
}
Object.freeze(my_copy)
const obj =  {
    foo: 100
}
  • co索引页是哪一页nst: 作用于变量;你可以把一个 对象作为一个变量,但是你还可以继续修改这个对象下面的值,但是你直接对这个变量进行修改却不行

    obj.foo = 7 // 允许
    obj = 7 // 语法错误
    
  • Object.freeze: 作用于值,你不能修改修改他下面的值,却可以对其变量进行赋值

    my_copy.foo = 7 // 允许 但是值没有被改变
    my_copy = 7 // 允许
    

索引的作用远了java是什么意思,进入正题
一些对象属性只能在对象刚刚创建的时候修改其值。 你可以在属性名前用 readonly来指定只读属性:

interface Readonlyinterface {
    readonly x: number; 
    readonly y: number; 
}
let test: Readonlyinterface = { x: 10, y: 20 };
test.x = 5; // Cannot assign to 'x' because it is a constant or a read-only property.

不能赋值给’x’,因为它是常数或只读属性。

函数类型

接口能够描述JavaScript中对象拥有的各种各样的外形,索引失效接口甚至也可以描述函数类型。

interface add {
    (x: number, y: number): string; 
}
let myAdd: add;
myAdd = function(x: number, y: number) { 
    return `${x}+${y}等于多少呢?`; 
}

可索引类型

可索引类型具有一个索引签名,我们甚至可以用他来描述一些我们不知道属性名的对象,让我们看一个例子:

interface Test {
  [index: number]: string;
}
let myArray: Test;
myArray = ["Bob", "Fred"];

甚至还可以

interface Test {
  [index: number]: string;
}
let myObject: Test;
myArray = {
    1:'1',
    2:'2'
};

最后献上文档:
www.tslang.cn/docs/hajava面试题ndbo…

发表评论

提供最优质的资源集合

立即查看 了解详情