TypeScript接口

1、基本使用

借口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法

接口也是一种数据类型

格式：interface interface_name {}

export default{}
​
// 基本使用
// 语法格式
// interface interface_name{}
interface IFullName{
    fristName:string,
    lastName:string
}
let goddassName:IFullName={
    fristName:"舒",
    lastName:"畅"
}
console.log(goddassName);
​
function name({fristName,lastName}:IFullName):void {
    console.log(`我的姓名是:${fristName}${lastName}`);
}
name(goddassName)

2、可选属性与只读属性

• 可选属性使用: ?

• 只读属性使用: readonly

• readonly与const的区别:做为变量使用的话用const，若做为属性则使用readonly

export default{}
​
// 可选属性:  ?
interface IFullName{
    fristName:string,
    lastName:string,
    sex?:string
}
​
let name1:IFullName={
    fristName:"石昊",
    lastName:"最爱吃兽奶",
    sex:"荒天帝"//可写可不写
}
console.log(name1.fristName,name1.lastName);
​
// 只读属性
interface IInfo{
    readonly name:string
    readonly ages:number
}
let beauty:IInfo={
    name:"杨幂",
    ages:19
}
// beauty.name="赵丽颖"; //报错
console.log(beauty.name,beauty.ages)

3、索引签名

• 定义:索引签名用于描述那些"道过索引得到"的类型

• 格式:如[props:string]:any

• 应用场景:解决参数问题

export default{}
​
// 解决参数可多可少的问题
// 方案一：使用可选参数
interface IFullName{
    firstName:string
    lastName:string
    // age?:number
}
let goddass1:IFullName={firstName:"刘",lastName:"亦菲"}
// let goddass2:IFullName={firstName:"刘",lastName:"亦菲",age:18};
​
// 方案二：使用变量
let info=({ firstName: "杨", lastName: "幂", age: 18, song: "爱的供养", tv: "仙剑奇侠传三" }) as unknown as IFullName;
​
// 索引签名
interface IFullName{
    [props:string]:string
}
​
let goddass5={name1:"刘亦菲",name2:"刘诗诗",name3:"赵丽颖"};
​
interface IAge{
    [props:string]:number
}
​
let ages={age1:10,age2:20,age3:30}
​
interface IMyFullName{
    firstName:string
    lasName:string
    [props:string]:string
}
​
let goddass6:IMyFullName={
    firstName:"刘",
    lasName:"亦菲",
    sex:"女",
    mobile:"123456789"
}
let goddass7:IMyFullName={
    firstName:"刘",
    lasName:"亦菲",
    tv:"甄嬛传"
}
console.log(goddass1);
​
console.log(goddass5)
console.log(goddass6)
console.log(goddass7)

4、函数接口

为了使用接口表示函数类型，需要给接口定义一个调用签名

他就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型

export default{}
​
// 定义函数接口
interface IMyFullName{
    (salary:number,reward:number):number
}
let sum:IMyFullName=function (x:number,y:number):number{
    return x+y;
}
let res=sum(100,1000);
console.log(res);

5、接口的继承

• 接口继承就是说接口可以通过其他接口来扩展自己

• TS允许接口继承多个接口

• 继承使用关键字extends

export default{}
​
// 单继承
interface IPerson{
    age:number
}
interface INname extends IPerson{
    name:string
}
let person:INname={
    name:"王思聪",
    age:18
}
​
// 多继承
interface IFatherMoney{
    m1:number
}
interface IMontherMoney{
    m2:number
}
interface ISonMoney extends IFatherMoney,IMontherMoney{
    s1:number
}
let sonMoney:ISonMoney={
    m1:1000,
    m2:10000,
    s1:1
}
console.log(sonMoney.m1)
console.log(sonMoney.m2)
console.log(sonMoney.s1)

6、接口与类型别名的异同

1 .相同点:

• 都可以描述属性或方法

• 都允许拓展

2.不同点:

• type可以声明基本数据类型，联合类型，数组等; interface只能声明娈量

• 当出现使用type和interface声明同名的数据时;type会直接报错;interface会进行组合-

• type不会白动合并;interface会

export default{}
​
// 相同点：都可以描述属性 和方法
type WomanStar = {
    name: string,
    age: number,
    show(): void
}
 
interface IWomanStar {
    name: string,
    age: number,
    show(): void
}
// 类型别名
let star1: WomanStar = {
    name: "张三",
    age: 34,
    show() {
        console.log("show1");
    }
}
let star2: IWomanStar = {
    name: "张四",
    age: 23,
    show() {
        console.log("show2");
    }
}
console.log(star1);
console.log(star2);
​
// 都可以扩展
type Fnn1 = {
    name: string
}
type Fnn2 = Fnn1 & {
    name2: number
}
let sum: Fnn2 = {
    name: "张三",
    name2: 34
}
console.log(sum.name, sum.name2);
// 别名
interface Qnn1 {
    age: string
}
interface Qnn2 extends Qnn1 {
    age1: number
}
// 接口
let star: Qnn2 = {
    age: "张武",
    age1: 23
}
console.log(star);
​
//  不同点
// 1.type可以声明基本数据类型，联合类型，数组等
type a = number;
type b = string;
type c = string[];
type d = [number | string]
 
// interface只能声明变量
// interface s = string  //报错
 
// 2.当出现使用type和interface声明同名变量时
// type会直接报错
// type Name = {
//     name: string
// }
// type Name = {
//     name: string
// } //报错
 
 
// interface会进行组合
interface Age {
    age: number
}
interface Age {
    age: number,
    name: string
}
let Sum: Age = {
    age: 34,
    name: "赵四"
}
console.log(Sum.age);