TS学习笔记（二）：接口 Interface

接口：interface

基本使用

interface IUser {
  name: string;
}

function print(user: IUser) {
  console.log(user.name);
}

let user1 = { name: "Joker", age: 18 };
print(user1);// Joker

通过以上例子可以得知：

• 1. 通过interface定义一个接口，其描述了一组属性名和类型规则，可以作为变量的类型使用
• 2. interface作为函数中传入参数的类型，只会检查其中必要的属性是否存在，如上方user1存在age属性但并未报错

可选属性

可选属性名后添加 ? 即可

interface IUser {
  name: string;
  age?: number
}
function print(user: IUser) {
  console.log(user.age);
}
let user1 = { name: "Joker" };
print(user1); // 不会报错，打印undefined

只读属性

只读属性名前加readonly关键字即可

interface IUser{
    readonly name: string
}

• readonly和const：都是不可修改的，属性使用readonly，常量使用const

额外属性

使用[propName: string]: any;作为属性，表示可以有其他任意地属性

interface IUser {
  name: string;
  [propName: string]: any;
}

函数类型

可以作为函数的类型使用

interface IFunc{
    (a:number):number
}
let x: IFunc
x=function(a:number){
    console.log(a)
    return 0
}

可索引类型

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

泛型类型

使用 <> 包裹类型参数，并在使用时传入参数类型

interface IUser<T> {
  name: T;
}
function print(user: IUser<string>) {
  console.log(user.name);
}
let user1 = { name: "Joker" };
print(user1);

extends继承和implements实现

• 实现，一般用在类中

interface IUser {
  name: string;
}
class User implements IUser{
    name:string // 此时必须要有name属性
}

• 继承，一般用在接口中

interface IPerson {
  name: string;
}
// 此时IUser包含两个属性：name、age
interface IUser extends IPerson {
  age: number;
}
function print(user: IUser) {
  console.log(user.name);
}
let user1 = { name: "Joker", age: 18 };
print(user1);

可以继承多个接口

interface IBoss {
  level: number;
}
interface IPerson {
  name: string;
}
interface IUser extends IPerson, IBoss {
  age: number;
}
let user1 = { name: "Joker", age: 18, level: 10 };

type和interface

相同点：

• 都可以声明对象或函数类型
• 都可以被继承extends且两者可以互相继承

不同点：

• type可以声明基本数据类型，interface不能

type Name = string

• type可以使用typeof获取类型后赋值

let a: string = 'hi'
type x = typeof a

• interface可以声明合并

interface User { 
    name: string 
    age: number 
} 
interface User { 
    sex: string 
} 
/* User 接口为 { 
    name: string 
    age: number 
    sex: string 
} 
*/