TypeScriptでfetchの結果を文字列で返す関数を作りたい

実現したいこと

TypeScriptでfetchの結果を文字列で返す関数を作りたいのですが、fetchの結果を待たずにreturnされてしまって困っています。

ブラウザに表示したい文字列

huga

実際にブラウザに表示される文字列

hoge

該当のソースコード

index.ts
(HTMLで呼び出す際に、JavaScriptにコンパイルしています)

TypeScript
1const fetchFunc = (url: string): string => {
2  let returnStr: string = 'hoge';
3
4  fetch(url)
5  .then(req => req.text())
6  .then(
7    (result: string) => {
8      returnStr = result;
9    },
10    (error: Error) => {
11      console.log(error);
12    }
13  );
14
15  return returnStr;
16}
17
18const memo: HTMLElement = document.getElementById('memo');
19memo.innerHTML = fetchFunc('./data.txt');

data.txt

Text
1huga

index.html

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  </head>
7
8  <body>
9    <p id="memo"></p>
10    <script src="./index.js"></script>
11  </body>
12</html>

試したこと

一番下のreturnを消し、resolveのresultをreturnしようとしましたが、宣言された型が 'void' でも 'any' でもない関数は値を返す必要があります。とエラーが発生した。

バージョン

TypeScript 4.1.5

行動規範の内容に同意します

回答2件

TypeScriptであることとは関係なく不可能です。

JavaScriptの枠内では、一度fetchなど非同期な操作で値を取得するようにした場合、その結果を同期的に返すような手段はありません。

投稿2021/02/20 14:32

maisumakun

総合スコア145208

takara2314

2021/02/20 16:17

非同期で値を取得する場合、値が返ってくるまで結果を待つ方法はないのですね… fetchを関数に入れて、関数を呼び出してデータを取得する場合は、fetchを返すのが一般的なのでしょうか。

行動規範の内容に同意します

ベストアンサー

tyescript
1
2const fetchFunc = async (url: string): Promise<string> => {
3    let returnStr: string = 'hoge';
4
5    await fetch(url)
6    .then(req => req.text())
7    .then(
8      (result: string) => {
9        returnStr = result;
10      },
11      (error: Error) => {
12        console.log(error);
13      }
14    );
15
16    return returnStr;
17  }
18
19const memo: HTMLInputElement =<HTMLInputElement>document.getElementById('memo');
20fetchFunc('./data.txt').then(str => {
21    memo.innerHTML = str;
22  });

やりたいことはこんな感じでしょうか？

投稿2021/02/20 14:45

johndo

総合スコア10

takara2314

2021/02/20 16:14

fetchの取得をawaitで待つ関数ですね。 index.tsをそれに書き換えてコンパイルしようとしましたが、次のようなエラーが発生しました… dist/index.ts:1:40 - error TS2705: An async function or method in ES5/ES3 requires the 'Promise' constructor. Make sure you have a declaration for the 'Promise' constructor or include 'ES2015' in your `--lib` option. 1 const fetchFunc = async (url: string): Promise<string> => { ~~~~~~~~~~~~~~~ Found 1 error.

johndo

2021/02/20 16:54

tsconfig.jsonの設定ですね。コンパイル(トランスパイル)エラーはgoogle検索すれば、大体出てきます。この場合は、 ``` An async function or method in ES5/ES3 requires the 'Promise' constructor. Make sure you have a declaration for the 'Promise' constructor or include 'ES2015' in your `--lib` option. ``` をそのまま検索欄に入れて検索すればいいです。 https://stackoverflow.com/questions/43555378/ts-an-async-function-or-method-in-es5-es3-requires-the-promise-constructor そうすると、上記サイトが出てきました。これを見ると、 ``` // tsconfig.json { "compilerOptions": { "lib": [ "es2015" ] } } ``` とあるので`compilerOptions`を変更してみてください。

takara2314

2021/02/21 02:17

tsconfig.jsonをそのように変更してみると、コンパイルでき、意図していた文字列の表示ができました。この構文を使用するためには、コンパイル時に使用するライブラリを指定する必要があるのですね。お忙しい中ありがとうございました！！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！