TypeScript 中的type与interface

TypeScript 中的type与interface

对于 TypeScript,有两种定义类型的方法:typeinterface

人们常常想知道该使用哪一种,而答案并不是一刀切的。这确实取决于具体情况。有时,其中一种比另一种更好,但在许多情况下,我们可以互换使用它们。

那么,让我们来分析一下typeinterface有其区别和相似之处。

在本文中,我们将深入探讨这些区别,并总结什么时候使用它们。

type

js中有一些基本类型,如字符串、布尔值、数字、数组、元组和枚举。通过 TypeScripttype我们定义更多的类型,我们不是在创造新类型,只是给他们起了更友好的名字。这使得我们的代码更容易阅读和理解。

type MyNumber = number;
type User = {id: number;name: string;email: string;
}

例如,我们可以为number创建一个名为MyNumber的类型别名,因此我们可以直接说MyNumber,而不是写number

我们还可以为User 创建一个类型别名,它描述了用户的数据应该是什么样子。

当人们谈论type时,他们实际上是在谈论类型别名。这就像给同一组事物赋予不同的名称一样。

interface

TypeScript 中,将interface视为对象必须遵循的一组规则或要求。

interface Client { name: string; address: string;
}

现在,有另一种方式来表达这些规则。我们可以使用所谓的“类型注释”来更好的解释Client所包含的属性。

因此,无论我们使用type还是interface,我们本质上都是在为Client定义相同的期望集。这就像为同一组指令赋予两个不同的名称。

type与interface的差异

typeinterface都是用于定义自定义数据结构和形状,但它们的行为和用法有一些差异。

原始类型

使用type
type MyNumber = number;
使用interface

我们不能像直接使用interface定义原始类型number。原始类型都是在 TypeScript 中预定义的。

联合类型

使用type
type MyUnionType = number | string;

在这里,我们定义了一个MyUnionType的类型,它可以保存numberstring类型的值。

使用interface

interface通常不用于直接表示联合类型。

函数类型

使用type
type MyFunctionType = (arg1: number, arg2: string) => boolean;

这定义了一个MyFunctionType函数的类型,该函数接受两个参数(一个数字和一个字符串)并返回一个布尔值。

使用interface
interface MyFunctionInterface {(arg1: number, arg2: string): boolean;
}

声明合并

使用type

类型别名不支持声明合并。如果多次定义相同的类型别名,将会导致错误。

使用interface
interface Person {name: string;
}interface Person {age: number;
}

TypeScript 会自动将这两个Person接口合并为一个,并且具有nameage的属性。

扩展

使用extends
interface A { propA: number; }
interface B extends A { propB: string; }

接口B扩展接口A,继承propA属性并添加新属性propB

使用&来扩展
type AB = A & { propB: string; }

在这里,我们使用交集将类型A与新属性propB组合起来创建类型AB。

处理扩展时的冲突

TypeScript 强制扩展时具有相同名称的属性类型匹配:

interface A { commonProp: number; }
interface B { commonProp: string; }
interface AB extends A, B { }
// Error: Property 'commonProp' must have the same type in A and B

要解决冲突,我们需要确保类型匹配或使用函数的方法重载。

使用元组类型

使用type
type MyTupleType = [number, string];
const tuple: MyTupleType = [42, "hello"];

在这里,我们使用type定义一个元组类型,然后我们可以创建该元组类型的变量。

使用interface
interface MyTupleInterface {0: number;1: string;
}
const tuple: MyTupleInterface = [42, "hello"];

我们还可以使用接口定义元组类型,并且用法保持不变。

何时使用type与interface

当需要组合或修改现有结构时,请使用interface。如果我们正在使用库或创建新库,那么interface是我们的首选。

它们允许我们合并或扩展声明,从而更轻松地使用现有代码。当我们考虑面向对象编程时,interface也更具可读性。

当我们需要更强大的功能时,可以选择typeTypeScript 的类型系统提供了高级工具,例如条件类型、泛型、类型防护等等。

这些功能使我们可以更好地控制类型,帮助我们创建健壮的强类型应用程序。interface无法提供这些功能。

我们通常可以使用typeinterface,具体取决于我们的个人喜好。但是,在以下情况下请使用type

  • 当我们想要为基本数据类型创建新名称(例如“字符串”或“数字”)时。
  • 定义更复杂的类型(例如联合、元组或函数)时。
  • 重载函数时。
  • 使用映射类型、条件类型或类型防护等高级功能时。

type通常更灵活且更具表现力。它们提供了interface无法比拟的更广泛的高级功能,并且 TypeScript 不断扩展其功能。

我们使用类型别名来自动生成对象类型的 getter 方法,这是interface无法做到的:

type Client = {name: string;address: string;
}
type Getters<T> = {[K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};
type clientType = Getters<Client>;// {
//     getName: () => string;
//     getAddress: () => string;
// }

通过利用映射类型、模板文字和keyof运算符,我们创建了一个可以自动为任何对象类型生成 getter 方法的类型。

此外,许多开发人员更喜欢使用type,因为它们与函数式编程范例非常一致。

TypeScript 中类型表达式的丰富性使我们可以更轻松地使用组合和不变性等函数概念,同时保持代码中的类型安全。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/172246.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

059-第三代软件开发-巧用工控板LED指示灯引脚

第三代软件开发-巧用工控板LED指示灯引脚 文章目录 第三代软件开发-巧用工控板LED指示灯引脚项目介绍巧用工控板LED指示灯引脚第一种方式第二种方式 总结 关键字&#xff1a; Qt、 Qml、 Power、 继电器、 IO 项目介绍 欢迎来到我们的 QML & C 项目&#xff01;这个项…

video标签在h5中被劫持问题

将video的视频链接转为blob export const encryptionVideo (options: URL) > {return new Promise((resolve, reject) > {window.URL window.URL || window.webkitURL;var xhr new XMLHttpRequest();xhr.open(GET, options.url, true);xhr.responseType blob;xhr.onl…

题解(讲题时备用):CF1896-D. Ones and Twos

题解(讲题时备用)&#xff1a;CF1896-D. Ones and Twos 题目链接 Problem - D - Codeforces。 思路简述 我们不难得出只要询问中s&#xff08;s>2&#xff09;行&#xff0c;s-2就也行。&#xff08;通过区间内的左端点和右端点上面的数可以得出&#xff09; 之后维护偶…

圆通速递单号查询入口,以表格的形式导出详细物流信息

批量查询圆通速递单号的物流信息&#xff0c;并以表格的形式导出单号的详细物流信息。 所需工具&#xff1a; 一个【快递批量查询高手】软件 圆通速递单号若干 操作步骤&#xff1a; 步骤1&#xff1a;运行【快递批量查询高手】软件&#xff0c;第一次使用的伙伴记得先注册&…

C++初识类和对象

前言 上一期我们介绍了一些C入门的基础知识&#xff0c;本期我们来介绍面向对象。初步认识一下面向对象和面向过程、类、以及封装&#xff01; 本期内容介绍 面向过程和面向对象 类的引入 类的定义 类的访问限定符和封装 类的作用域 类的实例化 类对象模型 this指针 一、面向…

基本数据结构二叉树(1)

目录 1.树概念及结构 1.1树的概念 1.2 树的相关概念 1.3 树的表示 1.4 树在实际中的运用&#xff08;表示文件系统的目录树结构&#xff09; 2.二叉树概念及结构 2.1概念 2.2现实中的二叉树&#xff1a; 2.3 特殊的二叉树&#xff1a; 2.5 二叉树的存储结构 2. 链式存…

【多线程】-- 03 龟兔赛跑案例线程创建方法之三:Callable接口

多线程 2 线程创建 【续】2.2 龟兔赛跑案例 首先需要一个赛道距离&#xff0c;然后会距离终点越来越近判断比赛是否结束打印出胜利者龟兔赛跑开始故事中是乌龟获胜&#xff0c;兔子需要睡觉&#xff0c;所以要模拟兔子睡觉最终&#xff0c;乌龟赢得比赛 package com.duo.de…

C语言数据类型和变量

# C语言数据类型和变量 # 数据类型介绍 C语⾔提供了丰富的数据类型来描述⽣活中的各种数据。使⽤整型类型来描述整数&#xff0c;使⽤字符类型来描述字符&#xff0c;使⽤浮点型类型来描述⼩数。所谓“类型”&#xff0c;就是相似的数据所拥有的共同特征&#xff0c;编译器只有…

[ruby on rails] array、jsonb字段

一、jsonb # 新增 add_column :shi_tis, :setting, :jsonb, default: {}# string转jsonb def changechange_column :users, :setting, :jsonb, using: setting::jsonb, default: {} end# 加索引 add_index :users, :setting, using: :gin # 这样就为setting jsonb字段创建了一…

TypeScript中的枚举是什么?

在TypeScript中&#xff0c;枚举&#xff08;Enum&#xff09;是一种用于定义一组有命名的常量值的数据类型。它们可以提供更具可读性和可维护性的代码。 枚举的作用是为一组相关的值提供一个易于理解和使用的命名空间。它们可以用于代表一系列可能的选项、状态或标志&#xf…

CMake Error:No targets specified and no makefile found

在适用cmake构建项目的时候&#xff0c;突然遇到了这个报错 Make Error at CMakeLists.txt:1 (project): VERSION not allowed unless CMP0048 is set to NEW – Configuring incomplete, errors occurred! make: *** No targets specified and no makefile found. Stop. CMake…

MySQL进阶知识

目录 MySQL的Linux安装 存储引擎 MySQL的体系结构 存储引擎简介 存储引擎特点 InnoDB 逻辑存储结构 MyISAM Memory 对比 存储引擎选择 索引 介绍 索引结构 BTree索引 Hash索引 索引分类 索引语法 SQL性能分析 SQL执行频率 慢查询日志 profile详情 expla…

CRC 循环冗余检测

目录 一、基础知识1.异或运算xor2.模2算术&#xff08;1&#xff09;模2加法和减法&#xff08;2&#xff09;模2乘法&#xff08;3&#xff09;模2除法 二、CRC循环冗余检测1.背景2.原理3.求R 一、基础知识 1.异或运算xor 异或&#xff0c;顾名思义&#xff0c;只有当两个数…

算法基础一

两数之和 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 解题思路&#xff1a;这道题最优的做法时间复杂度是O(n)&#xff0c;顺序扫描数组&#xff0c;对每一个元素在…

Aibote4j java封装版本的

Aibote4j 交流Q群&#xff1a;496086899 开源地址&#xff1a;https://github.com/1341191074/aibote4j 更新yolo和ocr相关新增的能力&#xff0c;比较强劲了 下面是使用的案例 public class WebBotTest extends WebBot {public static void main(String[] args) {WebBotSer…

最新AI创作系统ChatGPT网站运营源码、支持GPT-4-Turbo模型,图片对话识图理解,支持DALL-E3文生图

一、AI创作系统 SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作ChatGPT&#xff1f;小编这里写一个详细图文教程吧&#xff01;本系统使用NestjsVueTypescript框架技术&#xff0c;持续集成AI能力到本系统。支持OpenAI DALL-E3文生图&#xff0c;…

事件委派+自定义属性+编程式导航实现路由跳转及传参

当我们页面中有许多a标签需要实现点击跳转到同一个页面并携带不同的参数时&#xff0c;我们就可以使用事件委派自定义属性编程式导航 的方式&#xff0c;用最小的内存实现路由跳转的最大效率。 为什么我们不用router-link 进行跳转&#xff1f; 要知道&#xff0c;我们页面中…

【单调栈】子数组的最小值之和

import java.util.Deque; import java.util.LinkedList;/** 参考链接&#xff1a;https://leetcode.cn/problems/sum-of-subarray-minimums/solutions/1930857/gong-xian-fa-dan-diao-zhan-san-chong-shi-gxa5/* https://leetcode.cn/problems/sum-of-subarray-minim…

Docker 的基本概念和优势,以及在应用程序开发中的实际应用。

Docker 是一种容器化技术&#xff0c;它将一个应用程序及其所有依赖项打包在一起&#xff0c;形成一个独立的、可移植的容器。这个容器可以在任何支持 Docker 的操作系统上运行&#xff0c;而且具有很好的可移植性和可扩展性。以下是 Docker 的基本概念和优势&#xff1a; 镜像…

论文公式和代码对应

NGCF 论文地址 NGCF模型全部代码 import torch import torch.nn as nn import torch.nn.functional as F class NGCF(nn.Module):def __init__(self, n_user, n_item, norm_adj, args):super(NGCF, self).__init__()self.n_user n_userself.n_item n_itemself.device args…