day164-TypeScript基础小记-interface

要点

接口的作用:

  1. 多个属性处理类型判断
  2. 接口描述函数类型

    多个属性如何处理类型判断?

    function printLabel (labeledObj: { label: string }) {
    console.log(labeledObj.label)
    }
    let myObj = { size: 10, label: 'Size 10 Object' }
    printLabel(myObj)
    /**
    * 以上是对象只有一个label属性,多个属性如何处理?
    */
    interface LabeledValue {
    label: string
    }
    function printLabel(labeledObj: LabeledValue) {
    console.log(labeledObj.label)
    }
    let myObj = { size: 10, label: 'Size 10 Object' }
    printLabel(myObj)

可选属性

interface里的值不是所有的都是必需

interface SquareConfig {
color?: string
width?: number
}
function createSquare (config: SquareConfig): { color: string, area: number } {
let newSquare = { color: 'white', area: 100 }
if (config.color) {
newSquare.color = config.color
}
if (config.width) {
newSquare.area = config.width * config.width
}
return newSquare
}
let mySquare = createSquare({color: 'black'})
console.log(mySquare)

接口描述函数类型

interface SearchFunc {
(source: string, subString: string): boolean
}
let mySearch: SearchFunc
mySearch = function (source: string, subString: string) {
let result = source.search(subString)
return result > 1
}

可索引的类型

ts支持两种索引签名:字符串和数字
数字索引的返回值必须是字符串索引返回值类型的子类型
因为用number来索引时,JS会将它转换成string然后再去索引对象。即:用100去索引等同于用“100”去索引。
问题:dictionary模式

interface StringArray {
[index: number]: string
}
let myArray: StringArray
myArray = ['liu', 'mon']
// 当用number去索引StringArray时会得到string类型的返回值
let myStr: string = myArray[0]
console.log(myArray)
class Animal {
name: string
}
class Dog extends Animal {
// 养殖
breed: string
}
// 错误:使用数值型的字符串
interface NotOkay {
// 数字索引类型“Animal”不能赋给字符串索引类型“Dog”。ts(2413)
// [x: number]: Animal
[x: string]: Dog
}
文章作者: lmislm
文章链接: http://lmislm.com/2019/06/26/2019-06-26/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LMISLMのBlog