不要になった Promise をキャンセル！AbortController を使って処理を制御

2024-04-14

TypeScript エラー TS2693: 'Promise' は型のみを指し、値として使用されています

このエラーを解決するには、以下のいずれかの方法を試すことができます。

Promise の値を待機する

await キーワードを使用して、Promise の値が解決されるのを待ってから、その値を使用します。

const promise = fetch('https://example.com/data.json');

(async () => {
  const data = await promise;
  console.log(data);
})();

Promise の値を処理するthenメソッドを使用する

Promise の then メソッドを使用して、値が解決されたときに実行するコールバック関数を指定します。

const promise = fetch('https://example.com/data.json');

promise.then(data => {
  console.log(data);
});

Promise の型を明示的に指定することで、TypeScript に Promise が値として使用されていることを伝えることができます。

const promise: Promise<string> = fetch('https://example.com/data.json');

promise.then(data => {
  console.log(data);
});

Promise を any 型に変換する

最後の手段として、Promise を any 型に変換することができます。ただし、これは型安全性に反するため、推奨されません。

const promise: any = fetch('https://example.com/data.json');

promise.then(data => {
  console.log(data);
});

これらの方法のいずれかを使用することで、typescript: error TS2693: 'Promise' only refers to a type, but is being used as a value here エラーを解決することができます。

補足

TypeScript は、JavaScript コードを静的に解析し、型エラーなどの問題を検出する言語です。
Promise は、非同期操作を表す型です。非同期操作とは、結果がすぐに得られない操作のことです。
then メソッドは、Promise の値が解決されたときに実行するコールバック関数を指定するのに使用されます。
any 型は、任意の型の値を保持できる型です。

// 1. `await` キーワードを使用して値を待機する

const fetchUser = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
  const user = await response.json();
  console.log(user);
};

fetchUser();

// 2. `Promise` の `then` メソッドを使用して値を処理する

const fetchUser = () => {
  fetch('https://jsonplaceholder.typicode.com/users/1')
    .then(response => response.json())
    .then(user => console.log(user))
    .catch(error => console.error(error));
};

fetchUser();

// 3. `Promise` の型を明示的に指定する

const fetchUser: Promise<User> = () => {
  return fetch('https://jsonplaceholder.typicode.com/users/1')
    .then(response => response.json());
};

fetchUser().then(user => console.log(user));

// 4. `Promise` を `any` 型に変換する (推奨されない)

const fetchUser: any = () => {
  return fetch('https://jsonplaceholder.typicode.com/users/1')
    .then(response => response.json());
};

fetchUser().then(data => console.log(data));

これらのコードは、Promise 型をどのように使用するかを理解するための例です。実際のコードでは、状況に応じて適切な方法を選択する必要があります。

TypeScript で Promise を使用するその他の方法

非同期ジェネレータは、Promise をより流暢に処理するための構文です。

async function* fetchUser() {
  const response = yield fetch('https://jsonplaceholder.typicode.com/users/1');
  const user = yield response.json();
  return user;
}

(async () => {
  const user = await fetchUser();
  console.log(user);
})();

Promise.all() メソッドを使用して、複数の Promise を並行に処理することができます。

const fetchUser = () => fetch('https://jsonplaceholder.typicode.com/users/1').then(response => response.json());
const fetchPost = () => fetch('https://jsonplaceholder.typicode.com/posts/1').then(response => response.json());

Promise.all([fetchUser(), fetchPost()])
  .then(([user, post]) => {
    console.log(user);
    console.log(post);
  })
  .catch(error => console.error(error));

then() メソッドをチェーンして、Promise を連鎖させることができます。

fetch('https://jsonplaceholder.typicode.com/users/1')
  .then(response => response.json())
  .then(user => fetch(`https://jsonplaceholder.typicode.com/posts?userId=${user.id}`))
  .then(response => response.json())
  .then(posts => console.log(posts))
  .catch(error => console.error(error));

AbortController を使用して、Promise をキャンセルすることができます。

const controller = new AbortController();
const signal = controller.signal;

const fetchUser = () => fetch('https://jsonplaceholder.typicode.com/users/1', { signal });

fetchUser()
  .then(response => response.json())
  .then(user => console.log(user))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Request was cancelled');
    } else {
      console.error(error);
    }
  });

// キャンセルする
controller.abort();