作成日:  (更新日: )

TypeScript のスニペット集

このページは、TypeScript のスニペットなどをまとめる予定のページです。

目次

注意

  • コードのライセンスは CC0 (クレジット表示不要、改変可、商用可) です。
  • 主にブラウザ上で使用する JavaScript のスニペットは JavaScript のスニペット集、Node.js で使用するスニペットは Node.js のスニペット集 を参照してください。このページでは主に TypeScript 特有のスニペットを記載する予定です。

スニペット

window に対するプロパティの追加

import, export の無いファイル用
interface Window {
    foo: number;
}
import か export があるファイル (モジュール) 用
declare global {
    interface Window {
        foo: number;
    }
}
使用例
window.foo = 1;

任意の項目を持てるオブジェクトのプロパティ定義

type Item = {
    map: { [key: string]: any };
};
使用例
const item: Item = { map: { foo: 1, bar: '2' } };

交差型

/** ユーザー型 (画面の入力値を保持する目的) */
type User = {
  username: string;
  password: string;
};
/** ユーザー型 + エラーメッセージ (エラー表示用) と元の値 (変更表示など用) を保持するための型 */
type UserEx = User & {
  error: User,
  orig: User,
};

as

エラーにならない
const user = {} as User;
エラーになる (厳密にチェックできる)
const user: User = {};

querySelectorAll() の型の変更

要素の型を Element から HTMLElement に変更する (forEach)
document.querySelectorAll<HTMLElement>('a').forEach(el => {
    // console.log(el.dataset);
});
要素の型を Element から HTMLElement に変更する (for of)
for (let el of [...document.querySelectorAll('a')] as HTMLElement[]) {
    // console.log(el.dataset);
}