kode javascript

Apakah enum kata yang dicadangkan dalam javascript?

Meskipun enum_ adalah kata yang dicadangkan dalam JavaScript, JavaScript tidak mendukung enum tradisional. Namun, cukup mudah untuk mendefinisikan enum menggunakan objek dalam JavaScript. Misalnya, TypeScript memiliki dukungan untuk enum

enum Direction {
  Up,
  Down,
  Left,
  Right
}

Saat runtime, TypeScript mengkompilasi kode di atas ke dalam objek seperti enum di bawah

const Direction = {
  Up: 'Up',
  Down: 'Down',
  Left: 'Left',
  Right: 'Right'
};
_

Objek ini memiliki sebagian besar fitur yang Anda harapkan dari sebuah enum

  1. Dapatkan semua nilai enum yang diizinkan. Object.keys[Direction] mengembalikan array ['Up', 'Down', 'Left', 'Right']
  2. Periksa apakah suatu nilai sama dengan nilai enum. val === Direction.Up
  3. Periksa apakah ada nilai dalam enum. Direction.hasOwnProperty['Up']

Namun, ada beberapa keterbatasan

  1. Anda dapat memodifikasi enum setelah pembuatan instance. Misalnya, ________72______
  2. Jika val === undefined, maka 
    const Direction = {
  Up: 'Up',
  Down: 'Down',
  Left: 'Left',
  Right: 'Right'
};
    0 dan 
    const Direction = {
  Up: 'Up',
  Down: 'Down',
  Left: 'Left',
  Right: 'Right'
};
    1. Jadi kesalahan ketik pada properti enum dapat menyebabkan masalah
  3. Tidak ada jaminan bahwa nilai properti tidak bertentangan. 
    const Direction = {
  Up: 'Up',
  Down: 'Down',
  Left: 'Left',
  Right: 'Right'
};
    _2 valid

Anda dapat membuat objek JavaScript tidak dapat diubah menggunakan 

const Direction = {
  Up: 'Up',
  Down: 'Down',
  Left: 'Left',
  Right: 'Right'
};
3. Menggunakan 
const Direction = {
  Up: 'Up',
  Down: 'Down',
  Left: 'Left',
  Right: 'Right'
};
_3 dan sebuah fungsi, Anda dapat mengatasi batasan [1] dan [3]

Pendekatan Berbasis Kelas

dr. Axel Rauschmayer menyajikan pendekatan yang jauh lebih canggih dalam postingan blog ini menggunakan kelas JavaScript. Pendekatannya akan terlihat lebih seperti ini

class Direction {
  static Up = new Direction['Up'];
  static Down = new Direction['Down'];
  static Left = new Direction['Left'];
  static Right = new Direction['Right'];

  constructor[name] {
    this.name = name;
  }
  toString[] {
    return `Color.${this.name}`;
  }
}

Inilah cara Anda dapat bekerja dengan kelas 

const Direction = {
  Up: 'Up',
  Down: 'Down',
  Left: 'Left',
  Right: 'Right'
};
5

  1. Dapatkan semua nilai enum yang diizinkan. Object.keys[Direction] mengembalikan array ['Up', 'Down', 'Left', 'Right']
  2. Periksa apakah suatu nilai sama dengan nilai enum. 
    const Direction = {
  Up: 'Up',
  Down: 'Down',
  Left: 'Left',
  Right: 'Right'
};
    _8
  3. Periksa apakah ada nilai dalam enum. 
    const Direction = {
  Up: 'Up',
  Down: 'Down',
  Left: 'Left',
  Right: 'Right'
};
    _9

Pendekatan ini menarik, dan bahkan ada paket enumify npm yang mengimplementasikan pendekatan dasar ini bersama dengan gula sintaksis tambahan. Pendekatan ini juga memiliki manfaat rapi yang 

class Direction {
  static Up = new Direction['Up'];
  static Down = new Direction['Down'];
  static Left = new Direction['Left'];
  static Right = new Direction['Right'];

  constructor[name] {
    this.name = name;
  }
  toString[] {
    return `Color.${this.name}`;
  }
}
0 melempar kesalahan, yang berarti Anda tidak sengaja memeriksa 
class Direction {
  static Up = new Direction['Up'];
  static Down = new Direction['Down'];
  static Left = new Direction['Left'];
  static Right = new Direction['Right'];

  constructor[name] {
    this.name = name;
  }
  toString[] {
    return `Color.${this.name}`;
  }
}
1 jika Anda salah ketik properti enum

Namun, kami umumnya menyarankan penggunaan 

const Direction = {
  Up: 'Up',
  Down: 'Down',
  Left: 'Left',
  Right: 'Right'
};
_3 pada POJO untuk mewakili enum. Enumify memang menawarkan keuntungan dan beberapa gula sintaksis yang rapi, tetapi menurut kami POJO memberi Anda sebagian besar keuntungan dengan biaya tambahan yang jauh lebih sedikit

Diberikan enum yang ada 

1declare const brand: unique symbol;
2

3type Brand = K & { readonly [brand]: T };
4

5type USD = Brand;
6type EUR = Brand;
7

8let euroAccount = 0 as EUR;
9let dollarAccount = 50 as USD;
10

11// Error: Type '"USD"' is not assignable to type '"EUR"'.
12euroAccount = dollarAccount;
_4, ketika Anda ingin mengganti nilai yang ada 
1declare const brand: unique symbol;
2

3type Brand = K & { readonly [brand]: T };
4

5type USD = Brand;
6type EUR = Brand;
7

8let euroAccount = 0 as EUR;
9let dollarAccount = 50 as USD;
10

11// Error: Type '"USD"' is not assignable to type '"EUR"'.
12euroAccount = dollarAccount;
5 dengan e. g. 
1declare const brand: unique symbol;
2

3type Brand = K & { readonly [brand]: T };
4

5type USD = Brand;
6type EUR = Brand;
7

8let euroAccount = 0 as EUR;
9let dollarAccount = 50 as USD;
10

11// Error: Type '"USD"' is not assignable to type '"EUR"'.
12euroAccount = dollarAccount;
_6, Anda mengubah nilai enum dan selesai

Saat Anda menggunakan referensi dalam basis kode Anda, 

1declare const brand: unique symbol;
2

3type Brand = K & { readonly [brand]: T };
4

5type USD = Brand;
6type EUR = Brand;
7

8let euroAccount = 0 as EUR;
9let dollarAccount = 50 as USD;
10

11// Error: Type '"USD"' is not assignable to type '"EUR"'.
12euroAccount = dollarAccount;
7 tetap ada tetapi hanya nilai yang diperbarui

Penggunaan enum saat kita perlu mengubah nilai 'POST'

1enum HttpMethod {
2  Get = "GET",
3  Post = "POST",
4}
5

6const method: HttpMethod = HttpMethod.Post;
7//    ^? 'POST'

Argumen ini tidak terlalu kuat, karena

  1. Nilai jarang berubah
  2. Ini bukan hanya solusi yang mungkin [tipe gabungan, objek + 
    1declare const brand: unique symbol;
    2

    3type Brand = K & { readonly [brand]: T };
    4

    5type USD = Brand;
    6type EUR = Brand;
    7

    8let euroAccount = 0 as EUR;
    9let dollarAccount = 50 as USD;
    10

    11// Error: Type '"USD"' is not assignable to type '"EUR"'.
    12euroAccount = dollarAccount;
    8]

Jenis seperti buram

Jika Anda tidak terbiasa dengan tipe Opaque, ini adalah cara untuk mendeklarasikan tipe dari struktur yang sama, yang tidak dapat ditetapkan satu sama lain

Contoh sempurna dapat berupa 2 mata uang [mis. g. USD dan EUR]. Anda tidak bisa begitu saja memasukkan dolar ke akun euro tanpa memperhitungkan nilai tukar mata uang

Contoh tipe buram

1declare const brand: unique symbol;
2

3type Brand = K & { readonly [brand]: T };
4

5type USD = Brand;
6type EUR = Brand;
7

8let euroAccount = 0 as EUR;
9let dollarAccount = 50 as USD;
10

11// Error: Type '"USD"' is not assignable to type '"EUR"'.
12euroAccount = dollarAccount;

Enum string bertindak seperti tipe buram. Ini berarti bahwa kita hanya dapat menetapkan nilai dari enum ini, tetapi bukan literal string

Anda tidak dapat menggunakan string literal sebagai nilai string enum

1const enum VolumeStatus {
2  AUDIBLE = "AUDIBLE",
3  MUTED = "MUTED",
4  FORCE_MUTED = "FORCE_MUTED",
5}
6

7class Volume {
8  public status: VolumeStatus = VolumeStatus.AUDIBLE;
9}
10

11const volume = new Volume[];
12volume.status = VolumeStatus.AUDIBLE;
13

14// Error: Type '"AUDIBLE"' is not assignable to type 'VolumeStatus'.
15volume.status = "AUDIBLE";

🏝 Taman bermain – https. // tsplay. dev/W4xY4W

Mengapa tidak menggunakan enum

Enum numerik BUKAN tipe-aman

Mengingat enum numerik dan variabel apa pun dari jenisnya, TypeScript memungkinkan Anda untuk menetapkan nomor apa pun padanya

TypeScript memungkinkan untuk menetapkan nomor apa pun ke variabel tipe enum numerik

1enum Output {
2  Error = 1,
3  Warning = 2,
4  Log = 3,
5}
6

7interface Options {
8  output?: Output;
9}
10

11const options: Options = {};
12options.output = Output.Error;
13options.output = Output.Warning;
14options.output = Output.Log;
15

16// oops, but still safe
17options.output = 3;
18

19// !!! OOPS !!! unsafe 😅
20options.output = 4;
21options.output = 5;

🏝 Taman bermain – https. // tsplay. dev/mx3rBN

Enum BUKAN hanya fitur tipe yang ditambahkan

TypeScript seharusnya JavaScript, tetapi dengan fitur tipe statis ditambahkan

Jika kita menghapus semua tipe dari kode TypeScript, yang tersisa adalah kode JavaScript yang valid

Kata formal yang digunakan dalam dokumentasi TypeScript adalah "type-level extension"

Sebagian besar fitur TypeScript adalah ekstensi tingkat tipe ke JavaScript, dan tidak memengaruhi perilaku runtime kode

Diberikan fungsi 

1declare const brand: unique symbol;
2

3type Brand = K & { readonly [brand]: T };
4

5type USD = Brand;
6type EUR = Brand;
7

8let euroAccount = 0 as EUR;
9let dollarAccount = 50 as USD;
10

11// Error: Type '"USD"' is not assignable to type '"EUR"'.
12euroAccount = dollarAccount;
_9 di TypeScript

Contoh TypeScript

1function add[x: number, y: number]: number {
2  return x + y;
3}
4

5add[1, 2]; // Evaluates to 3

Dengan menghapus tipe, itu menjadi kode JS yang valid

Contoh yang sama tetapi dalam JavaScript

1function add[x, y] {
2  return x + y;
3}
4

5add[1, 2]; // Evaluates to 3

Sayangnya, enum melanggar aturan ini [dibandingkan dengan kelas yang hanya menambahkan informasi jenis di atas kode JS yang ada] untuk saat ini

Anda cukup mencoba mengeksekusi kode ini di browser dan Anda akan mendapatkan kesalahan sintaksis

Enum adalah kata kunci yang dicadangkan tetapi tidak dapat digunakan sekarang

1// Uncaught SyntaxError: Unexpected reserved word
2enum Answer { No = 0, Yes = 1 }

Saat posting blog ini ditulis, proposal untuk enum ECMAScript berada di tahap 0

Opsi const enum + pertahankanConstEnums === enum + potensi jebakan

Saat Anda menggunakan const enum, nilainya disisipkan dan tidak ada objek pencarian yang dipancarkan ke JavaScript

Namun, saat Anda mengaktifkan opsi di 

1const enum VolumeStatus {
2  AUDIBLE = "AUDIBLE",
3  MUTED = "MUTED",
4  FORCE_MUTED = "FORCE_MUTED",
5}
6

7class Volume {
8  public status: VolumeStatus = VolumeStatus.AUDIBLE;
9}
10

11const volume = new Volume[];
12volume.status = VolumeStatus.AUDIBLE;
13

14// Error: Type '"AUDIBLE"' is not assignable to type 'VolumeStatus'.
15volume.status = "AUDIBLE";
0, objek pencarian akan ditampilkan

Const enum dengan preservConstEnum yang diaktifkan

1// typescript
2const enum Answer {
3  No = 0,
4  Yes = "Yes",
5}
6

7const yes = Answer.Yes;
8const no = Answer.No;
9

10// javascript
11var Answer;
12[function [Answer] {
13  Answer[[Answer["No"] = 0]] = "No";
14  Answer["Yes"] = "Yes";
15}][Answer || [Answer = {}]];
16

17const yes = "Yes"; /* Answer.Yes */
18const no = 0; /* Answer.No */

Selain itu, saat Anda menerbitkan const enum atau mengkonsumsinya dari file deklarasi, Anda mungkin menghadapinya

Pilih solusi Anda

Mari kita simpulkan apa yang baru saja kita diskusikan dalam sebuah tabel

Pendekatan Deklarasi Tidak Pencarian Objects1Type-Safe2refactoring3Optimal4Type-only5OPaque-like6Numerik enum ________ 21 _______ 1 ____ol ________ ____ ______ ____ ______ ____ ______ ____ ________ ________ ________ ________.

  1. Jenis gabungan adalah fitur khusus jenis sehingga tidak ada kode JS yang dipancarkan. Const enum sebariskan nilainya dan tidak memancarkan objek pencarian. Solusi lain, i. e. objek + sebagai const dan enum normal, keluarkan objek pencarian

  2. Semua enum numerik [baik normal, heterogen, atau const] bukan tipe-aman karena Anda dapat menetapkan nomor apa pun ke variabel tipenya

  3. Hanya tipe gabungan yang tidak memiliki pemfaktoran ulang. Ini berarti bahwa jika Anda perlu memperbarui nilai dalam basis kode, Anda harus menjalankan pemeriksaan tipe atas basis kode Anda dan memperbaiki semua kesalahan tipe. Enum dan objek merangkumnya dengan menyimpan objek pencarian

  4. Untuk dapat membandingkan pendekatan antara satu sama lain, silakan lihat

  5. Hanya tipe gabungan yang merupakan fitur khusus tipe. Solusi lain memancarkan objek pencarian atau bukan hanya fitur tipe yang ditambahkan

  6. Kami memperlakukan semua enum string sebagai tipe mirip-buram. Ini berarti bahwa hanya nilainya yang dapat diberikan ke variabel tipenya

Bagaimana menyingkirkan enum

Jika Anda memutuskan untuk menghapus enum, berikut adalah saran saya

Enum numerik => objek + sebagai const + Nilai

Kita dapat menggunakan 

1declare const brand: unique symbol;
2

3type Brand = K & { readonly [brand]: T };
4

5type USD = Brand;
6type EUR = Brand;
7

8let euroAccount = 0 as EUR;
9let dollarAccount = 50 as USD;
10

11// Error: Type '"USD"' is not assignable to type '"EUR"'.
12euroAccount = dollarAccount;
8 dan mengekspos objek JS dengan cara yang sama seperti yang kita lakukan dengan enum numerik tetapi dengan cara yang aman

Itu juga termasuk di

Sebelum

Contoh dengan enum numerik

1enum Output {
2  Error = 1,
3  Warning = 2,
4  Log = 3,
5}
6

7interface Options {
8  output?: Output;
9}
10

11const options: Options = {};
12options.output = Output.Error;
13options.output = Output.Warning;
14options.output = Output.Log;
15

16// oops, but still safe
17options.output = 3;
18

19// !!! OOPS !!! unsafe 😅
20options.output = 4;
21options.output = 5;

Setelah

Contoh yang sama dengan objek, seperti const dan Values

1enum HttpMethod {
2  Get = "GET",
3  Post = "POST",
4}
5

6const method: HttpMethod = HttpMethod.Post;
7//    ^? 'POST'
_0

🏝 Bersama di Taman Bermain – https. // tsplay. dev/Nr4r3W

String const enum => tipe gabungan + literal string sebaris

Nilai dalam string const enums biasanya cukup jelas, jadi kita bisa menggunakan tipe gabungan tanpa kehilangan keterbacaan

Ukuran bundel akan sama dengan literal string yang sama yang digariskan saat Anda menggunakan const enum

Sebelum

Contoh dengan string const enum

1enum HttpMethod {
2  Get = "GET",
3  Post = "POST",
4}
5

6const method: HttpMethod = HttpMethod.Post;
7//    ^? 'POST'
_1

Setelah

Contoh yang sama dengan tipe literal string

1enum HttpMethod {
2  Get = "GET",
3  Post = "POST",
4}
5

6const method: HttpMethod = HttpMethod.Post;
7//    ^? 'POST'
_2

Jika Anda perlu menyimpan nilai [mis. e. 

1enum Output {
2  Error = 1,
3  Warning = 2,
4  Log = 3,
5}
6

7interface Options {
8  output?: Output;
9}
10

11const options: Options = {};
12options.output = Output.Error;
13options.output = Output.Warning;
14options.output = Output.Log;
15

16// oops, but still safe
17options.output = 3;
18

19// !!! OOPS !!! unsafe 😅
20options.output = 4;
21options.output = 5;
_0] dalam tipe terpisah, seperti 
1enum Output {
2  Error = 1,
3  Warning = 2,
4  Log = 3,
5}
6

7interface Options {
8  output?: Output;
9}
10

11const options: Options = {};
12options.output = Output.Error;
13options.output = Output.Warning;
14options.output = Output.Log;
15

16// oops, but still safe
17options.output = 3;
18

19// !!! OOPS !!! unsafe 😅
20options.output = 4;
21options.output = 5;
1 sebelumnya di enum, Anda masih bisa melakukannya

Jenis kesimpulan dari OutputEvent2

1enum HttpMethod {
2  Get = "GET",
3  Post = "POST",
4}
5

6const method: HttpMethod = HttpMethod.Post;
7//    ^? 'POST'
_3

🏝 Bersama di Taman Bermain – https. // tsplay. dev/mM1klm

Numeric const enums => tergantung

Nilai dalam angka konstanta biasanya tidak dapat dibaca [mis. g. 

1enum Output {
2  Error = 1,
3  Warning = 2,
4  Log = 3,
5}
6

7interface Options {
8  output?: Output;
9}
10

11const options: Options = {};
12options.output = Output.Error;
13options.output = Output.Warning;
14options.output = Output.Log;
15

16// oops, but still safe
17options.output = 3;
18

19// !!! OOPS !!! unsafe 😅
20options.output = 4;
21options.output = 5;
2, 
1enum Output {
2  Error = 1,
3  Warning = 2,
4  Log = 3,
5}
6

7interface Options {
8  output?: Output;
9}
10

11const options: Options = {};
12options.output = Output.Error;
13options.output = Output.Warning;
14options.output = Output.Log;
15

16// oops, but still safe
17options.output = 3;
18

19// !!! OOPS !!! unsafe 😅
20options.output = 4;
21options.output = 5;
3]

Ketika sebuah makna tidak masuk akal, Anda masih bisa menggunakan tipe gabungan

Jenis serikat

1enum HttpMethod {
2  Get = "GET",
3  Post = "POST",
4}
5

6const method: HttpMethod = HttpMethod.Post;
7//    ^? 'POST'
_4

Jika tidak, ikuti pendekatan dengan

Ini pasti akan meningkatkan ukuran bundel Anda. Tapi sekali lagi, itu akan membuat kode Anda tetap aman dengan menghilangkan penetapan nomor apa pun

Untuk membandingkan ukuran bundel, silakan lihat

Bagaimana dengan enum ambien

Selain enum dan const enum, ada enum ambien

Ini adalah cara untuk mendeskripsikan bentuk tipe enum yang ada, mis. g

Deklarasi enum ambien

1enum HttpMethod {
2  Get = "GET",
3  Post = "POST",
4}
5

6const method: HttpMethod = HttpMethod.Post;
7//    ^? 'POST'
_5

Biasanya Anda dapat menemukannya di file deklarasi, mis. g.

@prisma/client/runtime/index. d. ts

1enum HttpMethod {
2  Get = "GET",
3  Post = "POST",
4}
5

6const method: HttpMethod = HttpMethod.Post;
7//    ^? 'POST'
_6

Masih sangat tidak mungkin Anda menggunakan enum ambien secara langsung di basis kode Anda. Saya akan merekomendasikan untuk menghindari menggunakannya

Jebakan const enum ambien

Jika Anda MELAKUKAN menggunakannya, Anda mungkin sudah tahu bahwa nilai enum inlining datang dengan implikasi yang halus, berikut adalah beberapa di antaranya

  1. Mereka tidak kompatibel dengan opsi di 

    1const enum VolumeStatus {
    2  AUDIBLE = "AUDIBLE",
    3  MUTED = "MUTED",
    4  FORCE_MUTED = "FORCE_MUTED",
    5}
    6

    7class Volume {
    8  public status: VolumeStatus = VolumeStatus.AUDIBLE;
    9}
    10

    11const volume = new Volume[];
    12volume.status = VolumeStatus.AUDIBLE;
    13

    14// Error: Type '"AUDIBLE"' is not assignable to type 'VolumeStatus'.
    15volume.status = "AUDIBLE";
    0

  2. Jika Anda mengekspor const enum dan menyediakannya sebagai API ke pustaka lain, ini dapat menyebabkan bug yang mengejutkan, mis. g. Const enum di TS Compiler API dapat membuat bergantung pada TypeScript menjadi sulit 🐞

  3. Impor yang tidak dapat diselesaikan untuk const enum yang digunakan sebagai nilai menyebabkan kesalahan saat runtime dengan opsi di 

    1const enum VolumeStatus {
    2  AUDIBLE = "AUDIBLE",
    3  MUTED = "MUTED",
    4  FORCE_MUTED = "FORCE_MUTED",
    5}
    6

    7class Volume {
    8  public status: VolumeStatus = VolumeStatus.AUDIBLE;
    9}
    10

    11const volume = new Volume[];
    12volume.status = VolumeStatus.AUDIBLE;
    13

    14// Error: Type '"AUDIBLE"' is not assignable to type 'VolumeStatus'.
    15volume.status = "AUDIBLE";
    0 disetel ke 
    1enum Output {
    2  Error = 1,
    3  Warning = 2,
    4  Log = 3,
    5}
    6

    7interface Options {
    8  output?: Output;
    9}
    10

    11const options: Options = {};
    12options.output = Output.Error;
    13options.output = Output.Warning;
    14options.output = Output.Log;
    15

    16// oops, but still safe
    17options.output = 3;
    18

    19// !!! OOPS !!! unsafe 😅
    20options.output = 4;
    21options.output = 5;
    6

TypeScript menyarankan untuk

A. Jangan gunakan const enum sama sekali. Anda dapat dengan mudah melarang const enum dengan bantuan linter. Jelas ini menghindari masalah apa pun dengan const enum, tetapi mencegah proyek Anda membuat inline enumnya sendiri. Tidak seperti menyejajarkan enum dari proyek lain, menyejajarkan enum proyek sendiri tidak bermasalah dan memiliki implikasi kinerja

B. Jangan publikasikan const enum ambien, dengan mendekonstifikasinya dengan bantuan 

1enum Output {
2  Error = 1,
3  Warning = 2,
4  Log = 3,
5}
6

7interface Options {
8  output?: Output;
9}
10

11const options: Options = {};
12options.output = Output.Error;
13options.output = Output.Warning;
14options.output = Output.Log;
15

16// oops, but still safe
17options.output = 3;
18

19// !!! OOPS !!! unsafe 😅
20options.output = 4;
21options.output = 5;
7. Ini adalah pendekatan yang diambil secara internal oleh proyek TypeScript itu sendiri. 
1enum Output {
2  Error = 1,
3  Warning = 2,
4  Log = 3,
5}
6

7interface Options {
8  output?: Output;
9}
10

11const options: Options = {};
12options.output = Output.Error;
13options.output = Output.Warning;
14options.output = Output.Log;
15

16// oops, but still safe
17options.output = 3;
18

19// !!! OOPS !!! unsafe 😅
20options.output = 4;
21options.output = 5;
_7 memancarkan JavaScript yang sama untuk enum const sebagai enum biasa. Anda kemudian dapat menghapus pengubah const dengan aman. d. ts dalam langkah build

Baca lebih lanjut tentang

Dampak ukuran bundel

Pertama-tama mari kita lihat contoh [saya hanya meninggalkan contoh dengan nilai heterogen]

Enum

1enum HttpMethod {
2  Get = "GET",
3  Post = "POST",
4}
5

6const method: HttpMethod = HttpMethod.Post;
7//    ^? 'POST'
_7

Konst enum

1enum HttpMethod {
2  Get = "GET",
3  Post = "POST",
4}
5

6const method: HttpMethod = HttpMethod.Post;
7//    ^? 'POST'
_8

Const enum dengan preservConstEnum yang diaktifkan

1// typescript
2const enum Answer {
3  No = 0,
4  Yes = "Yes",
5}
6

7const yes = Answer.Yes;
8const no = Answer.No;
9

10// javascript
11var Answer;
12[function [Answer] {
13  Answer[[Answer["No"] = 0]] = "No";
14  Answer["Yes"] = "Yes";
15}][Answer || [Answer = {}]];
16

17const yes = "Yes"; /* Answer.Yes */
18const no = 0; /* Answer.No */

Enum ambien

1declare const brand: unique symbol;
2

3type Brand = K & { readonly [brand]: T };
4

5type USD = Brand;
6type EUR = Brand;
7

8let euroAccount = 0 as EUR;
9let dollarAccount = 50 as USD;
10

11// Error: Type '"USD"' is not assignable to type '"EUR"'.
12euroAccount = dollarAccount;
_0

Enum const sekitar

1declare const brand: unique symbol;
2

3type Brand = K & { readonly [brand]: T };
4

5type USD = Brand;
6type EUR = Brand;
7

8let euroAccount = 0 as EUR;
9let dollarAccount = 50 as USD;
10

11// Error: Type '"USD"' is not assignable to type '"EUR"'.
12euroAccount = dollarAccount;
_1

Objek + sebagai const

1declare const brand: unique symbol;
2

3type Brand = K & { readonly [brand]: T };
4

5type USD = Brand;
6type EUR = Brand;
7

8let euroAccount = 0 as EUR;
9let dollarAccount = 50 as USD;
10

11// Error: Type '"USD"' is not assignable to type '"EUR"'.
12euroAccount = dollarAccount;
_2

Jenis serikat

1declare const brand: unique symbol;
2

3type Brand = K & { readonly [brand]: T };
4

5type USD = Brand;
6type EUR = Brand;
7

8let euroAccount = 0 as EUR;
9let dollarAccount = 50 as USD;
10

11// Error: Type '"USD"' is not assignable to type '"EUR"'.
12euroAccount = dollarAccount;
_3

Diberikan 3 jenis nilai yang berbeda [numerik, string, dan heterogen], mari bandingkan ukuran bundel [dalam byte] dari solusi yang berbeda

ApproachEnumConst enumConst enum + 
1enum Output {
2  Error = 1,
3  Warning = 2,
4  Log = 3,
5}
6

7interface Options {
8  output?: Output;
9}
10

11const options: Options = {};
12options.output = Output.Error;
13options.output = Output.Warning;
14options.output = Output.Log;
15

16// oops, but still safe
17options.output = 3;
18

19// !!! OOPS !!! unsafe 😅
20options.output = 4;
21options.output = 5;
7Objek + 
1declare const brand: unique symbol;
2

3type Brand = K & { readonly [brand]: T };
4

5type USD = Brand;
6type EUR = Brand;
7

8let euroAccount = 0 as EUR;
9let dollarAccount = 50 as USD;
10

11// Error: Type '"USD"' is not assignable to type '"EUR"'.
12euroAccount = dollarAccount;
8Union typeNilai numerik126441128044Nilai heterogen124481178348Nilai string116491088349

Saat Anda perlu menyimpan objek pencarian [enum, const enum + 

1enum Output {
2  Error = 1,
3  Warning = 2,
4  Log = 3,
5}
6

7interface Options {
8  output?: Output;
9}
10

11const options: Options = {};
12options.output = Output.Error;
13options.output = Output.Warning;
14options.output = Output.Log;
15

16// oops, but still safe
17options.output = 3;
18

19// !!! OOPS !!! unsafe 😅
20options.output = 4;
21options.output = 5;
7 dan objek + 
1declare const brand: unique symbol;
2

3type Brand = K & { readonly [brand]: T };
4

5type USD = Brand;
6type EUR = Brand;
7

8let euroAccount = 0 as EUR;
9let dollarAccount = 50 as USD;
10

11// Error: Type '"USD"' is not assignable to type '"EUR"'.
12euroAccount = dollarAccount;
8], solusi optimal selalu berupa objek + 
1declare const brand: unique symbol;
2

3type Brand = K & { readonly [brand]: T };
4

5type USD = Brand;
6type EUR = Brand;
7

8let euroAccount = 0 as EUR;
9let dollarAccount = 50 as USD;
10

11// Error: Type '"USD"' is not assignable to type '"EUR"'.
12euroAccount = dollarAccount;
8

Saat Anda tidak memerlukan objek pencarian [const enum dan tipe union], baik const enum dan tipe union adalah optimal

Jika Anda tertarik dengan perbandingan itu sendiri, silakan buka repo Github dengan-atau-tanpa-enums-bundle-size-impact 🔗

Teriak

Artikel ini tidak bisa sebagus itu tanpa bantuan dari

  • AleksandrSI
  • Joe Previt
  • bautistaaa
  • Biswajit Jha

Terima kasih rekan, umpan balik Anda sangat membantu. 👏

Tautan 🔗

  1. Bagaimana cara kerja varian enum yang berbeda di TypeScript?. Tumpukan Luapan

  2. Fitur TS yang harus dihindari. Jalankan Program

  10. Kata kunci yang dicadangkan JavaScript

  11. Proposal untuk enum ECMAScript. GitHub

  12. dengan-atau-tanpa-enums-bundel-ukuran-dampak. GitHub

naskah

Ditulis oleh Alexey Berezin yang mencintai London 🏴󠁧󠁢󠁥󠁮󠁧󠁿, pemain ⏯ dan naskah 🦺 Ikuti saya di Twitter

Apa kata-kata yang dicadangkan dalam JavaScript?

Kata yang dicadangkan .
merusak
menangkap
kelas
melanjutkan
debugger
bawaan
menghapus

Manakah yang bukan merupakan kata yang dicadangkan dalam JavaScript?

Identifier adalah IdentifierName yang bukan ReservedWord. Spesifikasi menjelaskan empat kelompok kata yang dipesan. kata kunci, kata cadangan masa depan, literal nol, dan literal boolean.

Apakah err kata yang dicadangkan dalam JavaScript?

Kata-kata yang dicadangkan ada di ECMA-262, meskipun menjengkelkan kata-kata itu tidak terdaftar menurut abjad. "err" bukan salah satunya .

Bài Viết Liên Quan

Cara menggunakan apa itu html brainly?
Apa metode plot di python?
Python periksa apakah kunci ada di kamus bersarang
Bagaimana Anda membekukan baris di excel 365?
Cara memeriksa versi mysql-connector-Java di linux
Tulis program python untuk mengubah array numpy menjadi nilai array dengan presisi 3
Cara menggunakan cara update spreadsheet
Cara menggunakan array_push associative array php
Ganti dengan di mana klausa mysql
Cara menggunakan dictionary values python 3
Apakah memperbarui php akan memengaruhi situs wordpress saya?
Cara mengecek mesin database di mysql
Tambahkan int ke array php
Cara menggunakan react-native-render-html props
Bagaimana cara membuat semua lembar excel saya dengan format yang sama?
Hapus semua kemunculan elemen dalam string python
Bisakah kita membaca cookie di javascript?
Cara edit file html di android
Dalam pembuatan html, kita mengenal bahasa yang digunakan kata
Perintah mana yang digunakan untuk memasukkan data ke dalam koleksi di mongodb?

Toplist mới

#1
Top 7 luas segitiga berikut adalah 130 cm k 300 cm - 120 cm 2023
6 tháng trước
#2
Top 16 negara asean yang memiliki jumlah penduduk paling sedikit adalah 2023
6 tháng trước
#3
Top 6 poh larutan cuka 0 1 m ka = 10 ⁻ ⁵ adalah 2023
6 tháng trước
#4
Top 8 sistem pengangkatan pegawai berdasarkan kecakapan atau kompetensi pegawai adalah 2023
6 tháng trước
#5
Top 8 proses pertama kali yang terjadi pada saat pembentukan urine adalah 2023
6 tháng trước
#6
Top 8 contoh diagonal bidang 2023
6 tháng trước
#7
Top 5 contoh ideologi transnasional 2023
6 tháng trước
#8
Top 7 kapur gamping dalam alat penjernih air berfungsi untuk …. 2023
6 tháng trước
#9
Top 6 rumus molekul senyawa dengan rumus empiris c2h2o dan mr 84 adalah 2023
6 tháng trước

Bài mới nhất

Chủ Đề

Kiat Bagus Cara Belajar Location Jelaskan Kesehatan dan kecantikan Bagaimana Teknologi Apa arti Arti kata Sebutkan Top List Toplist Apa yang Permainan Mengapa disebut Belajar dengan baik Membandingkan Perbedaan Berikut ini Makanan lezat Dimaksud Tentang Facebook Konstruksi Berikut yang Daftar Teratas javascript