未分類

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

git

githubはファイルを他の開発者と共有する事ができるソフトウェアです。githubのリモートリポジトリにコードをあげる事で他の開発者がそのコードを確認して修正したり、受け取る事ができます。gitにコ …

no image

clickで状態を持たせる

Todoコンポーネントで表示させたリストに✌️の絵文字を使って表示させ、クリックすると😭に変更するように実装しました。これを実現させるにはstoreに保存さ …

no image

ページランク

インターネットにより世界中のユーザーがウェブページを閲覧できるようになり少しでも疑問に思ったことをネットでキーワードを打てば見たいものがすぐに出てきます。ウェブページの量は膨大なのですが一体どのように …

no image

進化しすぎた脳2

 今日は面接を2社受けました。一社目はなんか可愛らしい感じのかたで内定をもらえそうな感じでした。2社目の方は単調な質問ばかりで足がガクガクふるえていました。対極な感じでいい経験ができたと思います。明日 …

no image

マクロよりミクロ

最近は色々の事情で全く本を読んでいないのでふと大事だなと思ったことを書きたいと思います。ホリエモンが何かの動画で学生にアドバイスをしている動画があったのですが、その学生は将来の夢がイタリアのシェフで地 …