マニュアル: TypeScript

投稿日: 更新日: JavaScript

WebStormの場合

WebStormの場合は、 単に.js.tsに変えればコンパイルしてくれるようです。 それから、コンパイルエラーになった箇所を修正すると良いでしょう。

tsconfig.json

tsconfig.json · TypeScript

特に気をつけないといけないのは、compilerOptionsのtargetです。

Chrome拡張の場合はGoogle Chromeのサポートのみ考えればいいので、"es2018"で良さそうです (参考: ECMAScript)。

型の読み込み元

@types, typeRoots and typesより。

以下同様に親ディレクトリのnode_modules/@types/が呼ばれます。 カスタマイズもできるようです(使う機会があるかどうかは不明)。

基本文法

JavaScriptと違う、TypeScript独自の点だけ。

型の割り当て

TypeScript in 5 minutes

変数名: 型 で、型を割り当てます。

例: let person: string = "abc"

注意すべき点としては、アロー関数の引数のカッコを省略している場合です。

document.querySelectorAll("...").forEach(item => {
  ...
});

これに型をつけるとカッコが必要になります。

document.querySelectorAll("...").forEach((item: HTMLSpanElement) => {
  ...
});

インタフェース

オブジェクトのプロパティなどを定義できます。 互換性がある場合、implementsは省略可能です(後述の「クラス」で説明)。

interface Person {
  firstNae: string;
  lastName: string;
}

クラス

コンストラクタにpublicをつけると、 自動的に対応するプロパティを作成します。

TypeScript in 5 minutesを簡単に解説すると、以下のようになります。

class Student {
    fullName: string;
    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person : Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Jane", "M.", "User");

document.body.innerHTML = greeter(user);

readonly

プロパティに付け、以下のような効果があります。 Javaでのfinalと同じです。

キャスト

Basic Types > Type assertionsより。

例えばdocument.getElementById()はHTMLElementを返すが、 実際はHTMLSpanElementの場合、 以下のようにキャストします。

2つとも同じですが、後者はTSLintでエラーが出るため、 前者の方がよさそうです。

const foo = document.getElementById("foo") as HTMLSpanElement;
const foo = <HTMLSpanElement> document.getElementById("foo");

ただ、キャストは型チェックをしないため、 Type Guardという仕組みを使うのが良さそうです(未検証)。

JavaScriptとの互換性

Storageが定義できない

Storageという名前の定数を定義していたのですが、 これがコンパイルエラーになりました。

おそらく、Web Storage APIのStorageインタフェースと 競合していたと思われます。

逆引きマニュアル



ページトップへ戻る