VIDEO LESSON

TypeScriptの基本型一覧：string・number・配列・unknownと型推論の解説動画

再生時間 8:23動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:01タイプスクリプト入門、第三回は基本型です。
0:05前回は環境構築を終えました。
0:07今回は、文字列、数値、真偽値といった基本の型を一覧で押さえ、型推論、配列とタプル、
0:15ヌルとアンディファインド、アンノウンとエニー、ボイドとネバーを順に学びます。
0:23型とは、値の扱い方をコンパイルの時点で確認するための情報です。
0:28文字列に数値専用の操作をするような間違いを、実行前に見つけられます。
0:35なお、型チェックは通信障害や不正な外部入力まで防ぐものではありません。
0:42その境界も意識しながら進めましょう。
0:45まず、型注釈と型推論の使い分けです。
0:49変数に初期値を入れて宣言すると、タイプスクリプトはその値から型を推測します。
0:56これが型推論です。
0:58たとえば文字列で初期化した変数はストリング型と推論され、後から数値を代入するとエラーになります。
1:07一方、コロンと型名を書く書き方が型注釈です。
1:11閲覧数を表す変数にナンバー型、公開フラグにブーリアン型を明示できます。
1:18コンスタントで宣言した文字列は、特定の文字列だけを表すリテラル型として扱われます。
1:25通常は小文字のストリング、ナンバー、ブーリアンを使い、大文字で始まるラッパー型と混同しないようにしましょう。
1:36基本型の注意点を押さえます。
1:38ナンバー型には、整数と小数のほかに、ナンやインフィニティと呼ばれる特殊な数値も含まれます。
1:46正の整数だけを受け付けたい場合は、ナンバー・イズ・インテジャーなどで追加の検証が必要です。
1:54ブーリアン型の値はトゥルーかフォールスの二つだけです。
1:59ただし、ジャバスクリプトの条件式では、空文字やゼロなども偽として評価されます。
2:06型の違いと、真偽への変換は別の話として分けて考えましょう。
2:11また、文字列の長さを数えるレンゲスは、見た目の文字数と一致しない場合があります。
2:19絵文字などではずれが生じるため、画面の入力制限では要件に合った数え方を選んでください。
2:26次は、文字列、配列、タプルです。
2:29ストリング型の値には、長さを調べるレンゲスや、一部を切り取るスライス、大文字に変換するトゥー・アッパー・ケースといった操作があります。
2:38ストリングの後ろに角括弧を付けた書き方は、文字列を要素に持つ配列の型です。
2:43アレイ・ストリングという書き方でも同じ意味になります。
2:47タプルは、位置ごとの型を決める書き方で、数値二個の組み合わせ、のように要素の型と個数を表します。
2:54先頭にリードオンリーを付けると、型チェックの上で変更を制限できます。
2:59ただし、これは実行時に配列を凍結する機能ではありません。
3:03通常の配列は空の場合もあるため、添字で取り出した値が存在するとは限らない点にも注意しましょう。
3:10オブジェクトの形は、タイプというキーワードで名前を付けて定義できます。
3:15各項目に型を指定し、クエスチョンマークを付けた項目は省略可能になります。
3:21省略できる項目を読むときは、値がない可能性を考えなければなりません。
3:26ステータスのように、ドラフトかパブリッシュドのどちらか、と候補を絞りたい場合は、
3:31縦棒でつなぐユニオン型が便利です。
3:35単なるストリング型よりも、許可する状態を具体的に表せます。
3:39なお、タイプによる型定義は名前を付ける仕組みであり、実行時にクラスやオブジェクトを作るものではありません。
3:48オブジェクト型は、インターフェースでも定義できます。
3:52詳しくは次回扱います。
3:53ヌルとアンディファインドは、値がない状態を表します。
3:57ストリクト・ヌル・チェックスが有効な場合、通常のストリング型へヌルやアンディファインドは代入できません。
4:05欠けた値を表したいときは、ストリング・オア・ヌルのようにユニオン型へ含めて明示します。
4:12値がない場合の代替には、クエスチョンを二つ重ねた演算子を使います。
4:17これは、左側がヌルかアンディファインドのときだけ右側を使う演算子です。
4:22よく似た縦棒二つの演算子では、ゼロも置き換えられてしまいます。
4:27回数の指定のように、ゼロが意味を持つ場面では、この違いが結果を左右します。
4:33省略可能な引数も、関数の中ではアンディファインドの可能性を持つ点に注意してください。
4:39エニーとアンノウンは、どちらもさまざまな値を受け取れる型ですが、安全さが大きく違います。
4:46エニーは、多くの型チェックを回避できる特別な型です。
4:50存在しないメソッドを呼んでもコンパイラが止めないため、実行時に失敗することがあります。
4:57一方、アンノウンは、値を代入すること自体は自由ですが、型を確認しない限り、
5:01プロパティやメソッドを利用できません。
5:05外部から届いた入力など、まだ正体が分からない値を受け取る場面では、アンノウンが向いています。
5:12なお、エーエスで型を言い換える型アサーションだけでは、値の検証も変換も行われません。
5:19分からない値は、アンノウンで受けて、確認してから使う。
5:23この流れを習慣にしましょう。
5:25アンノウンの実例を見てみましょう。
5:28表示用の関数では、引数をアンノウンで受け取ります。
5:32まず、タイプオブでストリングかどうかを確認し、文字列と分かった分岐の中だけで、
5:37空白を取り除くトリムを呼びます。
5:41次に、ナンバーかどうかを確認し、数値と分かった場合は小数点以下の桁をそろえるトゥー・フィックスドを使います。
5:50どちらでもない値は、表示できない値です、という安全な結果を返します。
5:55実際に、文字列を渡せば前後の空白が取れ、数値を渡せば小数一桁で表示され、
6:00ヌルを渡せば表示できない値です、となります。
6:05このように、確認してから使うことで、不正な操作を実行前に防げます。
6:10ボイドとネバーも混同しやすい組み合わせです。
6:13ボイドは、主に呼び出し側が戻り値を利用しないことを表します。
6:18メッセージを表示するだけの関数は、ボイドを指定する典型例です。
6:22一方、ネバーは値が存在しない型です。
6:25常に例外を投げる関数や、型の絞り込みで候補が残らなくなった場所に現れます。
6:30戻り値をネバーにした関数で値を返そうとすると、型エラーになります。
6:35ただし、型注釈はジャバスクリプトの制御の流れを変えるものではありません。
6:41ネバーと書いたから返却が実行されなくなる、という動作にはならない点も押さえておきましょう。
6:47例外を受け取るキャッチ側では、エラーをアンノウンで受けて、種類を確認してから扱うのが安全です。
6:54学んだ例は、コンパイルと実行で確かめましょう。
6:58各ファイルの先頭にあるエクスポートの記述は、そのファイルを独立したモジュールとして扱うための指定で、
7:02変数名の衝突を避けます。
7:07ファイルを直接指定してコンパイルするコマンドでは、ティーエス・コンフィグ・ジェイソンは読み込まれません。
7:15プロジェクトの設定を使う場合は、プロジェクト指定で実行してください。
7:20型チェックが通ることに加えて、期待する値が実行時にも返ることを確認するのが大切です。
7:27使い分けの目安として、初期値が明確なローカル変数は推論に任せ、関数の入力や公開するデータの形など、
7:33利用側と共有したい境界には型を明示すると、意図が伝わりやすくなります。
7:39まとめです。
7:40基本型は小文字のストリング、ナンバー、ブーリアンを使い、値から分かる型は推論に任せ、
7:45境界には型注釈で意図を示します。
7:50配列は要素の型を、タプルは位置ごとの型を表し、ユニオン型で候補を具体的に絞れます。
7:56ヌルとアンディファインドはユニオンで明示し、ゼロを大切にする場面では専用の演算子を使います。
8:03分からない値はエニーではなくアンノウンで受け取り、タイプオブなどで確認してから操作します。
8:11ボイドとネバーの違いも区別できました。
8:14次回は第四回として、インターフェースとタイプによる、オブジェクトの型定義と使い分けを学びます。
8:21お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

TypeScriptの基本型、型推論、配列・タプル、nullとundefined、unknownとany、voidとneverをコードで解説。型チェックと実行時の動作の違いを整理します。

解説記事・サンプルコードを読む：TypeScriptの基本型一覧：string・number・配列・unknownと型推論 →