精华内容
下载资源
问答
  • ts接口的概念以及属性类型接口

    千次阅读 2019-06-08 18:46:55
    接口的作用 在面向对象编程中,接口是一种规范的定义,它定义了行为和动作规范 在程序设计里面,接口起到一种...typescript中的接口类似java,同时还增加了更灵活的接口类型,包括属性、函数、可索引和类等 定义标...

    接口的作用

    在面向对象编程中,接口是一种规范的定义,它定义了行为和动作规范
    在程序设计里面,接口起到一种限制和规范的作用。接口定义了某一批所需要遵守的规范
    接口不关心这些类内部状态数据,也不关心这些类里面方法的实现细节它只规定了这批类里必须提供某些方法,提供这些方法的类就可以满足实际需要。
    typescript中的接口类似java,同时还增加了更灵活的接口类型,包括属性、函数、可索引和类等
    定义标准

    属性接口对json的约束

    ts中定义方法

    function printLabel():void{
    	console.log('')
    }
    printLabel()
    

    ts中定义方法传入参数

    function printLabel(label:string):void{
    	console.log(label)
    }
    printLabel('ruby')
    

    ts中自定义方法传入参数 对json进行约束

    function printLabel(labelInfo:{label:string}):void{
    	console.log(labelInfo.label)
    }
    printLabel({label: 'ruby'})
    

    接口:行为和动作规范,对批量方法进行约束

    传入对象的约束 属性接口

    interface FullName{
    	firstName: string; // 注意分号结束
    	secondName: string; 
    }
    /* 必须传入对象firstName secondName */
    function printName(name:FullName){
    	console.log(name.firstName + '--' + name.secondName)
    }
    printName({firstName: 'Li', secondName: 'er dog'})
    

    对批量方法传入参数进行约束

    interface FullName{
    	firstName: string; // 注意分号结束
    	secondName: string; 
    }
    / * 必须传入对象 firstName secondName * /
    function printName(name:FullName){
    	console.log(`${name.firstName}--${name.secondName}`)
    }
    function printInfo(info:FullName){
    	console.log(info.firstName + ' ' + info.secondName)
    }
    let info = {
    	firstName: 'Lu',
    	secondName: 'lily',
    	age: 30
    }
    printInfo(info)
    

    接口可选属性

    interface FullName{
    	firstName: string;
    	secondName: string;
    }
    function getName(name:FullName){
    	console.log(`method getName: ${name.firstName}--${name.secondName}`)
    }
    getName({firstName: 'Wang', secondName: 'Qian'})
    
    interface FullName{
    	firstName?:string;
    	secondName?:string;
    }
    
    function getName(name:FullName){
    	console.log('method getName:')
    }
    getName()
    
    展开全文
  • TS(Vue)中数组的接口类型使用

    千次阅读 2019-04-29 11:08:18
    首先出现的问题是,我需要一个数组list,数组中每一项需要是key:value形式的...这里就需要使用TS接口,我们需要自定义一下list数组类型,使用接口就可以自定义list中属性的类型。 先定义接口: interface Iitem...

    首先出现的问题是,我需要一个数组list,数组中每一项需要是key:value形式的对象,但是当我需要新增一项到数组中时候,对于每一项即对象的类型出现问题,问题如下:
    在这里插入图片描述
    这是因为我定义了list类型为数组,但是并没有对其中的对象的属性进行类型定义。

    这里就需要使用TS的接口,我们需要自定义一下list数组类型,使用接口就可以自定义list中属性的类型。
    先定义接口:

    interface Iitem {
        key: string;
        value: string;
    }
    

    在data中定义list,list类型就为定义的Iitem接口类型,而他本身还是个数组。
    那原本错误的代码修改如下:

    import Vue from "vue";
    interface Iitem {
        key: string;
        value: string;
    }
    export default Vue.extend({
        name: "param-set",
        props: {
            params: {
                type: Object,
                default: [],
            },
        },
        data() {
            const list: Iitem[] = [];
            return {
                itemList: JSON.parse(JSON.stringify(this.params)),
                list,
                key: "",
                value: "",
            };
        },
        methods: {
            callback() {
                this.$emit("callback");
            },
            addBtn() {
                const newInfo: Iitem = {key: this.key, value: this.value};
                if (this.key) {
                    this.list.push(newInfo);
                }
                this.key = "";
                this.value = "";
    
            },
            del(index: number) {
                this.list.splice(index, 1);
            },
        },
    });
    

    顺便提一下,vue中data需要在return中注册list,这为啥需要return包含呢?

    这是在编写组件时候的写法,而组件就是一个可复用的vue的实例。这也就意味着如果你的data是一个普通的对象,那么所有复用这个实例的组件都将引用同一份数据,这就造成了数据污染!

    这个时候如果我们将data封装成一个函数,我们在实例化组件的时候只是调用了这个函数生成的数据副本,这就避免了数据污染。

    关注我吧

    关注「前端一起学」公众号 ,看着项目进阶学习,让我们一起学前端,一起进步。
    在这里插入图片描述

    展开全文
  • TS03 TS中的各类型接口(详解)

    千次阅读 2020-07-28 19:13:29
    1.TS中的接口 接口的作用:在面向对象的编程中,接口是...typescrip中 的接口类似于java,同时还增加了更灵活的接口类型,包括属性、函数、可索引和类 等。 1.1 属性类接口 1.1.1 一个入门小实例 //TS定义一个函数 fun

    1.TS中的接口

    接口的作用:在面向对象的编程中,接口是种规范的定义, 它定义了行为和动作的规范, 在程序设计里面,接口起 到一种限制和规范的作用。接
    口定义了某-批类所需要遵守的规范,接口不关心这些类的内部状态数据,也不关心这些类里方法的实现细节,它只规定这批类里必须提供某些方
    法,提供这些方法的类就可以满足实际需要。typescrip中 的接口类似于java,同时还增加了更灵活的接口类型,包括属性、函数、可索引和类
    等。

    1.1 属性类接口

    • 1.1.1 一个入门小实例
    
    //TS定义一个函数
    function printLabel():void{
        console.log('printLabel')
    }
    
    // printLabel();
    
    //约束传入参数为string类型
    function printLabel(label:string):void{
        console.log('printLabel')
    }
    
    printLabel('haha');
    
    
    /*
    TS自定义方法传入参数对json对象进行约束
    传入对象labelinfo中必须要有label属性
    */
    function printLabel(labelInfo:{label:string}):void{
        console.log('printLabel')
    }
    
    printLabel(
        {}
    );
    // "类型“{}”的参数不能赋给类型“{ label: string; }”的参数
    
    printLabel({label:'hahah'})
    
    
    
    • 1.1.2 属性类接口
    //接口:行为和动作的规范,对批量方法进行约束
    
    /**
     * 使用这个方法必须传入firstName  secondName
     */
    
     interface FullName{
         
        firstName:string;
        
        secondName:string;
     }
    
     function printName(name:FullName){
        console.log(name.firstName + '---' + name.secondName)
     }
    
    
    //错误写法1
    //  printName(123)
    
    
    printName({
        firstName:'康',
        secondName:'家豪'
    })
    
    
    • 1.1.3 可选属性接口
    //接口:行为和动作的规范,对批量方法进行约束
    
    /**
     * 原始属性接口
     */
    
    interface FullName {
    
        firstName: string;
    
        secondName: string;
    }
    
    function printName(name: FullName) {
        console.log(name)
    }
    
    
    //这里我传入的对象必须要有 firstName 属性和 secondName 属性
    printName({
        firstName: '康',
        secondName: '家豪'
    })
    
    // {firstName: "康", secondName: "家豪"}
    
    
    
    /**
     * 可选属性接口   配置可选参数
     */
    
    interface FullName2 {
    
        firstName: string;
    
        secondName?: string;
    }
    
    function printName2(name: FullName2) {
        console.log(name)
    }
    
    
    //这里secondName就是可传可不传了
    printName2({
        firstName: '康'
    })
    
    // {firstName: "康"}
    
    • 1.1.4 使用ts封装一个ajax
    /**
     * 使用TS封装一个ajax
     */
    
     interface Config{
         type:string;
    
         url:string;
    
         data?:any;
    
         dataType:string;
     }
    
    
     function ajax(config:Config){
         let xhr = new XMLHttpRequest();
    
         xhr.open(config.type,config.url,true);
    
         xhr.send(config.data);
    
         xhr.onreadystatechange = function(){
             if(xhr.readyState == 4 && xhr.status == 200){
                 if(config.dataType == 'json'){
                     console.log(JSON.parse(xhr.responseText))
                 }else{
                     console.log(xhr.responseText)
                 }
             }
         }
     }
    
    
     //使用
    
     ajax({
         type:'get',
         url:'localhost:3000',
         data:{name:123},
        dataType:'json'
     })
    

    1.2 函数类型接口

    函数类型接口:对方法传入的参数 以及返回值进行约束

    /**
     * 加密的函数类型接口
     * 对方法传入的参数和返回值进行约束
     */
    interface encrypt{
        (key:string,value:string):string;
    }
    
    var md5:encrypt = function(key:string,value:string):string{
        //md5算法过程
        return key + value;
    }
    
    
    console.log(md5('name','张三'))
    

    1.3 可索引接口

    数组,对象的约束(不常用)

    /**
     * TS定义数组的方式
     */
    
    //  var arr:number[] = [1,2,3,4,5]
    
    
    
    /**
     * 使用接口来对数组进行约束
     */
    
     interface userArr{
         //数组索引为number类型  值为string类型
        [index:number]:string
     }
    
    var arr:userArr = ['aaa','ccc'];
    
    console.log(arr[0])
    
    
    
    /**
     * 使用接口来对对象进行约束
     */
    
    interface userObj{
       //对象索引为string类型  值为string类型
       [index:string]:string
    }
    
    var obj:userObj = {name:'20'}
    
    

    1.4 类类型接口

    对类的约束 和 抽象类有点相似

    /**
     * 类类型接口
     * 对类的约束
     */
    
     interface Animal{
         name:string;
         eat(str:string):void;
     }
    
     class Dog implements Animal{
         name:string;
         constructor(name:string){
             this.name = name;
         }
    
         eat(food:string){
             console.log(this.name +'吃' + food)
         }
     }
    
     var d = new Dog('小黑');
     d.eat('粮食哦')
    
    

    1.5 接口拓展

    接口可以继承接口

    /**
     * 接口拓展
     * 接口的继承
     */
    
    interface Animal{
        eat():void
    }
    
    interface Person extends Animal{
        work():void;
    }
    
    class web implements Person{
        name:string;
        constructor(name:string){
            this.name = name;
        }
    
        eat(){
            console.log(this.name + '喜欢吃馒头')
        }
    
        work(){
            console.log(this.name + '喜欢打代码')
        }
    }
    
    
    var p1 = new web('小李')
    
    p1.eat()
    p1.work()
    
    展开全文
  • 上篇介绍了TS接口的对象类型接口 本篇介绍TS的另一种接口:函数类型接口 二,函数定义方式 1,在TS中,可以使用一个变量直接定义函数: // 1,使用变量定义函数 let add: (x: number, y: number) => number 2,还可以...

    一,前言

    上篇介绍了TS接口的对象类型接口
    本篇介绍TS的另一种接口:函数类型接口
    

    二,函数定义方式

    1,在TS中,可以使用一个变量直接定义函数:

    // 1,使用变量定义函数
    let add: (x: number, y: number) => number
    

    2,还可以使用接口来定义函数:

    // 2,使用接口定义函数
    interface Add {
    	(x: number, y: number): number
    }
    

    3,使用类型别名来定义函数:

    类型别名使用type关键字,相当于为函数类型起一个名字
    
    // 3,使用类型别名来定义函数
    type Add = (x: number, y: number) => number
    

    三,混合类型的接口

    一个接口,既可以定义一个函数,也可以像对象一样拥有属性和方法
    
    定义一个混合类型的接口:
    interface Lib {
        (): void;
        version: string;
        doSomething(): void;
    }
    
    函数Lib,无返回值,无参数
    为它增加属性:version版本号,类型string
    再为他添加方法:doSomething
    
    实现混合接口

    下面的写法会报错:

    定义变量lib,指定类型为Lib(Lib是一个函数,没有返回值类型)
    编译器提示Lib中缺少属性:
    
    // 实现混合接口
    let lib: Lib = () =>{}
    // 报错信息
    Type '() => void' is missing the following properties from type 'Lib': version, doSomething
    

    增加属性:

    // 实现混合接口
    let lib: Lib = () =>{}
    lib.version = "1.0"
    lib.doSomething = () => {}
    

    此时依然提示缺少属性:

    使用类型断言,因为我们明确知道这个lib就是我们所定义的接口类型,使用as.Lib
    
    let lib: Lib = (() =>{}) as Lib // 使用类型断言
    lib.version = "1.0"
    lib.doSomething = () => {}
    

    这样一个接口就实现了,但是:

    全局变量lib,是一个单例,
    要想创建多个lib,需使用函数封装,将其定义在一个getLib函数中,返回lib,这样就可以创建多个实例了
    
    // 通过调用getLib函数,可创建多个实例
    function getLib() {
        let lib: Lib = (() =>{}) as Lib
        lib.version = "1.0"
        lib.doSomething = () => {}
        return lib
    }
    
    let lib1 = getLib()
    lib1()
    lib1.doSomething()
    let lib2 = getLib();
    

    四,结尾

    本篇介绍了TS函数类型接口,包含:
    	函数的3种定义方式
    	混合类型接口的定义和实现
    	
    另外,接口还可以定义类的结构和类型,后续在TS类时进行介绍
    
    展开全文
  • TS中的接口(interface)与类型别名(type alias) 定义 在 typescript 中, 我们声明类型有两种方式: 接口(interface) 和类型别名(type alias),官方文档对于两者及其异同的描述如下: One of TypeScript’s core ...
  • ts函数类型接口

    千次阅读 2019-06-08 18:57:37
    函数类型接口:对方法传入的参数以及返回值进行约束 批量约束 加密的函数类型接口 interface encypt{ (key:string, value:string):string; } var md5:encypt = function (key, value):string{ return key + ' '...
  • 这是我参与8月更文挑战的第1天,活动详情查看:8月更文挑战 *今天给大家推出一份新鲜的摸鱼神器,请看噔噔蹬蹬。。。* !... ...不知道大家在用TS的时候,...明明后端接口里已经定义了类型,为啥咱们还要写Interface, **
  • TypeScript中的类接口 ​ 在typescript中支持我们对类进行接口的定义,具体语法如下: interface 类接口名{ 属性1 : 数据类型, 属性2 : 数据类型, ... } ​ 示例代码如下: /*定义Person类的接口PersonInterFace...
  • ts可索引接口类型接口

    千次阅读 2019-06-08 19:07:06
    可索引接口:数组、对象的约束(不常用) var arr:number[]=[11, 22] var arr:Array<string> = ['aa', 'bb'] 可索引接口 对数组的约束 interface UserArr{ [index:number]:string; } var arr:UserArr=['aa',...
  • TS入门+类型定义+接口理解

    千次阅读 2020-04-26 17:45:46
    //ts用法 var n:number = 1; // var n = '213'; //err var str = "213244"; // str = 123; //err var str:string = '1'; str = 'dddd' var str2:string = `hello ${str2}`; var bool...
  • TS 接口继承类

    千次阅读 2019-11-29 10:26:59
    class ImageC报错了,原因: ...接口(SelectableControl)继承类(Control), 同时继承了类的私有方法和属性(private)。 你在定一个类的时候,需要去实现他的私有成员,而现在ImageC中没有,找不到,就会报错 ...
  • ts接口的理解

    2020-03-04 18:04:43
    一般后台定义接口就是前端调用的接口,定义一些参数等,ts里的接口可以理解为定义一些参数,规定变量里面有什么参数,参数是什么类型,使用时就必须有这些对应类型的参数,少或者多参数都会报错 interface orderInfo...
  • TS新增了一个重要概念:接口,分为对象类型接口和函数类型接口 二,接口示例 接口可以约束对象,函数,类的结构和类型,是一种代码协作必须遵守的契约 接口的定义方式: 使用interface关键字 以查询图书商品列表接口API...
  • TS接口初步理解

    2020-12-11 18:04:14
    说明:接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约 也就是定义 1:确定属性、2:可选属性、3:任意属性:4:只读属性 function printLabel(labelledObj: { label: string }) { console.log...
  • ​ typescript中我们定义接口的时候可以继承其他接口,如下代码中我们定义了一个二维坐标的接口TwoPoint,在定义了一个三维坐标接口继承二维接口,此时我们只需要在三维接口中定义z坐标,因为三维坐标接口继承了二维...
  • 使用 Partial interface Todo { title: string; description: string; } function updateTodo(todo: Todo, fieldsToUpdate: Partial<Todo>... return { ...todo, ...fieldsToUpdate };... description: "clear ...
  • TS入门笔记2——TS接口进阶详解

    千次阅读 2020-10-06 20:55:38
    一、为什么需要接口? let obj:object; // 定义了一个只能保存对象的变量 // obj = 1; // obj = "123"; // obj = true;...之前我们已经介绍了用这种方式定义一个ts的...二、什么是接口类型? 和number,string,b
  • TypeScript的核心原则之一是对值所具有的结构进行`类型检查`。 它有时被称做“`鸭式辨型法`(会走路、游泳和呱呱叫的鸟,或者是... 在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。
  • TS对象类型 -- 接口(interface)

    千次阅读 2020-03-14 19:48:46
    //在Ts中的接口是非常灵活的概念,除了对行为抽象之外,他还对形状进行了描述 //1. interface Person { name: string; age: number; } //变量使用接口时,形状必须和接口相同,或多或少、类型...
  • 如题,本篇我们介绍下ts中可索引型(数组型)接口 和类类型接口。 可索引型接口用于构建hash散列、堆栈等。 类类型接口就是传统面向对象语言(如java)中的接口,在传统面向对象语言(如java)中极为常见。 06_...
  • 从TypeScript接口生成类型保护功能 自动为代码库中的接口生成TypeScript 工具。 该工具旨在允许开发人员验证来自非类型化来源的数据,以确保其符合TypeScript类型。 例如,当初始化数据存储或在AJAX响应中接收结构...
  • 从JSON或XML生成接口 这个工具是在工作时制作的,因为XSplit核心返回的通常格式是XML,而在XJS上工作时,我必须为其创建适当的类型/接口
  • TS-接口

    2019-07-19 17:47:05
    TS-接口 1.关键字 interface 用于 定义 接口 2.接口 用于 约束 变量 或者 函数 interface A { name:string; age:number } //接口 A 表示 被 约束的 变量 或函数 必须 只能 拥有 string 类型 的 name 属性 ...
  • TS中的接口

    2021-01-05 23:32:07
    TS中的接口 接口也是定义标准,他比抽象类更加全面 1.属性接口 function printLabel(labelInfo:{label:string}):void{ console.log('对传入参数约束'); } // printLabel('aaa')//错误写法 printLabel({label:'aaa'})...
  • ts泛型接口

    千次阅读 2019-06-09 09:10:48
    函数类型接口 interface ConfigFn{ (value1:string, value2:string):string; } var setData:ConfigFn=function (value1:string, value2:string):stirng{ return value1 + value2; } setData('alex', 'lisa') ...
  • TypeScript -- ts接口

    2019-08-05 23:29:46
    上一节,我们简单的介绍ts的基础数据类型,那么接下来我们来介绍ts接口TS接口 接口是一系列抽象方法的声明,是一些方法特征的集合,这些方法都应该是抽象的,需要由具体的类去实现,然后第三方就可以通过这...
  • ts接口 interface

    2020-07-20 10:13:36
    typescript 接口(interface)的两种用法 interface IPerson { name: string; age: number; } class Person { constructor(public config: ...第一种用法 就有点像自定义类型 送参需要符合interface的接口
  • TypeScript基础入门 - 接口 - 额外的属性检查 项目实践仓库 https://github.com/durban89/typescript_demo.git tag: 1.0.9 为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能直接运行看到输出的...
  • interface Item{ name:string; path:string; } interface Index{ [index: number]: Item; } interface List{ list: Index } ...百度了一圈没找到,目前暂时这么实现,有更好的方式再补充~ ......
  • TypeScript里的工具类型Partial的用法

    千次阅读 2020-11-30 14:52:23
    Partial 可以快速把某个接口类型中定义的属性变成可选的(Optional): interface People { age: number; name: string; } const Jerry:People = { age: 10, name: 'Jerry' }; const Tom: People = { name: '...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 37,531
精华内容 15,012
关键字:

ts接口类型