TS里interface和type

Posted 2023-04-11

参考技术A TS里interface和type怎么用的，区别是什么？

一.interface 最常见的是：对象类型接口；

1.对象类型接口用于定义对象的类型：

interface IPerson

name:string;

age:number;



let tom:IPerson=

name:’Tom’;

age:25;



1. 接口中未定义的属性不能在对象中使用，会报错；

2. 对象的属性个数必须和接口的属性个数完全一致，除非使用了‘?’的可选属性；

3. 对象接口的几个属性：

interface IPerson

name:string;——>确定属性

age?:number;——>可选属性

readonly id:number;——>只读属性

[propName:string]:any;——>任意属性：表示的是属性名是字符串类型，属性值是任意值类型



4. 注意：一旦使用了任意属性，那么，确定属性和可选属性的属性值类型必须是任意属性值类型的子集（一致或者是子集）；

如：如果[propName:string]:string，那么age?:number就会报错

5.只读属性只能在定义接口类型的时候赋值，如在接口中，但不能在其他地方重新赋值（因为它是只读的属性，不能重新赋值）；

interface FullName

     firstName:string;

     secondName:string;



function printName(name:FullName)

     console.log(name.firstName);



let obj=//传入的参数必须包含firstName和secondName,但可以有其他参数；

//如果直接传入，就会报错，直接传入只能是firstName和secondName，不能包含 其他的；

     age:20,

     firstName:'张',

     secondName:'三'

;

printName(obj);

//2.函数类型接口：

interface encrypt

(key:string,value:string):string;



let md5:encrypt=(key:string,value:string):string=>

return key+value;

;

console.log(md5('name', 'zhangsan'));

二.type是类型别名, 就是给类型起一个新名字，必须使用type对新名字进行定义；

如：type Name=string;

如：type a=string | number;

如：type NameResolver=()=>string;这里的‘=>’不表示箭头函数，箭头左边表示形参，右边表示返回值；

1. 类型别名，常用于联合类型，如：type a=string | number;

2. 使用’typeof 变量’，拿到变量的类型；

3. 类型别名和字符串字面量类型都必须使用type进行定义；

错误：node_modules/@types/jasmine/index.d.ts:668:15 - 错误 TS2430：接口 'FunctionMatchers<Fn>' 错误地扩展了接

【中文标题】错误：node_modules/@types/jasmine/index.d.ts:668:15 - 错误 TS2430：接口 \'FunctionMatchers<Fn>\' 错误地扩展了接口 \'Matchers<any>\'

【英文标题】：Error: node_modules/@types/jasmine/index.d.ts:668:15 - error TS2430: Interface 'FunctionMatchers<Fn>' incorrectly extends interface 'Matchers<any>'错误：node_modules/@types/jasmine/index.d.ts:668:15 - 错误 TS2430：接口 'FunctionMatchers<Fn>' 错误地扩展了接口 'Matchers<any>'

【发布时间】：2021-07-26 11:22:48

【问题描述】：

谁能告诉我为什么会出现这个问题以及如何解决它。

错误：node_modules/@types/jasmine/index.d.ts:668:15 - 错误 TS2430：接口“FunctionMatchers”错误地扩展了接口“Matchers”。 'toHaveBeenCalledWith(...)' 返回的类型在这些类型之间不兼容。类型 'boolean' 不可分配给类型 'Promise' 接口 FunctionMatchers 扩展 Matchers

【问题讨论】：

你应该更新代码。

您找到解决方案了吗？

【参考方案1】：

更新@types/jasminewd2 为我解决了这个问题

ng update @types/jasminewd2