TypeScript快速入门 - 接口

张瑞东

已于 2024-01-12 10:57:26 修改

阅读量411

点赞数 7

于 2024-01-12 10:22:13 首次发布

本文链接：https://blog.csdn.net/weixin_42368597/article/details/135544243

版权

本文详细介绍了TypeScript中的接口概念，包括基本接口定义、接口继承、可选参数、只读属性、函数类型接口、可索引类型接口以及类类型接口的使用。通过实例展示了如何在实际编程中利用这些接口进行类型约束和结构设计。

摘要由CSDN通过智能技术生成

TypeScript接口

1、关键字：interface

interface IUser {
    name: string
    age: number
}

let user: IUser = {name: "张三"， age: 22};
console.log(user);

// {name: "张三"， age: 22}

2、接口的继承

关键字：extendes

interface IUser {
    name: string
    age: number
}

let user: IUser = {name: "张三"， age: 22};
console.log(user);

// {name: "张三"， age: 22}

// 接口可以继承
interface IStudent extends IUser {

}

let student: IStudent = {name: "李四"， age: 18};

console.log(student);
// {name: "李四"， age: 18}

3、接口的可选参数

关键字：？

interface IUser {
    name: string
    age: number
}

let user: IUser = {name: "张三"， age: 22};
console.log(user);

// {name: "张三"， age: 22}

// 接口可以继承
// CET6?: 代表CET6是可选参数，可有可无，而CET4参数则必须得有
interface IStudent extends IUser {
    CET4: boolean
    CET6?: boolean
}

let student1: IStudent = {name: "李四"， age: 18, CET4: true};
let student2: IStudent = {name: "李四"， age: 18, CET4: true, CET6: false};

console.log(student1);
// {name: "李四"， age: 18, CET4: true}

console.log(student2);
// {name: "李四"， age: 18, CET4: true, CET6: false}

4、接口的只读属性

关键字：readonly

interface IUser {
    name: string
    age: number
}

let user: IUser = {name: "张三"， age: 22};
console.log(user);

// {name: "张三"， age: 22}

// 接口可以继承
interface IStudent extends IUser {
    readonly DNA: string
    CET4: boolean
    CET6?: boolean
}

let student: IStudent = {name: "李四", age: 18, DNA: "aaaa", CET4: true};

console.log(student);
// {name: "李四"， age: 18, CET4: true} 

// CET6是可更改的属性
student.CET6 = true;

console.log(student);
// {name: "李四"， age: 18, CET4: true, CET6: true} 

// 报错 DNA字段是不可修改的，是只读属性
student.DNA = "ddddddd";

5、函数类型接口

// 接口的目的重在约束
interface IFunc {
    (name: string): void
}

let f: IFunc = (a: string): void => {
    console.log(a);
}

f("aa");

// aa

6、可索引类型接口

interface IIndex {
    [index: string]: string
}

let index: IIndex = {username: "张三", nickName: "zhangsan"}；

console.log(index);

// {username: "张三", nickName: "zhangsan"}

7、类类型的接口

// 接口重在于约束
interface User {
    name: string
    age: number
    sayInfo(): void
}

class Student implements User {
    name: string
    age: number
    sayInfo(): void {
        console.log("姓名: " + this.name);
        console.log("年龄: " + this.age);
    }
    constructor(name: string, age: number) {
      this.name = name;
      this.age = age;
    }
}

let student: Student = new Student("张三", 18);
student.sayInfo();

// 姓名: 张三
// 年龄: 18