【Typescript】学习笔记(三)之接口与泛型的使用_接口定义泛型函数(1)

img
img

网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。

需要这份系统化资料的朋友,可以戳这里获取

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

最简单判断该用 readonly 还是 const 的方法是看要把它做为变量使用还是做为一个属性。 做为变量使用的话用 const,若做为属性则使用 readonly

索引类型
interface FrontLanguage {
  [index: number]: string
}

const frontend: FrontLanguage = {
  1: "HTML",
  2: "CSS",
  3: "JavaScript"
}

interface LanguageBirth {
  [name: string]: number
  Java: number
}

const language: LanguageBirth = {
  "Java": 1995,
  "JavaScript": 1996,
  "C": 1972
}

函数类型

接口能够描述 JavaScript 中对象拥有的各种各样的外形。 除了描述带有属性的普通对象外,接口也可以描述函数类型。

为了使用接口表示函数类型,我们需要给接口定义一个调用签名。它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。

/\*
接口可以描述函数类型(参数的类型与返回的类型)
\*/

interface SearchFunc {
  (source: string, subString: string): boolean
}

这样定义后,我们可以像使用其它接口一样使用这个函数类型的接口。 下例展示了如何创建一个函数类型的变量,并将一个同类型的函数赋值给这个变量。

const mySearch: SearchFunc = function(source: string, sub: string): boolean {
  return source.search(sub) > -1
}

console.log(mySearch('abcd', 'bc'))

接口继承

接口是支持多继承的(类不支持多继承)

interface Person {
  name: string
  eating: () => void
}

interface Animal {
  running: () => void
}

interface Student extends Person, Animal {
  sno: number
}

const stu: Student = {
  sno: 110,
  name: 'Pan',
  eating: function () {
  },
  running: function (): void {
    
  }
}

类的接口
interface Alarm {
  alert(): any
}

interface Light {
  lightOn(): void
  lightOff(): void
}

class Car implements Alarm {
  alert() {
    console.log('Car alert')
  }
}
    
// 一个类可以实现多个接口
class Car2 implements Alarm, Light {
  alert() {
    console.log('Car alert')
  }
  lightOn() {
    console.log('Car light on')
  }
  lightOff() {
    console.log('Car light off')
  }
}

交叉类型

联合类型表示多个类型中一个即可

type Alignment = 'left' | 'right' | 'center'

还有另外一种类型合并,就是交叉类型:

  • 交叉类似表示需要满足多个类型的条件;
  • 交叉类型使用& 符号;
type MyType = number & string

//表达的含义是number和string要同时满足;
//但是有同时满足是一个number又是一个string的值吗?其实是没有的,所以MyType其实是一个never类型;

交叉类型的应用

在开发中,我们进行交叉时,通常是对对象类型进行交叉的:

interface Colorful {
  color: string
}

interface IRun {
  running: () => void
}

type NewType = Colorful & IRun

const obj: NewType = {
  color: 'red',
  running: function() {
    
  }
}

interface和type区别

如果是定义非对象类型,通常推荐使用type

如果是定义对象类型,那么他们是有区别的:

  • interface 可以重复的对某个接口来定义属性和方法;
  • 而type定义的是别名,别名是不能重复的;
interface IPerson {
  name: string
  running: () => void
}

interface IPerson {
  age: number
}

type Person = {
  name: string
  running: () => void
}

  // 这里会报错
type Person = { //标识符“Person”重复。
  age: number
}

泛型的使用

指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定具体类型的一种特性。

基本案例
function createArray2<T>(value: T, count: number) {
  const arr: Array<T> = []
  for (let index = 0; index < count; index++) {
    arr.push(value)
  }
  return arr
}
const arr3 = createArray2<number>(11, 3)
console.log(arr3)//[ 11, 11, 11 ]

const arr4 = createArray2<string>('aa', 3)
console.log(arr4)//[ 'aa', 'aa', 'aa' ]

多个泛型参数的函数

一个函数可以定义多个泛型参数

function swap<K, V>(a: K, b: V): [K, V] {
  return [a, b]
}
const result = swap<string, number>('abc', 123)
console.log(result[0].length, result[1].toFixed())

泛型接口

在定义接口的时候我们也可以使用泛型:

在定义接口时, 为接口中的属性或方法定义泛型类型 在使用接口时, 再指定具体的泛型类型

interface IPerson<T1 = string, T2 = number> {
  name: T1
  age: T2
}

const p: IPerson = {
  name: 'pan',
  age: 18
}

泛型类

在定义类时, 为类中的属性或方法定义泛型类型 在创建类的实例时, 再指定特定的泛型类型

class Point<T> {
  x: T


![img](https://img-blog.csdnimg.cn/img_convert/a59c5d7e00ee5a5cbe7b95023fb56403.png)
![img](https://img-blog.csdnimg.cn/img_convert/ce6de7595561bcccb54c1940643953ae.png)
![img](https://img-blog.csdnimg.cn/img_convert/3c7f5246bd85d003800764bfabc5c2a1.png)

**既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!**

**由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新**

**[需要这份系统化资料的朋友,可以戳这里获取](https://bbs.csdn.net/topics/618545628)**

x: T


[外链图片转存中...(img-WaTfqeXi-1715705674629)]
[外链图片转存中...(img-ToBKYzbG-1715705674629)]
[外链图片转存中...(img-OjLfvhBz-1715705674630)]

**既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!**

**由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新**

**[需要这份系统化资料的朋友,可以戳这里获取](https://bbs.csdn.net/topics/618545628)**

  • 4
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值