接口 索引签名 接口与类型别名的异同 接口的继承 函数接口

接口的基本使用  (接口也是一种数据类型)

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

export default {}
interface IFullName {
    firstName: string,
    lastName: string
}
let name: IFullName = {
    firstName: "张",
    lastName: "老六"
}
console.log(name.firstName, name.lastName);

function say({ firstName, lastName }: IFullName): void {
    console.log(`你真是个${firstName}${lastName}`)
}
say(name)

 可选属性与只读属性

可选属性使用 : ?

只读属性使用:readonly

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

export default {}
// 可选属性用 ? 来进行修饰
interface IFullName {
    firstName: string,
    lastName: string,
    age?: number
}
let goddassName: IFullName = {
    firstName: "张三",
    lastName: "赵四",
    age: 34
}
console.log(goddassName.firstName);
console.log(goddassName.lastName);
// console.log("ss");

// 只读属性
//顾名思义就是这个属性是不可以修改的,对象属性只能在对象刚刚创建的时候修改其值。 你可以在属性名前用 readonly来指定只读属性
interface IInfo {
    readonly name: string,
    readonly age: number
}
let info: IInfo = {
    name: "张三",
    age: 23
}
// console.log(info.name);
// console.log(info.age);

// info.name="赵四" //不可以修改
// info.age=34  //不可以修改

 索引签名

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

格式:如[props:string]:any

应用场景:解决参数问题的物种 方法

export default {}

interface IFullName {
    firstName: string,
    lastName: string,
    age?: number,
    singName?: string,
    [props: string]: any
}
// 注意点:如果使用接口来限定变量或者形参,那么再给变量或者形参赋值的时候,多一个或少一个都不行    
//    (实际开发中往往会出现多或者少的情况怎样解决)
// 方案一  解决方案:可选属性
let goddass1: IFullName = { firstName: "杨", lastName: "张三" }
let goddass2: IFullName = { firstName: "李", lastName: "赵四", age: 43, singName: "赵一" }
// 方案二 解决方案使用变量
let info = { firstName: "杨", lastName: "张三", song: "song" }
let goddass3: IFullName = info;
// console.log(goddass3);    //{ firstName: '杨', lastName: '张三', song: 'song' }
// 第三种方案 使用类型断言
let goddass4: IFullName = ({ firstName: "赵四", lasrName: "赵四", age: 12, ssss: 43 }) as IFullName;
console.log(goddass4);
// 第四种方案 索引签名
interface IBeauty {
    [props: string]: string
}
let IBeauty = { fristName: "张", last: "三", age: "十岁" }
console.log(IBeauty);
interface IAge {
    [props: string]: number
}
let ages = { age: 43, num: 32, sum: 64 }
// 案例
interface IMyFullName {
    first: string,
    last: string,
    [props: string]: string
}
let goddass5: IMyFullName = { first: "张三", last: "张四", sex: "女" }

函数接口

export default {}

interface IMyFullName {
    (salary: number, rewary: number): number
}
let sum: IMyFullName = function (x: number, y: number): number {
    return x + y
}
let he = sum(1, 4)
console.log(he);

接口的继承   

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

TS允许接口继承多个接口

继承使用关键字extends

单继承  多继承

export default {}
// 单继承
interface IMyFullName {
    age: number
}
//        子                父 
interface firstName extends IMyFullName {
    name: string

}
let lady: firstName = {
    name: "张三",
    age: 43
}
console.log(lady.age);
console.log(lady.name);
// 多继承

interface Name {
    m1: number
}
interface Age {
    m2: number
}
interface ziyuan extends Name, Age {
    m3: string
}
let lady2: ziyuan = {
    m1: 34,
    m2: 34,
    m3: "ss"
}
console.log(lady2.m1);
console.log(lady2.m2);
console.log(lady2.m3);

 接口与类型别名的异同    

// 相同点:1.都可以描述属性或方法

//               2.都允许拓展

// 不同点:1.type 可以声明基本类型别名,联合类型,[元组]

// ​               2.当出现使用type和interface声明同名变量 type会直接报错    interface会进行组合

都可以描述属性和方法

// 都可以描述属性 和方法
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);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值