精华内容
下载资源
问答
  • ts函数类型接口

    千次阅读 2019-06-08 18:57:37
    函数类型接口:对方法传入的参数以及返回值进行约束 批量约束 加密的函数类型接口 interface encypt{ (key:string, value:string):string; } var md5:encypt = function (key, value):string{ return key + ' '...

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

    interface encypt{
    	(key:string, value:string):string;
    }
    
    var md5:encypt = function (key, value):string{
    	return key + ' ' + value // 模拟加密操作
    }
    console.log(md5('李', '二狗'))
    
    var sha1:encypt = function(key, value):string{
    	return key + '--' + value
    }
    console.log(sha1('dog', 'zi'))
    
    展开全文
  • 上篇介绍了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关键字 以查询图书商品列表接口API...

    一,前言

    TS新增了一个重要概念:接口,分为对象类型接口和函数类型接口
    

    二,接口示例

    接口可以约束对象,函数,类的结构和类型,是一种代码协作必须遵守的契约
    

    接口的定义方式:

    使用interface关键字
    

    以查询图书商品列表接口API为例:

    // 接口声明:API协议约定返回格式
    interface ResponseData {
        resCode: number;
        resData: ResultData[];
        message: string;
    }
    
    // 数据接口声明
    interface ResultData {
        productId: number;
        productName: string;
    }
    

    符合接口约定的对象:

    let resultData = {
        resCode: 0,
        resData: [
            { productId: 1, productName:"TypeScipt实战" },
            { productId: 2, productName:"TypeScipt从入门到精通" },
        ],
        message: "success"
    }
    

    输出函数对结果进行打印:

    function render(res: ResponseData) {
        console.log(res.resCode, res.message)
        res.resData.forEach((obj) => {
            console.log(obj.productId, obj.productName)
        })
    }
    
    render(resultData);
    

    输出:

    0 "success"
    interface.ts?a8a5:13 1 "TypeScipt实战"
    interface.ts?a8a5:13 2 "TypeScipt从入门到精通"
    

    三,额外属性

    在接口的实际调用中,后端也经常会传递约定之外的字段,比如:

    let resultData = {
        resCode: 0,
        resData: [
            { productId: 1, productName:"TypeScipt实战", remark:""}, // 接口约定以外的remark字段
            { productId: 2, productName:"TypeScipt从入门到精通" },
        ],
        message: "success"
    }
    

    此时,并没有报错,TS允许这种情况的发生

    只要传入的对象满足接口的必要条件就可以被允许,即使传入多余的字段也可以通过类型检查
    

    但也有例外,如果直接传入对象字面量,TS就会对额外的字段进行类型检查

    绕过检查的方法有3种:

    1,将对象字面量赋值给一个变量

    以下方式会报错:

    render({
        resCode: 0,
        resData: [
            { productId: 1, productName:"TypeScipt实战", remark: "备注"},
            { productId: 2, productName:"TypeScipt从入门到精通" },
        ],
        message: "success"
    })
    

    将对象字面量赋值给一个变量后,在render不再报错:

    let result = {
        resCode: 0,
        resData: [
            { productId: 1, productName:"TypeScipt实战", remark: "备注"},
            { productId: 2, productName:"TypeScipt从入门到精通" },
        ],
        message: "success"
    }
    render(result)
    
    2,使用类型断言
    使用类型断言方式,明确告诉编译器类型是什么,编译器就会绕过类型检查
    

    方法1:

    object as targetInterface
    
    render({
        resCode: 0,
        resData: [
            { productId: 1, productName:"TypeScipt实战", remark:""},
            { productId: 2, productName:"TypeScipt从入门到精通" },
        ],
        message: "success"
    } as ResponseData)
    

    方法二:

    <targetInterface>object
    
    render(<ResponseData>{
        resCode: 0,
        resData: [
            { productId: 1, productName:"TypeScipt实战", remark: "备注"},
            { productId: 2, productName:"TypeScipt从入门到精通" },
        ],
        message: "success"
    })
    
    3,使用字符串索引签名

    添加字符串索引签名:

    interface ResultData {
        productId: number;
        productName: string;
        [remark: string]: any;  // 字符串索引签名
    }
    
    表示用任意字符串去索引List,可得到任意结果,此时List可以实现支持多个属性
    

    添加字符串索引签名后,以下代码不再报错:

    
    render({
        resCode: 0,
        resData: [
            { productId: 1, productName:"TypeScipt实战", remark: "备注"},
            { productId: 2, productName:"TypeScipt从入门到精通" },
        ],
        message: "success"
    })
    

    三,接口成员-可选属性

    对于一个约定好的接口类型,其中有些字段并不是一定会存在的,是可选属性
    而之前在接口中声明的字段,是必须要满足的字段,不可以缺少
    

    这时可以使用可选属性,声明方式:

    接口属性? 类型注解	
    
    表示这个属性可以有也可以没有
    

    四,接口成员-只读属性

    interface ResultData {
        readonly productId: number; // 只读属性
        productName: string;
    }
    

    修改只读属性:

    function render(res: ResponseData) {
        console.log(res.resCode, res.message)
        res.resData.forEach((obj) => {
            console.log(obj.productId, obj.productName)
            obj.productId ++    // 测试只读属性
        })
    }
    

    报错信息:

    Cannot assign to 'productId' because it is a read-only property.
    

    五,可索引类型的接口

    当不能确定接口中有多少个属性时,可以使用可索引类型接口
    可索引类型接口可以用数字去索引,也可以用字符串去索引
    
    1,数字索引接口:

    声明一个数字索引类型的接口:

    表示用任意数字去索引numberIndex都会得到一个string
    
    interface numberIndex {
        [x: number]: string
    }
    // 相当于声明了一个字符串类型的数组
    let chars: numberIndex = ['A', 'B']
    
    2,字符串索引接口:

    声明一个字符串索引类型的接口:

    表示用任意的字符串去索引stringIndex得到的结果都是string
    
    interface stringIndex {
        [x: string]: string
    }
    

    这样声明后,就不能声明number类型的成员了,会报错

    interface stringIndex {
        [x: string]: string
        y: number;// Property 'y' of type 'number' is not assignable to string index type 'string'.
    }
    
    3,两种索引签名混用:
    在上边的字符串索引接口stringIndex中,添加数字索引签名
    
    interface stringIndex {
        [x: string]: string
        [z: number]: string
    }
    
    这样做.接口既可以用数字索引Names也可以用字符串索引Names
    

    但需要注意:数字索引的返回值,一定要是字符串返回类型的子类型

    这是因为JS会进行类型转换,将number转换成string,这样就能保证类型的兼容性
    

    比如:将数组索引的返回值改成number:

    interface stringIndex {
        [x: string]: string
        [z: number]: number	// // Numeric index type 'number' is not assignable to string index type 'string'.
    }
    

    这样就和String类型不兼容了,要取一个能够兼容number的类型,比如any:

    interface stringIndex {
        [x: string]: any
        [z: number]: number // Numeric index type 'number' is not assignable to string index type 'string'.
    }
    

    六,结尾

    本篇介绍了TS接口中的对象类型的接口
    使用接口,会强制思考变量类型和接口边界问题,有利于培养开发者类型思维
    
    展开全文
  • 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接口

    2019-11-27 22:58:14
    在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。 接口初探 下面通过一个简单示例来观察接口是如何工作的: function printLabel(labelledObj: { label: string }) { consol...
  • ts 接口

    2019-12-26 16:50:49
    //我们定义了一个接口 Person,接着定义了一个变量 tom,它的类型是 Person。 //这样,我们就约束了 tom 的形状必须和接口 Person 一致。 interface Person { name:string; age:number; } let tom: Person = { ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 504
精华内容 201
关键字:

ts接口类型