简单对比,看看TypeScript中interface和type间的区别
interface和type的区别是什么?本篇文章就来对比一下TypeScript中interface和type,带大家了解一下interface和type间的差异,介绍一下在实际使用中选哪个!
当我们使用 TypeScript 时,就会用到 interface
和 type
,平时感觉他们用法好像是一样的,没啥区别,都能很好的使用,所以也很少去真正的理解它们之间到底有啥区别。我们开发过经常或这么来定义类型:
interface Point { x: number; y: number; }
或者这样定义:
type Point = { x: number; y: number; };
interface
和 type
之间的差异不仅仅是次要语法声明。那么,今天我们就来看看这两家伙之间存在啥不可告人的秘密。
类型和类型别名
TypeScript 有 boolean
、number
、string
等基本类型。如果我们想声明高级类型,我们就需要使用类型别名。
类型别名指的是为类型创建新名称。需要注意的是,我们并没有定义一个新类型。使用type
关键字可能会让我们觉得是创建一个新类型,但我们只是给一个类型一个新名称。
所以我们所以 type 时,不是在创建新的类别,而是定义类型的一个别名而已。
接口
与 type
相反,接口仅限于对象类型。它们是描述对象及其属性的一种方式。类型别名声明可用于任何基元类型、联合或交集。在这方面,接口被限制为对象类型。
interface 和 type 的相似之处
在讨论它们的区别之前,我们先来看看它们的相似之处。
两者都可以被继承
interface 和 type 都可以继承。另一个值得注意的是,接口和类型别名并不互斥。类型别名可以继承接口,反之亦然。
对于一个接口,继承另一个接口
interface PartialPointX { x: number; } interface Point extends PartialPointX { y: number; }
或者,继承一个类型
type PartialPointX = { x: number; }; interface Point extends PartialPointX { y: number; }
类型继承另一个类型:
type PartialPointX = { x: number; }; type Point = PartialPointX & { y: number; };
或者,继承一个接口:
interface PartialPointX { x: number; } type Point = PartialPointX & { y: number; };
实现
类可以实现接口以及类型(TS 2.7+)。但是,类不能实现联合类型。
interface Point { x: number; y: number; } class SomePoint implements Point { x = 1; y = 2; } type AnotherPoint = { x: number; y: number; }; class SomePoint2 implements AnotherPoint { x = 1; y = 2; } type PartialPoint = { x: number; } | { y: number; }; // Following will throw an error class SomePartialPoint implements PartialPoint { x = 1; y = 2; }
interface 和 type 的区别
并集和交集类型
虽然接口可以被扩展和合并,但它们不能以联合和交集的形式组合在一起。类型可以使用联合和交集操作符来形成新的类型。
// object type PartialPointX = { x: number; }; type PartialPointY = { y: number; }; // 并集 type PartialPoint = PartialPointX | PartialPointY; // 交集 type PartialPoint = PartialPointX & PartialPointY;
声明合并
TypeScript编译器合并两个或多个具有相同名称的接口。 这不适用于类型。 如果我们尝试创建具有相同名称但不同的属性的两种类型,则TypeScript编译器将抛出错误。
// These two declarations become: // interface Point { x: number; y: number; } interface Point { x: number; } interface Point { y: number; } const point: Point = { x: 1, y: 2 };
元组类型
元组(键值对)只能通过type
关键字进行定义。
type Point = [x: number, y: number];
没有办法使用接口声明元组。不过,我们可以在接口内部使用元组
interface Point { coordinates: [number, number] }
我们应该使用哪一个?
一般来说,接口和类型都非常相似。
对于库或第三方类型定义中的公共API定义,应使用接口来提供声明合并功能。除此之外,我们喜欢用哪个就用哪个,但是在整个代码库中应该要保持一致性。
英文原文地址:https://www.wisdomgeek.com/development/web-development/typescript/typescript-the-difference-between-interface-and-type/
作者:SARANSH KATARIA
更多编程相关知识,请访问:编程入门!!
Atas ialah kandungan terperinci 简单对比,看看TypeScript中interface和type间的区别. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian Pengenalan: Dengan perkembangan teknologi yang berterusan, teknologi pengecaman pertuturan telah menjadi bahagian penting dalam bidang kecerdasan buatan. Sistem pengecaman pertuturan dalam talian berdasarkan WebSocket dan JavaScript mempunyai ciri kependaman rendah, masa nyata dan platform merentas, dan telah menjadi penyelesaian yang digunakan secara meluas. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem pengecaman pertuturan dalam talian.

WebSocket dan JavaScript: Teknologi utama untuk merealisasikan sistem pemantauan masa nyata Pengenalan: Dengan perkembangan pesat teknologi Internet, sistem pemantauan masa nyata telah digunakan secara meluas dalam pelbagai bidang. Salah satu teknologi utama untuk mencapai pemantauan masa nyata ialah gabungan WebSocket dan JavaScript. Artikel ini akan memperkenalkan aplikasi WebSocket dan JavaScript dalam sistem pemantauan masa nyata, memberikan contoh kod dan menerangkan prinsip pelaksanaannya secara terperinci. 1. Teknologi WebSocket

Pengenalan kepada cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata: Dengan populariti Internet dan kemajuan teknologi, semakin banyak restoran telah mula menyediakan perkhidmatan pesanan dalam talian. Untuk melaksanakan sistem pesanan dalam talian masa nyata, kami boleh menggunakan teknologi JavaScript dan WebSocket. WebSocket ialah protokol komunikasi dupleks penuh berdasarkan protokol TCP, yang boleh merealisasikan komunikasi dua hala masa nyata antara pelanggan dan pelayan. Dalam sistem pesanan dalam talian masa nyata, apabila pengguna memilih hidangan dan membuat pesanan

Cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tempahan dalam talian Dalam era digital hari ini, semakin banyak perniagaan dan perkhidmatan perlu menyediakan fungsi tempahan dalam talian. Adalah penting untuk melaksanakan sistem tempahan dalam talian yang cekap dan masa nyata. Artikel ini akan memperkenalkan cara menggunakan WebSocket dan JavaScript untuk melaksanakan sistem tempahan dalam talian dan memberikan contoh kod khusus. 1. Apakah itu WebSocket? WebSocket ialah kaedah dupleks penuh pada sambungan TCP tunggal.

Ralat berlaku apabila ubuntu memasang cakera keras mudah alih: mount: unknownfilesystemtype'exfat' Kaedah pemprosesan adalah seperti berikut: Ubuntu13.10 atau install exfat-fuse: sudoapt-getinstallexfat-fuseUbuntu13.04 atau di bawah sudoapt-add-repositoryppa:relan. /exfatsudoapt-getupdatesudoapt-getinstallfuse- exfatCentOS Linux memasang format exfat penyelesaian ralat cakera USB untuk memuatkan extfa dalam CentOS

JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap Pengenalan: Hari ini, ketepatan ramalan cuaca sangat penting kepada kehidupan harian dan membuat keputusan. Apabila teknologi berkembang, kami boleh menyediakan ramalan cuaca yang lebih tepat dan boleh dipercayai dengan mendapatkan data cuaca dalam masa nyata. Dalam artikel ini, kita akan mempelajari cara menggunakan teknologi JavaScript dan WebSocket untuk membina sistem ramalan cuaca masa nyata yang cekap. Artikel ini akan menunjukkan proses pelaksanaan melalui contoh kod tertentu. Kami

Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest

Pengenalan kepada kaedah mendapatkan kod status HTTP dalam JavaScript: Dalam pembangunan bahagian hadapan, kita selalunya perlu berurusan dengan interaksi dengan antara muka bahagian belakang, dan kod status HTTP adalah bahagian yang sangat penting daripadanya. Memahami dan mendapatkan kod status HTTP membantu kami mengendalikan data yang dikembalikan oleh antara muka dengan lebih baik. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan memberikan contoh kod khusus. 1. Apakah kod status HTTP bermakna kod status HTTP apabila penyemak imbas memulakan permintaan kepada pelayan, perkhidmatan tersebut
