これを読んでおくと捗る
これの構文は大体使えるというか、これを更に便利にしちゃおうぜという感じ。
TypeScriptって？
Microsoft製のメタ言語。コンパイルするとJavaScriptになる。
型制約が魅力的な言語で、これを満たさないとコンパイル時にエラーが出る。
構文もJavaScriptよりかはオブジェクト指向っぽくなってました。
でもちょこちょこJavaScriptが香る箇所があります。
TypeScriptに用意されている構文
変数の型指定
var num:number = 0;
let text:string = 'Hello world!';
const str:string = ' :) ';
// nullableをやるなら...
const str: string | null = null;
変数宣言のvar、let、constはそのまま。
変数名の後ろに型を指定する。
型推論はなく、JavaScriptの型が曖昧なのをバシっと厳密に決めてあげる感覚。
ちなみにanyにすればJavaScriptらしく曖昧な型にできる。
キャスト
強制型指定はasを使う。
const str: any = 'Hello world!';
str as string // > string型として扱われる
メソッドの実引数とか、型制約で困ったら使うとよろしいかと。
class
User.ts
export default class User{
public readonly id: number;
public name: string;
constructor(id: number, name: string){
this.id = id;
this.name = name;
}
public greet(): string {
return `こんにちは。 ${this.name}です。`;
}
}
よく見かけるアレ。
abstractもあるしinterfaceもある。
ただし静的メソッドを抽象メソッドにはできない。
アクセス修飾子もpublic、protected、privateがある。
readonlyはコンストラクタでのみ代入可、再代入不可のフィールド。
C# なんかでも見かけたやつ。
メソッドのオーバーライドもできる。が、C# みたいにvirtualにしたりoverrideとかつけられない。
Promise
asyncメソッドの返り値はPromise<T>となる。
async fetch():Promise<DocumentSnapshot>{
const snapshot:DocumentSnapshot =
await firebase.firestore().collection('User').doc('xxxx').get();
return snapshot;
}
おかげさまで型を把握しやすい。良い！
良いと思った部分
- IDEの入力補完がガッツリ効く
- クラスベースで作っていくのが自然な発想になる
- 抽象クラスの存在によって柔軟な型制約も作れる
- オブジェクト指向芸人、静的型付け愛好家大歓喜
そのへんはJavaScriptだなって思う部分
- Promise / async / await
export default- 既存のプロジェクトに組み込む場合、webpackやbabelの設定がめんどくさい
-
.ts用にトランスパイル（コンパイル？）の設定を書いてあげる必要 - Jestでテストをするのに若干手間取った
-
- TypeScriptからJavaScriptを使うと型定義が必要だったりany型と大乱闘するハメになる
- Firebaseとかだと型定義がライブラリとして存在するから楽ちん
- TypeScriptプロジェクトに独自の型定義を配置する方法
-
nullとundefinedを知っとく必要はある
こういうのほしいと思った部分
- エルビス演算子
-
?:がほしい。-
||で代用出来るらしい。JavaScript でエルビス演算子を使ってみる
-
-
入力補完や型制約はやっぱり偉大だなと思いました。
Kotlinとか嗜んでると割と自然に扱えると思います。
動的型付けにドップリな人だとちょっときついかも。