广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >TypeScript中的接口和泛型你了解吗
  • 158
分享到

TypeScript中的接口和泛型你了解吗

2024-04-02 19:04:59 158人浏览 独家记忆
摘要

目录接口对象类型索引类型函数类型继承交叉类型接口实现interface 和 type 的区别字面量赋值枚举类型泛型泛型函数泛型接口泛型类类型约束总结接口 使用 interface 关

接口

使用 interface 关键字来定义数据类型

对象类型

当存在于较长的数据类型约束时,我们可以通过 type 关键字 为类型注解起别名,也可以通过接口来定义

type UserType = { name: string; age?: number };
const user: UserType = {
  name: "kiki",
  age: 18,
};
interface IUserType { name: string; age?: number }
const person: IUserType = {
  name: 'alice',
  age: 20
}

索引类型

interface 和type定义对象都可以为只知道key的类型,不知道具体 key 值的时候,进行类型的定义

interface ILanguage {
  [index: number]: string;
}
const language: ILanguage = {
  0: "html",
  1: "CSS",
  2: "js",
};
type Score = {
  [name: string]: number;
}
const score: Score = {
  Chinese: 120,
  math: 95,
  Englist: 88,
};

函数类型

定义函数时,interface 和 type 的语法稍有不同

interface ISelfType {
  (arg: string): string;
}
type LogType = (arg: string) => string;
function print(arg: string, fn: ISelfType, logFn: LogType) {
  fn(arg);
  logFn(arg);
}
function self(arg: string) {
  return arg;
}
console.log(print("hello", self, self));

继承

接口可以实现多继承,继承后的接口具备所有父类的类型注解

interface ISwim {
  swimming: () => void;
}
interface IEat {
  eating: () => void;
}
interface IBird extends ISwim, IEat {}
const bird: IBird = {
  swimming() {},
  eating() {},
};

交叉类型

交叉类型其实是与的操作,用 & 符号,将接口进行与操作后,实质上需要满足所有与操作接口的类型注解

interface ISwim {
  swimming: () => void;
}
interface IEat {
  eating: () => void;
}
type Fish = ISwim | IEat;
type Bird = ISwim & IEat;
const fish: Fish = {
  swimming() {},
};
const bird: Bird = {
  swimming() {},
  eating() {},
};
export {}

接口实现

接口可以通过类使用 implements 关键字来实现,类只能继承一个父类,但是可以实现多个接口

interface ISwim {
  swimming: () => void
}
interface IEat {
  eating: () => void
}
class Animal {}
class Fish extends Animal implements ISwim, IEat {
  swimming(){}
  eating(){}
}
class Person implements ISwim {
  swimming(){}
}
function swiMaction(iswim: ISwim){
  iswim.swimming()
}
swimAction(new Fish())
swimAction(new Person())

没有实现接口的类,自然是没有该接口中的方法

在这里插入图片描述

interface 和 type 的区别

很多时候 interface 和 type 是相同的,但有一个明显区别在于 interface 可以重复定义,类型注解会累加,而 type 重复定义会报错

在这里插入图片描述

字面量赋值

直接把字面量赋值类型给变量时,会对字面量进行类型推导,多出的属性会报错

在这里插入图片描述

但是将对象的引用赋值的话,会进行 freshness 擦除操作,类型检测时将多余的属性擦除,如果依然满足类型就可以赋值

在这里插入图片描述

枚举类型

枚举类型通过 enum 关键字来定义,它和联合类型实现的功能类似,但是枚举类型的代码阅读性会更强一些

enum Direction {
  LEFT,
  RIGHT,
  TOP,
  BOTTOM,
}
function turnDirection(direction: Direction) {
  switch (direction) {
    case Direction.LEFT:
      break;
    case Direction.RIGHT:
      break;
    case Direction.TOP:
      break;
    case Direction.BOTTOM:
      break;
    default:
      const foo: never = direction;
      break;
  }
}
turnDirection(Direction.LEFT);

泛型

泛型函数

当不确定入参的类型时,可以定义类型注解为泛型,使用的时候再指定具体类型,使用 <> 来进行泛型的定义。

function self<T>(element: T) {
  return element;
}
self<string>("alice");
self<number>(2);
self<null>(null);

如果没有定义类型,ts会进行类型推导,有可能并不是我们希望的类型,如以下字符串推导出来不是”string“字符串类型,而是“hello”字面量类型。

在这里插入图片描述

当存在多个参数时,在泛型中定义多个即可

function foo<T, E, O>(a: T, b: E, c: O){}
foo(1, 'alice', false)
foo(['alice'], undefined, null)

泛型接口

在接口中使用泛型,将类型注解写在接口名后

interface Person<T, E> {
  name: T;
  age: E;
}
const person: Person<string, number> = {
  name: "alice",
  age: 20,
};

在接口中使用泛型是无法进行类型推导的,使用的时候必须指定具体的类型

在这里插入图片描述

除非在接口定义的时候给泛型设置了默认值

interface Book<T = string, E = number> {
  cateGory: T;
  price: E;
}
const book: Book = {
  category: "nature",
  price: 88.6,
};
const dictionary: Book<number, string> = {
  category: 1,
  price: '88'
}

泛型类

类中定义的方式,只是将具体的数据类型替换成了泛型,在类中是可以进行类型推导的

class Point<T> {
  x: T;
  y: T;
  z: T;
  constructor(x: T, y: T, z: T) {
    this.x = x;
    this.y = y;
    this.z = z;
  }
}
new Point("1.55", "2.34", "3.67");
new Point(1.55, 2.34, 3.67);

类型约束

泛型可以通过继承来进行类型约束

只需要传入的参数满足泛型的条件,即有 length 属性

interface ILength {
  length: number;
}
function getLength<T extends ILength>(element: T) {
  return element.length;
}
getLength("alice");
getLength(["alice", "kiki", "lucy"]);
getLength({ length: 5 });

接口、枚举、泛型 这些类型在javascript都是没有的,但在TypeScirpt中都是非常重要的类型注解。

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!    

--结束END--

本文标题: TypeScript中的接口和泛型你了解吗

本文链接: https://www.lsjlt.com/news/142718.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • TypeScript中的接口和泛型你了解吗
    目录接口对象类型索引类型函数类型继承交叉类型接口实现interface 和 type 的区别字面量赋值枚举类型泛型泛型函数泛型接口泛型类类型约束总结接口 使用 interface 关...
    99+
    2022-11-13
  • TypeScript中的接口和泛型是什么
    这篇文章给大家分享的是有关TypeScript中的接口和泛型是什么的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。接口使用 interface 关键字来定义数据类型对象类型当存在于较长的数据类型约束时,我们可以通过...
    99+
    2023-06-29
  • typeScript泛型使用和泛型接口结合的方法
    这篇“typeScript泛型使用和泛型接口结合的方法”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“typeScript泛型...
    99+
    2023-06-29
  • 一篇文章带你了解java泛型--泛型类,泛型方法,泛型接口
    目录Java 泛型Java 泛型是什么泛型类泛型类的格式泛型类举例泛型方法泛型方法的格式泛型方法举例泛型接口泛型接口的格式泛型接口举例泛型接口实现类:测试接口类:打印结果:总结Jav...
    99+
    2022-11-12
  • Golang中的泛型你真的了解吗
    目录什么是泛型为什么需要泛型泛型语法类型参数类型集类型推断总结Golang 在 1.18 版本更新后引入了泛型,这是一个重要的更新,Gopher 万众瞩目,为 Golang 带来了更...
    99+
    2023-05-20
    Golang泛型用法 Golang泛型学习 Golang泛型 Go 泛型
  • java的泛型你真的了解吗
    目录泛型的概述和优势自定义泛型类自定义泛型方法自定义泛型接口泛型通配符、上下限总结泛型的概述和优势 泛型概述 泛型:是JDK5中引入的特性,可以在编译阶段约束操作的数据类型,并进行检...
    99+
    2022-11-13
  • TypeScript中的函数和类你了解吗
    目录函数作为参数定义函数函数参数的类型可选类型参数默认值剩余参数this的默认推导函数重载类初始化继承多态成员修饰符总结函数 以下声明了一个函数类型,通过type来定义类型别名,vo...
    99+
    2022-11-13
  • Java中的抽象类和接口你了解吗
    目录抽象类什么是抽象类?抽象类属于什么类型?抽象类怎么定义?抽象类是干什么的?什么是抽象方法?非抽象类继承抽象类抽象类总结接口接口的基础语法接口的实现接口和多态联合使用继承和实现同时...
    99+
    2022-11-13
  • PHP接口中的数据类型:你真的理解了吗?
    当我们在进行 PHP 接口开发时,数据类型是一个非常重要的概念。虽然我们在学习编程的时候都会学习到数据类型这个概念,但是在实际开发中,我们有时候可能并没有真正理解数据类型的概念,也不知道如何正确使用它们。因此,在本文中,我们将深入探讨 PH...
    99+
    2023-06-01
    接口 学习笔记 数据类型
  • NumPy接口在Python和Spring中的应用,你了解吗?
    NumPy接口是Python中最常用的数据科学工具之一。它是一个用于处理大型多维数组和矩阵的库,同时也提供了许多用于执行各种数学操作的函数。它的应用范围非常广泛,从数据处理到机器学习、深度学习等领域都有广泛应用。在本文中,我们将探讨如何在P...
    99+
    2023-10-20
    spring numy 接口
  • C语言的模板与泛型编程你了解吗
    目录模板与泛型编程浅谈摘要(Effective C++):模板与泛型编程简单介绍函数模板模板编译类模板为什么我们需要模板特例化?总结模板与泛型编程浅谈 摘要(Effective C+...
    99+
    2022-11-13
  • Javascript的原型和原型链你了解吗
    目录一、为什么要使用原型?怎样去理解原型的出现1、对象字面量创建对象的缺点2、工厂函数3、构造函数二、使用原型三、原型概念辨析四、原型链练习总结一、为什么要使用原型?怎样去理解原型的...
    99+
    2022-11-13
  • ASP容器接口IDE:你真的了解它吗?
    ASP容器接口IDE是一种重要的工具,它可以帮助开发人员更加轻松地开发ASP应用程序。但是,很多开发人员并不了解这个工具,甚至不知道它的存在。在本文中,我们将深入探讨ASP容器接口IDE的相关内容,了解它的功能和使用方法。 一、ASP容器...
    99+
    2023-08-02
    容器 接口 ide
  • ASP Windows对象接口: 你真的了解它吗?
    ASP是一种在Web应用程序中用于创建动态页面的技术,它允许开发人员使用不同的编程语言来编写脚本,其中包括VBScript、JavaScript和JScript等。在使用ASP开发Web应用程序时,Windows对象接口扮演着非常重要的角...
    99+
    2023-08-29
    windows 对象 接口
  • 你真的了解Python、Spring和NumPy接口之间的关系吗?
    Python、Spring和NumPy接口之间的关系 Python、Spring和NumPy是当前最流行的编程语言和框架之一。Python是一种高级编程语言,拥有简单易学、功能强大、灵活性高的特点,被广泛应用于Web开发、数据分析、人工智能...
    99+
    2023-10-20
    spring numy 接口
  • 接口是Go语言中的重要特性,你了解吗?
    在Go语言中,接口是一种非常重要的特性。它允许我们定义一组方法,并将其绑定到特定的类型上。通过接口,我们可以实现多态性,使得代码更加灵活和可扩展。在本文中,我们将深入探讨Go语言中的接口,并通过演示代码来展示它们的用法。 一、什么是接口?...
    99+
    2023-08-05
    对象 接口 数据类型
  • 一篇文章带你了解Java泛型的super和extends
    目录概念简单理解代码样例解读关于List<? super T>add方面返回值方面关于List<? extendsT>add方面返回值方面总结...
    99+
    2022-11-12
  • Python 中的单分派泛函数你真的了解吗
    泛型,如果你学过Java ,应该对它不陌生吧。但你可能不知道在 Python 中(3.4+ ),也可以实现简单的泛型函数。 在Python中只能实现基于单个(第一个)参数的数据类型来...
    99+
    2022-11-12
  • GO语言接口的优势与劣势,你了解吗?
    当今的编程语言越来越多,其中Go语言因其高效、简单、易学等优势而备受青睐。在Go语言中,接口是一种重要的特性。接口在Go语言中扮演着非常重要的角色,是Go语言与其他语言的重要区别之一。 那么,GO语言接口的优势与劣势是什么呢?下面我们来探讨...
    99+
    2023-06-15
    自然语言处理 打包 接口
  • Java接口面试:你真的了解如何打包吗?
    在Java开发中,接口是一种非常常见的程序设计模式,它能够让代码更加灵活和可扩展。不过,在面试中,考官往往会深入探讨接口的打包问题,因此,掌握如何打包接口是非常重要的。 接下来,本文将从以下几个方面介绍Java接口打包的相关知识: 什...
    99+
    2023-08-18
    接口 面试 打包
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作