未分類

typescript

投稿日:

typescriptはjavascriptの変数で予期せぬエラーを起こさないために型安全でコードを書くプログラミング言語です。typescriptのコードをjavascriptのコードに変換して使うのですが、変換する前のファイルを保存する段階で型安全を確かめてエラーがあればコンパイルできない仕組みになっているので本番環境でエラーを起こす事がありません。今日はその型の種類について学んだのでいくつか紹介します。

boolean型

trueかfalseしか代入できないようにします。型定義をする変数に: booleanを記述する事でその変数にtrueかfalse以外が代入されるとエラーを返します。

number型

数値以外にエラーを返します。

string型

文字列を定義します。

array型

配列を定義します。変数の横にnumber[]としてあげる事で配列の中に数値以外が代入されるとエラーを返します。(string | number)[]としてやる事で文字列と数値の配列を定義します。

tuple型

変数の横に[string, number]とする事で配列の中に文字列、数値と順番に並んでいないものをエラーにします。

any型

なんでも型を許容する型定義です。これだと不適切なのでinterface 型名にオブジェクトとして値を持たせるようにする事でその中のプロパティがvalueに設定された型でない場合にエラーを返すようにします。

void型

関数がreturnで値を返さない場合にvoidとして定義します。

null型とundifined型

値がnullの場合とundifinedの場合に定義します。

never型

エラーが起きてプログラムが帰ってこない場合にはnever型を定義します。void型との違いはvoid型は関数が実行され値は帰ってこないが処理の完了が帰ってくる場合に指定するのに対してnever方は処理が帰ってこない場合の時に指定します。どのような場合かというと関数の中でエラーを起こして、エラーハンドリングの場合の処理を動かす場合に指定します。

object型

代入する値がオブジェクトの形の場合に指定します。その中でプロパティ: 型名を指定する事でその型とプロパティ以外をエラーにします。

型エイリアス

型定義には: 型名とするのですが、型エイリアスを指定してあげる事ができます。型エイリアスはtype エイリアス名 = 型名で定義して、そのエイリアス名を型定義のところに記述する事で型エイリアスに代入されている型名の型定義を行う事ができます。同じオブジェクトの値を指定する変数に対して重複する記述を避ける事ができます。

interface

型エイリアスで型名を定義する場合と同じ使い方です。interface インターフェース名 {}で型名を指定します。

unknown型

まだ型名はよくわからないけれどとりあえずつけておく時に定義をして、その変数を使用する場合にはif文で型名をはっきりさせてから代入を行います。

intersection型

typeで定義した型エイリアスを合わせた形で使用したい時に合計させた型エイリアスを作成します。type 型エイリアス名 = 型エイリアス名1 & 型エイリアス2;と定義する事で型エイリアス名1と2の合計した型を定義します。

union型

orでどちらでもいいですよという時に使います。

literal型

unionがたを使って指定した型名を使うようにします。例えば曜日を変数として格納したい場合に月から日まで指定してあげる事で月から日の値しか代入されないようにエラーを出力します。

enum型

型名にオブジェクトとしてプロパティを定義していき、そのプロパティに上から順番に番号を付与します。デフォルトでは0からしたのプロパティに行くたびに+1を代入します。最初のプロパティに値を代入する事でそこからどんどんプラスしていく値を入れられます。

たくさんの型名がありますがこのように厳密に型定義をすることによって予期しない値を入れられることによって引き起こされるエラーを防ぐ事ができます。そもそもなぜこのエラーが起きてしまうのかというとjavascriptの言語使用で変数の値を変えるたびにその変数の型定義も自動で変えてしまうから引き起こされます。とても便利なのですが予期しないエラーが起きてしまう原因になっているのです。それを解決させるためにtypescriptが使われているのです。

-未分類

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

httpリクエスト

ブラウザが何をしているのかを復習したのでそれについて書きます。ブラウザの上の入力フォームにhttpから始まるurlを入力するとそのurlに紐づいているデータを受け取り、画面に表示させます。その際に受け …

no image

firebase

firebaseを使ってサーバを介さずにデータをやりとりする方法を学びました。本来webアプリでは、ユーザー側からデータを受け取ってそれによってユーザーが期待しているページを返す際にサーバーがまずデー …

no image

css

今日はcssのデザインに苦戦していました。今までcssを使ったデザインの設計をしてこなかったのでどのように見本のようにデザインを作ればいいのかあたふたしていました。午前中はモチベーションが上がらずまず …

no image

新幹線の中

 昨日は疲れすぎてブログ書いていなかったので朝書きます。久しぶりに11時間くら寝ていました。昨日は考え事しすぎて脳が疲れたのですね。一体何を考えていたのかというと、将来のことを考えていました。Y&Iの …

no image

読字力

 今日から「デジタルで読む本✖️紙の本で読む本」を読み始めました。どんな内容かというと、デジタル化が進む中で読解力はこの先変化があるか?という内容です。デジタル化が進み、情 …