TypeScriptの基本の備忘録
基本
- TypeScriptは型を推論する。
- const name: string = 'torahack';のようにして、型アノテーションを使い明示的な型を定義。
型
柔軟な型定義が可能。
例：
// 生まれの年は数字か文字列でも受け取れる変数 let birthYear: number | string;
valueが存在しないとエラーがでる時は、
Property 'value' does not exist on type 'Element’.
このように定義するとエラーは消える。
(document.querySelector('.hoge') as HTMLInputElement).value;
型を調べる
console.log(typeof(occDatas));
- null: 値が欠如していることを表す。または、代入すべき値が存在しないため、値が無い。
- undefinded: 初期化されておらず、値が割り当てられていないことを表す。または、値が代入されていないため、値がない。
できる限り、undefinedを使う。（nullは変数/定数があるのに値が無いなど、設計間違いが多い。）
- anyはどんな型でも許容する＝全く安全でない。
- unknownは、どんな型になるか不明>、代入した値によって変化。使い所は、後から型定義したいデータがある時など。
- どうしても使わなきゃいけない時は、anyじゃなく、unknownを使う。
色々な型
- event.targetの型は、EventTarget
- アンカー要素の型は、HTMLAnchorElement
const targetId = (e.target as HTMLAnchorElement).hash;
クエスチョンマーク
必須のプロパティじゃない時につける（オプショナル）
つまり、引数が省略可能になる。
- 必ず引数の最後に書く
const test = (x:number, y?:number):void=>{ console.log(x); } test(1); //OK
Void
TypeScriptで戻り値がない関数の戻り値を型注釈するにはvoid型。
関数が何も返さない場合は、 : void をつけることで明示的に表現できます。
function print(message: string): void { console.log(message); }
- :never なら、決して戻ることのない戻り値。
エクスポート
// 変数、関数、クラスのエクスポート
export const favorite = "小籠包"; export function fortune() { const i = Math.floor(Math.random() * 2); return ["小吉", "大凶"][i]; } export class SmallAnimal {}
関数エクスポート（アロー関数）
export const tab = (wrapperId: string): void => {}
インポート
// 名前を指定してimport import { favorite, fortune, SmallAnimal } from "./smallanimal";
// リネーム import { favorite as favoriteFood } from "./smallanimal";
