【TypeScript】Wideningってなに？型の拡大の落とし穴

実務経験半年以上のエンジニア探してます！

>> 【急募】C# または TypeScript エンジニア募集（完全フルリモート）

こんにちは！
今日はTypeScriptで重要な概念の一つ、「Widening（型の拡大）」についてお話しします。
TypeScriptを使い始めたばかりの方でも、この話を聞けば「Wideningって何？」という疑問を解消できるでしょう。

まず、TypeScriptを学ぶ際には、型の扱いに特に注意が必要です。
型とは、変数や関数の引数などに期待されるデータの種類を指し、TypeScriptではこの型を厳密に管理することでバグを減らし、より安全なコーディングを助けてくれます。
しかし、型の世界にはちょっとした「落とし穴」があり、それが「Widening」です。

このセクションでは、Wideningがどのようなものか、なぜ理解が必要なのかを、初心者の方でも理解しやすいように丁寧に説明していきます。
ぜひ最後までお付き合いくださいね。

Contents

Widening(型の拡大)とは
Wideningが発生する具体例
- 代入での型の拡大
- オブジェクトでの型の拡大
Wideningの落とし穴
Wideningを防ぐには
まとめ

「今の自分」に後悔しないためのおすすめ記事

未経験で後悔したくない
【実体験】未経験からITエンジニアに転職して後悔した話｜4社経験してわかった「最初の選択ミス」
年収が低くて不安
4年間ずっと年収260万だったエンジニアが、転職で510万になるまでの全記録

Widening(型の拡大)とは

TypeScriptの世界には、変数や定数に型を割り当てるという大切なルールがあります。
でも時々、TypeScriptはちょっとした「魔法」を使って、私たちが割り当てた型をもっと広い型に「拡大」してしまうんです。
これを「Widening（型の拡大）」と言います。

簡単に言うと、Wideningはある変数に割り当てられた狭い型が、より広い型に変わる現象のことを指します。
たとえば、let や const で変数を宣言する時、TypeScriptはその場で変数の型を推論しようとします。
でも、変数が初期化されずに残されたり、いくつかの異なる型が割り当てられうる状況だと、TypeScriptは「もっと大きな範囲を持つ型」をその変数に適用することがあります。

この動きは時に便利ですが、予期しない問題を引き起こすこともあるので、きちんと理解しておくことが大切です。
Wideningに気をつけて、より厳密な型定義を心がければ、バグを避けやすくなりますよ。

Wideningが発生する具体例

理解を深めるために、Wideningがどのようにして起こるのか、さらに具体的なコード例で見ていきましょう。
TypeScriptでは変数の宣言方法によって、変数の型がどう推論されるかが変わります。

代入での型の拡大

まず、constを使って変数を宣言する場合、TypeScriptはその値をリテラル型として扱います。
例えば、以下のコードを見てください。

// "hoge"というリテラル型で推論される
const hoge = "hoge";

ここでは、hogeはリテラル型"hoge"と推論されます。
しかし、letを使って変数を宣言すると、同じ値を持っていても、その型はもっと広いstring型として推論されるのです。

// string型で推論される
let hoge = "hoge";

ここでのhogeは、どんな文字列も受け入れるstring型とみなされます。
これがWideningの一例です。

さらに、constで宣言した変数をletで宣言した変数に代入するというケースも見てみましょう。
この場合も、string型に広がってWideningが起こります。

// "hoge"というリテラル型で推論される
const hogeLiteral = "hoge";
// string型で推論される
let hogeString = hogeLiteral;

オブジェクトでの型の拡大

オブジェクトに関しても、Wideningは発生します。
オブジェクトのプロパティとしてconstで宣言した値を設定すると、そのプロパティの型が拡大されるのです。

// "hoge"というリテラル型で推論される
const hoge = "hoge";

const obj = {
  hoge,
};
// string型で推論されるので代入できてしまう
obj.hoge = "fuga";

この例では、obj.hogeは最初"hoge"のリテラル型であったにもかかわらず、string型として扱われ、異なる文字列"fuga"を代入できてしまいます。
これらの例を通して、Wideningがいかにして起こり得るのか、そしてそれがどのような影響をもたらす可能性があるのかを理解できたはずです。
次の見出しでは、この現象のメリットに焦点を当てていきます。

Wideningの落とし穴

Wideningがもたらす柔軟性は魅力的ですが、その使い方を間違えると予期しないバグにつながるリスクもあります。
ここでは、そのような注意点について具体的に説明しましょう。

一つ目の注意点は、予期しない型の割り当てを受け入れてしまうことです。
たとえば、ある変数が特定の文字列リテラル型を持つことを期待している場合でも、Wideningが発生すると、予期しない文字列を割り当てることができてしまいます。
これは特に、外部からの入力を扱う際に問題となることがあります。

二つ目の注意点は、Wideningによって型が不意にanyになってしまうことです。
any型はあらゆる型を受け入れるため、型の安全性が完全に失われてしまいます。
これは、TypeScriptを使用する主なメリットの一つである型安全性を損なうことにつながります。

そして三つ目は、オブジェクトや配列においても同様にWideningが発生することです。
オブジェクトのプロパティや配列の要素に対して予期しない型が割り当てられる可能性があります。
これにより、ランタイムエラーや予期しない挙動が発生する原因となり得ます。

これらの点を踏まえると、Wideningを利用する際には慎重な検討が必要です。

Wideningを防ぐには

TypeScriptでは、as constという素晴らしい機能があります。
これを使用すると、変数やオブジェクト、配列をリテラル型として扱い、不必要なWideningを防ぐことができます。

例を見てみましょう。

const message = "Hello, TypeScript" as const;

ここでは、messageは単なる文字列ではなく、文字列リテラル"Hello, TypeScript"として扱われます。
このおかげで、messageに"Hello, TypeScript"以外の何かを代入しようとすると、TypeScriptから警告されます。

オブジェクトや配列に対してもas constは使えますよ。

const userInfo = {
  name: "Jane",
  age: 30
} as const;

この例で、userInfoオブジェクトの全てのプロパティは読み取り専用になります。
つまり、nameは"Jane"、ageは30のみを受け入れ、それ以外の値の代入を試みるとTypeScriptが警告してくれます。

このように、as constをうまく活用することで、TypeScriptのWideningを防ぎながら、コードの意図をより明確に伝えることができます。
これは特に大規模なプロジェクトでの型安全性を高めるのに非常に有効な手段です。

Wideningについては「プロを目指す人のためのTypeScript入門　安全なコードの書き方から高度な型の使い方まで」という技術書でも言及されていますので、興味がある方は読んでみてください。

説明のある節

6.2.4 リテラル型のwidening
6.2.5 wideningされるリテラル型・wideningされないリテラル型

【付録】さらに学びを深めるためのリソース

さらにTypescriptの学習を進めたい方のために、いくつかのリソースを紹介します。
これらのリソースを活用することで、TypeScriptの型システムについてより深い知識を得ることができるでしょう。

オンラインで参照できる公式ドキュメント

TypeScript公式ハンドブック

https://www.typescriptlang.org/docs/
TypeScriptの公式ドキュメントです。
intersection型を含む、すべての型システムの機能について詳細な説明があります。

TypeScript Deep Dive

https://basarat.gitbook.io/typescript/
TypeScriptの深い部分まで掘り下げて解説しているオンラインブックです。
無料で読むことができ、intersection型についても詳しく説明されています。

TypeScriptの学習は終わりがありません。
新しい機能が常に追加され、より良い書き方が発見されています。
継続的に学習を続けることで、より良いTypeScriptプログラマーになれるはずです。

キャリア形成/給与還元
ひとつひとつ真摯に向き合う企業