自分的TypeScript型定義まとめ

関数

◎戻り値が無い関数の型定義にはvoidを用いる。
◎voidはundefinedの上位型として扱われる。

function hoge(): void { 

 ~処理~

}

戻り値がない関数の場合、関数から戻る値はundefinedになる。

例)
ボタンをクリックしてクラスの付け外しをする処理や、アコーディオンの処理などの関数に戻り値は無いので、基本的に「:void」をつけてvoid型を定義する。

セレクタへの型定義

◎変数宣言時、「HTMLElement | null」で一度変数を初期化する。
◎HTMLコードの解析までは出来ない

const a = document.querySelector('a') 
// => HTMLAnchorElement | null 型

const div = document.querySelector('div')
// => HTMLDivElement | null 型

const input = document.querySelector('input')
// => HTMLInputElement | null型

もっと上位の大枠の型
const hoge = document.querySelector(‘.’p-hoge)
// => HTMLElement | null型

型キャスト

◎「as HTMLElement」など「as」で型を指定する。
◎「＜HTMLElement＞」などを前に付ける。

const hoge = <HTMLInputElement>document.getElementById(‘hoge’);
もしくは
const hoge = document.getElementById(‘hoge’) as HTMLInputElement;

hoge.value = ‘こんにちは’; 　//hogeでvalueプロパティが利用可能

例)
idで取得したセレクターのvalueを使用しようとすると、「プロパティ 'value' は型 'HTMLElement' に存在しません。」というエラーが発生してしまう。

解決法)
hoge変数を「＜HTMLInputElement＞」もしくは「as HTMLInputElement」で型キャストして、hoge変数は「.value」プロパティが使える変数だよ、ということを宣言してあげる必要がある。

undefinedとnullの違い

◎nullは初期化時などに宣言しない限り、自然発生しない。
◎基本的にundefinedを利用する。
◎変数の初期化時にnullを利用するのはその限りではない。