TypeScriptにおけるDelete演算子について

Question

JavaScriptのdelete演算子について、MDNのサンプルコードを参考に
下記のように、まず動作確認しました。

const Employee = {
    firstName:'John',
    lastName:'Doe'
};
delete Employee.firstName
console.log(Employee)

このコードのアウトプットは下記でした。

{
lastName:"Doe"
}

つぎにTypeScript Playgroundにて上記と同様のコードを実行しようとしました。

const Employee = {
    firstName:'John',
    lastName:'Doe'
};
delete Employee.firstName
console.log(Employee)

しかし、delete Employee.firstNameのEmployee.firstName部分に
下記のようなエラーが表示されました。

The operand of a 'delete' operator must be optional.

deleteオペランド演算子はオプショナルでなければいけない、、、、、
なぜTypeScriptだとJavaScriptと同じような結果が得られないのでしょうか？
詳しい方ご教示いただけますと幸いです。

Answer 1

TypeScriptで

const Employee = {
    firstName:'John',
    lastName:'Doe'
};

と書いてしまったとき、Employeeの型は{firstName: string, lastName: string}であると勝手に推論されてしまいます。どういうことかというと、Employeeの型を省略せずに書いた場合、

const Employee: {
    firstName: string,
    lastName: string
} = {
    firstName:'John',
    lastName:'Doe'
};

となっているということです。{firstName: string, lastName: string}という型は、firstNameプロパティは必ず文字列として存在し、lastNameプロパティも必ず文字列として存在しなければなりません。このような型のオブジェクトに対してdelete Employee.firstName;とfirstNameプロパティを削除するようなコードは、型の制約によって許されない処理となっているため、TypeScriptからJavaScriptへ変換する時の型チェックの段階でエラーになります。(JavaScriptとして実行したときにエラーになるのではありません。)

これを回避するにはEmployeeはfirstNameプロパティがあってもなくてもいい型のオブジェクトだよと明記する必要があります。lastNameもついでに削除できるようにするとなると、次のように書く必要があるでしょう。

const Employee: {
    firstName?: string,
    lastName?: string
} = {
    firstName:'John',
    lastName:'Doe'
};

実際は再利用も考えてinterfaceを使っていった方が良いでしょう。

同じコードであっても、TypeScriptでは常に型推論が発生し、なんらかの型を強制的に押しつけています。型を明記しないことは何でも良い事を意味しません。型推論に慣れない内は、全ての変数に対して型を明記した方が良いかもしれません。

Comments

[takochan1192]

ご丁寧に回答いただきましてありがとうございます。
型推論で、firstName:stringと入っていたことが、delete演算子を使えない理由だったのですね。
確かに、EmloyeeはfirstName:string とlastName:stringがないとエラーになってしまいますね。
実は、interface で型を定義するときに、?を付けるか付けまいか迷っておりました。
RestAPIの取得なんかで、値が入ってくるかどうか曖昧なケースがある場合は、?を明示的につけておりましたが、今回のケースを見て、?の付け方について再考した方がいいなと感じました。

[takochan1192]

ちなみになんですが、interfaceで定義で指定したプロパティ全てに対して、「？」を付けてることは、やはりナンセンスでしょうか？

[raccy]

そのプロパティがオプショナルか否かです。あまりいい例えではありませんが、firstNameとlastNameは必須だが、middleNameはあってもなくてもいいという感じであれば、middleNameだけ?にして、firstNameとlastNameは付けないとしてもいいでしょう。そうすることで、firstNameとlastNameは必ず設定されていることが保証されるので、それが前提でコードが書けるし、middleNameはあるかどうかわからないので、あることを前提にしたコードを書くと事前に弾いてくれることを期待できたりします。

何でもかんでも、全部付ける、全部付けない、と一律に決めるのではなく、それが何を表しているのかを考えた上で、柔軟に決めていく方が良いと思います。

[takochan1192]

コメントありがとうございます。
おっしゃる通り、なんでもかんでも決めつけずに、柔軟に対応していきたいと思います。
ありがとうございました。