🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

Q&A

解決済

1回答

13032閲覧

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

takochan1192

総合スコア100

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

0グッド

0クリップ

投稿2020/12/23 09:24

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

JavaScript

1const Employee = { 2 firstName:'John', 3 lastName:'Doe' 4}; 5delete Employee.firstName 6console.log(Employee)

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

JavaScript

1{ 2lastName:"Doe" 3}

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

TypeScript

1const Employee = { 2 firstName:'John', 3 lastName:'Doe' 4}; 5delete Employee.firstName 6console.log(Employee) 7

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

error

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

TypeScriptで

TypeScript

1const Employee = { 2 firstName:'John', 3 lastName:'Doe' 4};

と書いてしまったとき、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として実行したときにエラーになるのではありません。)

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

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

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

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

投稿2020/12/23 09:45

raccy

総合スコア21737

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takochan1192

2020/12/23 09:56

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

2020/12/23 09:57

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

2020/12/23 10:53 編集

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

2020/12/23 23:28

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問