☰

TS における文字列列挙型と文字列リテラル型の違い 質問する

tag-icon • tag-icon typescript
TS における文字列列挙型と文字列リテラル型の違い 質問する

に文字列、、のみが含まれるようmyKeyにしたい場合、これを 2 つの方法で実現できます。{ myKey: '' }foobarbaz

   // with a String Literal Type 
   type MyKeyType = 'foo' | 'bar' | 'baz';

    // or with a String Enum   
    enum MyKeyType {
       FOO = 'foo',
       BAR = 'bar',
       BAZ = 'baz'
    }

どちらも同じように見えるので（条件チェックなどの値にアクセスする方法を除いて）、どちらが優れているか、どちらが劣っているか疑問に思います。

TS ドキュメントで私が見つけた唯一の違いは、Enum は実行時に実際のオブジェクトであるということです。これは場合によっては望ましいかもしれません。

ベストアンサー1

まあ、違いトランスパイルされたコード内の文字列列挙型とリテラル型の間。

比較するタイプスクリプトコード

// with a String Literal Type 
type MyKeyType1 = 'foo' | 'bar' | 'baz';

// or with a String Enum   
enum MyKeyType2 {
   FOO = 'foo',
   BAR = 'bar',
   BAZ = 'baz'
}

とともにトランスパイルされたJavaScriptコード

// or with a String Enum   
var MyKeyType2;
(function (MyKeyType2) {
    MyKeyType2["FOO"] = "foo";
    MyKeyType2["BAR"] = "bar";
    MyKeyType2["BAZ"] = "baz";
})(MyKeyType2 || (MyKeyType2 = {}));

ご覧のとおり、文字列リテラルには生成されたコードはありません。Typescripts Transpiler は、トランスパイル中に型の安全性のためだけに使用します。実行時に、文字列リテラルは「ダムに生成された」文字列です。リテラルの定義と使用法の間には参照がありません。

そこで、3つ目の選択肢として定数列挙型

これを見て

// with a String Literal Type 
type MyKeyType1 = 'foo' | 'bar' | 'baz';

// or with a String Enum   
enum MyKeyType2 {
   FOO = 'foo',
   BAR = 'bar',
   BAZ = 'baz'
}

// or with a Const String Enum   
const enum MyKeyType3 {
   FOO = 'foo',
   BAR = 'bar',
   BAZ = 'baz'
}

var a : MyKeyType1 = "bar" 
var b: MyKeyType2 = MyKeyType2.BAR
var c: MyKeyType3 = MyKeyType3.BAR

にトランスパイルされます

// or with a String Enum   
var MyKeyType2;
(function (MyKeyType2) {
    MyKeyType2["FOO"] = "foo";
    MyKeyType2["BAR"] = "bar";
    MyKeyType2["BAZ"] = "baz";
})(MyKeyType2 || (MyKeyType2 = {}));
var a = "bar";
var b = MyKeyType2.BAR;
var c = "bar" /* BAR */;

さらにプレイするには、こちらを確認してくださいリンク

私は、Enum.Value を入力する便利な方法のため、const enum の場合を好みます。Typescript は、トランスパイル時に最高のパフォーマンスを得るために、残りの作業を実行します。

おすすめ記事