TypeScript
関数の型
以下のような記述は一見わかりづらいが、「引数が文字列で戻り値が文字列配列の関数」を引数に取る関数である。
const singBirds = (firstBird: (x: string) => string[]): string {
return firstBird('カラス, 鳩')[0] + ' ピヨピヨ';
}上記関数は以下のように呼び出す。
const splitBirdsCsv = (csv: string): string[] => {
return csv.split(',');
}
console.log(singBirds(splitBirdsCsv));型アサーション
Javaでいうダウンキャスト。
const canvas = document.getElementById('main_canvas')
console.log(canvas.width) // コンパイルエラーTypeScriptはgetElementById()がHTMLElementを返すということしかわからない。const canvas = document.getElementById('main_canvas') as HTMLCanvasElement
として、明示的に型を指定する必要がある。
複雑なアサーションを行いたい場合、まずanyに変換して2段階のアサーションとする必要がある。const result = (response as any) as User
型エイリアス
オブジェクトの型エイリアス
type Point {
x: number;
y: number;
}
const zahyo: Point= {x: 100, y: 200}※キー名を明記せずに定義することもできる（インデックス型）
キー名やキー数が事前に定まらない場合に便利。
type Point {
[key: string]: number;
}
const zahyo: Point= {x: 100, y: 200, z: 200}}関数の型エイリアス
可読性が上がる
type Formatter = (a: string) => string
const printName(name: string, formatter: Formatter){
console.log(formatter(name)
}import type
TypeScriptでは、import type { xxx } from './yyy'とすることで型のみをimportすることができる。
型のみをimportするため、変換されたJavaScriptからはこのコードは削除される。
typeとinterfaceの違い
オブジェクトの型を定義する場合は、ほぼ同等の機能を持つ。
TypeScriptの設計思想として、typeはオブジェクトの型そのものを定義するものであるが、interfaceはクラスやオブジェクトの一部のフィールドやメソッドを定義するものである。
interface Colorful {
color: string;
}
interface Circle {
radius: number;
}
interface ColorfulCircle extend Colorful,Circle {}型定義ファイル
JavaScriptの外部ライブラリの型情報は以下のどちらかで用意する。
- @types/xxxとして公開されているnpmパッケージをインストールする
(ライブラリに同梱されている場合もある)
jQueryの場合、npm install --save-dev @types/jquery - 型定義ファイル(拡張子.d.ts)を自作する
型定義ファイルを自作方法
以下のlib/hello.jsがある場合
exports.hello = function(name) {
console.log(`Hello, ${name}`);
}以下のlib/hello.d.tsを用意する。
export function hello(name: string): void
コメント