typescript中的接口,文章四

属性接口

对方法传参的json进行一个约束,必须包含应有的key,value的类型

// 接口的作用,在面向对象编程中,接口是一个规范的定义,它定义了行为和动作的标准。 对json的约束

// 简单的规定函数接口传入的参数只有name,并且是string类型
function fn(obj:{name: string}): void {
  console.log(obj)
}

fn(~~123~~ ) // 错误的写法

fn({name: 'jack', ~~age: 20~~ }) // 错误的写法

fn({name: 'jack'}) // 正确写法

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

// 对批量方法传入参数进行约束
// 通过 interface关键字

// 就是对传入的对象约束,,,属性接口
interface fullUser {
  name: string
  age: number
  like?: string // 可选参数
}

function userInfo(user: fullUser): void {
  // 必须传入对象,name:string  age:number
  if (user.like) {
    console.log(`${user.name}---${user.age}---喜欢${user.like}`)
  } else {
    console.log(`${user.name}---${user.age}`)
  }
}

let obj = {
  name: 'jack',
  age: 18,
  sex: '男'
}
// 如果把参数定义在外部,只要满足定义的规定即可,可以拓展多余的参数
userInfo(obj) // jack---18

let obj2 = {
  name: 'jack',
  age: 18,
  sex: '男',
  like: '美食'
}
// 如果把参数定义在外部,只要满足定义的规定即可,可以拓展多余的参数
userInfo(obj2) // jack---18---喜欢美食


// 直接写对象参数,必须满足规定的条件
userInfo({
  name: 'jack',
  age: 18,
  ~~sex: '男'~~  // 多余的参数会语法报错
})

函数型接口:对传参和返回值进行约束

interface entry {
  (key: string): string
}

var foo: entry = function(name: string): string {
  return name
}

可索引值接口

// 可索引值接口:对数组和对象的约束
// 对数组的约束
interface Arr {
  [index:number]: string // 索引是number,值是string类型
}

var arr:Arr = ['jack', 'tony']


// 对对象的约束,,一般用不到,因为对象的数据类型一般都不是固定的一种类型,可能有string、number
interface Obj{
  [index: string]: string
}

var obj: Obj = {name: 'jack'}

类类型接口

// 类类型接口: 对类的约束
interface Animal {
  name: string // 对实现这个类必须有name属性,string类型
  eat(food: string): void // 对实现这个类必须有eat方法
}

class Dog implements Animal {
  name: string
  constructor(name: string) {
    this.name = name
  }
  eat(food: string): void {
    console.log(`${this.name}${food}`)
  }
}

var d = new Dog('小黑')
d.eat('狗粮') // 小黑吃狗粮

类类型接口的拓展

// 类类型接口: 对类的约束
interface Animal {
  name: string // 对实现这个类必须有name属性,string类型
  eat(food: string): void // 对实现这个类必须有eat方法
}

interface Person extends Animal {
  work(): void
}

class Web implements Person {
  name: string
  constructor(name: string) {
    this.name = name
  }
  eat(food: string): void {
    console.log(`${this.name}${food}`)
  }
  work() {
    console.log(this.name + '在工作')
  }
}

var w = new Web('李狗蛋')
w.eat('水果') // 李狗蛋吃水果
w.work() // 李狗蛋在工作

实现继承与实现类类型接口

// 类类型接口: 对类的约束
interface Animal {
  name: string // 对实现这个类必须有name属性,string类型
  eat(food: string): void // 对实现这个类必须有eat方法
}

interface Person extends Animal {
  work(): void
}

class Programmer {
  name: string
  constructor(name: string) {
    this.name = name
  }
  coding() {
    console.log(this.name + '在写代码')
  }
}

// 实现继承与实现类类型接口
class Web extends Programmer implements Person {
  constructor(name: string) {
    super(name)
  }
  eat(food: string): void {
    console.log(`${this.name}${food}`)
  }
  work() {
    console.log(this.name + '在工作')
  }
}

var w = new Web('李狗蛋')
w.eat('水果') // 李狗蛋吃水果
w.work() // 李狗蛋在工作
w.coding() // 李狗蛋在写代码

你可能感兴趣的:(js,ts,接口,typescript)