【TypeScript】TypeScriptの型定義の仕方

　TypeScriptはJavaScriptの拡張言語です。Microsoftがメインのコントリビューターでサポートも充実しています。TypeScriptはAltJSの中でも穏やかな方でJavaScriptに独自の型定義機能と変数、プロパティと結合した型宣言機能といった型関連の機能を付けただけです。変化が少なく汎用的なためかVue.js+TypeScriptやRact+TypeScriptといったフレームワークとの結合を解決するパッケージも盛んに開発されています。型が付くことによりIDEの予測や補完、バグの潜在性アラートなどが強力に働きます。

TypeScript – JavaScript that scales.
microsoft/TypeScript： TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

　始めるならQuick Start · TypeScript試すならTypeScript playgroundがやりやすかったです。特にクイックスタートでは各パターンのテンプレがGitリポジトリに用意されており、それをひな型に手を動かすだけで慣れていけます。
　TypeScriptは基本的に変数、プロパティ、関数の宣言時に宣言部の後に:をつけて型を決めます。

const a: number = 1;

function hoge(): string {
    return 'hoge'
}

class Bar {
}

interface FooBar {
    foo: Date;
    bar: Bar;
}

class Fuga implements FooBar {
    foo!: Date;
    // !はnullになることはないとTypeScriptに伝える.
    // フレームワーク中のコンストラクタっぽいもので初期化される時とかに便利.
    bar: Bar;

    constructor(bar: Bar) {
        this.bar = bar;
    }
}
type StringOrStrings = string|string[];
const char: StringOrStrings = 'ch';
const chars: StringOrStrings = ['c', 'h'];

　この様にすると、それぞれの部分に型が定義され値の型を追うことができます。上記のみならずEnum等さらに拡張することもできます。
　厳密な型定義から外れますが利便性のために型定義を変数を介さず文中に入れたい時があります。そういった時は次のようにします。

(document.head.querySelector('meta[name="csrf-token"]') as HTMLMetaElement).content

　この様にすると括弧でくくった部分の型を定義できます。セレクタで特定の種類の要素（metaタグ、inputタグなど）を参照するときなど特に便利です。