カテゴリー
TypescriptのInterfaceでasync関数を定義する・async関数でクラス変数(this)を使う
※ 当ページには【広告/PR】を含む場合があります。
2022/05/13
2022/10/03
TypescriptのInterfaceに非同期関数を定義する
interface IHoge {
name: string;
id: number;
getUserInfo(): Promise<any>
}
asyncPromise<T>asyncクラス内asyncメソッドからメンバー変数をthisを使って呼び出す
this通常関数(function)アロー関数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;
}
}
thisthis
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 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その他のリンク記事
関連記事
【Javascript活用講座】もっとHTML要素を上手く操作するためのappendChildの使い方
2022/10/03
ID#:138
javascript appendChild HTML操作
【Javascript活用講座】もっとHTML要素を上手く操作するためのappendChildの使い方
今回はHTMLを直接スクリプトからDOM操作するために必須となるappendChildメソッドにスポットを当て、メソッドチェーンを使ったより実践的な実装方法を検討してみます。
クリックするとリンク先へ飛びます関連記事
【javascript応用編】中断もできてasync/awaitも使える再帰setTimeoutループ処理のPromise版の自作する
2022/10/07
ID#:180
javascript promise
【javascript応用編】中断もできてasync/awaitも使える再帰setTimeoutループ処理のPromise版の自作する
外部からの中断などの操作・内部でもasync/awaitのような非同期処理が利用できるPromiseを駆使した再帰的な定期実行ループ処理を実装してみます。
クリックするとリンク先へ飛びます記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー