公式
WebStormの場合
WebStormの場合は、
単に.jsを.tsに変えればコンパイルしてくれるようです。
それから、コンパイルエラーになった箇所を修正すると良いでしょう。
tsconfig.json
こんなのがあるらしい。
特に気をつけないといけないのは、compilerOptionsのtargetです。
Chrome拡張の場合はGoogle Chromeのサポートのみ考えればいいので、“es2018"で良さそうです (参考: ECMAScript)。
型の読み込み元
@types, typeRoots and typesより。
./node_modules/@types/../node_modules/@types/../../node_modules/@types/
以下同様に親ディレクトリのnode_modules/@types/が呼ばれます。
カスタマイズもできるようです(使う機会があるかどうかは不明)。
基本文法
JavaScriptと違う、TypeScript独自の点だけ。
型の割り当て
変数名: 型 で、型を割り当てます。
例: 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を簡単に解説すると、以下のようになります。
- userはStudentクラスのインスタンス
- Studentクラスはコンストラクタのpublicキーワードにより、firstName, middleInitial, lastNameをプロパティに持つ。
- よって、StudentクラスはPersonインタフェースと互換性がある(implementsされたものとして扱う)
- よって、greeter()関数に渡してもエラーにならない。
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と同じです。
- 書き換え不可
- コンストラクタで初期化しないといけない
キャスト(Type Assertion)
キャストではなくAssertionなのは、コンパイラがチェックするだけで、 実際には何もしないからのようです。
例えば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インタフェースと 競合していたと思われます。