カテゴリー
TypescriptのInterfaceでasync関数を定義する・async関数でクラス変数(this)を使う
※ 当ページには【広告/PR】を含む場合があります。
2022/05/13
2022/10/03
些細なことですが、Typescriptで自作interfaceからclassを定義する際に、クラスのメンバーメソッドにasyncを付けて使いたいときがあります。
今回はTypescriptのinterfaceとclassに着目して、async関数をどう扱うか簡単に紹介します。
TypescriptのInterfaceに非同期関数を定義する
まずはインターフェース側からasync関数を実装する例を以下に示します。
interface IHoge {
name: string;
id: number;
getUserInfo(): Promise<any>
}
...asyncは何処にも無いではないか？と思わたかも知れません。
でもこれでインターフェース側はOKです。
ポイントとしてTypescriptのinterfaceで定義するメソッドにはそもそも
asyncPromise<T>asyncクラス内asyncメソッドからメンバー変数をthisを使って呼び出す
で次に、先程のインターフェースを何かクラスに実装して使う方もやってみましょう。
ここでの注意点として、Javascriptの
this通常関数(function)アロー関数Typescriptから変換したJavascriptの影響を受け、例えば以下のダメなコードをトランスパイルして実行すると、
this.namethis.id class HogeUser implements IHoge {
name: string;
id: number;
constructor(_name: string, _id: number) {
this.name = _name;
this.id = _id;
}
async getUserInfo(): Promise<any> {
const res = await fetch(`http://hoge.hoge.com/api?uname=${this.name}&uid=${this.id}`);
const data = await res.json();
return data;
}
}
これは通常の関数呼び出しだと、クラス内に定義した関数でさえ
thisただし、JavascriptのES6以降のclass構文をそのまま使った以下のような実装だと、通常関数からでも
this class HogeUser {
constructor(name, id) {
this.name = name;
this.id = id;
}
async getUserInfo() {
const res = await fetch(`http://hoge.hoge.com/api?uname=${this.name}&uid=${this.id}`);
const data = await res.json();
return data;
}
}
...もともとあった
Typesciptでのclass構文本家Javacriptのclass構文classを使う時は、TypescriptかJavascriptかで厳密に区別して使うことが必要です...なんだかややこしいなぁ。
ともかくTypesciprでどうすればよいかというと、少し気持ちが悪くはありますが、
以下のコードであれば、Typescriptのclassでasyncを使うことができます。
class HogeUser implements IHoge {
name: string;
id: number;
constructor(_name: string, _id: number) {
this.name = _name;
this.id = _id;
}
getUserInfo = async (): Promise<any> => {
const res = await fetch(`http://hoge.hoge.com/api?uname=${this.name}&uid=${this.id}`);
const data = await res.json();
return data;
}
}
これでクラス内の
this