IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> TypeScript:接口 -> 正文阅读

[JavaScript知识库]TypeScript:接口

在TypeScript中,有一个重要的内容,接口。提起来接口这个词,我的脑海中就会想起来和后端人员对接时使用的api接口,后端人员在接口文档上,写上请求的方式,请求的api,请求的参数等等;但是此接口非彼接口,但是含义是相近的!

后端人员规定了我需要传递的字段名称,字段类型,一旦前台传递的参数类型不对应,后台代码就会告诉你,我想要的是一个数字,但是你却传递了一个字符串这种错误,相信我们都遇到过!

那么在TypeScript中的接口,其实也是起到了这么的一个作用!

TypeScript的核心原则之一是对值所具有的shape进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

声明一个接口语法:interface interface_name { }

来定义一个类型,根据此类型来进行值的声明

    interface cat {
        name: string,  //string类型
        age: number,  //number类型
        food: [string], //数组,内部值为string类型
        color?: string, //可选属性,string类型;color不是非必须的
        readonly gender: string, //只读属性
        weight: number | (() => number),  //联合类
        run(): void,

        [propName: string]: any;  //额外还带有任意数量的其它属性
    }

在此接口中,我们定义了各种各样值的类型,属性,下面我们来根据此接口进行值得声明

    const catObj: cat = {
        name: '多拉',
        age: 1,
        food: ['小鱼干'],
        color: '白黄相间',  //可选属性
        gender: '母',  //只读属性
        // weight:10,   //联合类型
        weight: () => 10, //联合类型
        run(): void {
            console.log(`室内捉老鼠`)
        },
        //以下为额外的属性
        aaa: '1212',
        bbb: 999,
        ccc: [1, 2, '3'],
        ddd: {name: 'he'}
    }
    console.log(catObj)
    // catObj.gender = '公'  //error因为是只读属性,所以直接error;Cannot assign to 'gender' because it is a read-only property.

    catObj.run()

    // console.log(catObj.weight())  //因为我们声明变量的时候关于weight变量使用了函数式的返回值,直接写虽然对运行结果并无影响,但是编译会直接报错,所以需要采用以下写法
    let fn: any = catObj.weight;
    console.log(fn());

比较需要注意的就是联合类型,当我们声明值得时候采用的是函数时,我们需要进行变量的承接,否则会编译错误!

设置只读属性时,我们将不能改变此属性值

设置可选属性时,我们可写可不写,好处之一是可以对可能存在的属性进行预定义,好处之二是可以捕获引用了不存在的属性时的错误

页面输出:

?接口继承

和类一样,接口也可以进行继承;所谓的接口继承,意思就是可以通过其他接口来扩展自己,在ts中允许接口继承于多个接口,继承的时候使用关键字extends

语法:

单接口继承的语法:Child_interface_name extends super_interface_name

多接口继承语法格式:

Child_interface_name extends? ?super_interface1_name,super_interface2_name,…

    interface Person {
        age: number
    }

    interface Musician extends Person {
        instrument: string
    }

    const musician1: Musician = {
        age: 18,
        instrument: '古筝'
    }
    console.log(musician1)

?Musician接口继承于Person接口,通过Musician接口进行值的定义

页面输出:

?定义类满足定义的接口

需要使用implements关键字,我们首先定义了一个接口,而后根据接口myInter定义了一个抽象类Animal,最后又定义了一个子类Dog,继承于Animal

    // 定义接口
    interface myInter {
        name: string
        age: number

        say(): void  //只能是抽象方法
    }

    // 定义抽象类,使类满足接口的要求
    abstract class Animal implements myInter {
        age: number;
        name: string;

        constructor(name: string, age: number) {
            this.name = name
            this.age = age
        }

        abstract say(): void
    }

    // 定义子类Dog,继承于Animal
    class Dog extends Animal {
        say(): string {
            return '旺旺旺!'
        }

        sayHello(): void {
            console.log(`${this.name},今年${this.age}岁,每天${this.say()}`)
        }
    }

    const dog = new Dog('贝拉', 3)
    console.log(dog)
    dog.sayHello()

页面输出:

?暂时结束吧!

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-03-31 23:55:34  更:2022-03-31 23:55:45 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 4:53:20-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码