アプリ開発を進める中で、予期しないエラーに対処するために「try-catch構文」を使う場面が多々あります。特にReact Nativeのような非同期処理が多い環境では、エラー処理が欠かせませんよね。本記事では、React NativeとTypeScriptを組み合わせた場合のtry-catch構文の使い方をまとめます。

try-catch構文とは？

try-catch構文は、エラーが発生する可能性があるコードを「試しに実行」（try）し、エラーが発生した場合に「キャッチ」（catch）して適切な対処を行うためのものです。

try {
    // 実行したいコード		
} catch (error) {
    // エラー発生時の処理
}

そのままじゃん。。て感じなので、よく使う事例をみながらメリットを紹介します。

React Nativeでの具体例

例1) APIリクエストのエラーハンドリング

外部APIを呼び出す場合、ネットワークエラーやレスポンスエラーが発生することがあるので、エラー発生時の処理をcatch内に記述。

import axios from 'axios';

const fetchUserData = async () => {
    try {
        const response = await axios.get('https://example.com');
        console.log('User data:', response.data);
    } catch (error) {
        console.error('Failed to fetch user data');
    }
};

例2) JSONのパースエラー

JSONファイルを処理する際に、フォーマットが不正な場合のエラーをcatch。

const parseUserData = (jsonString: string) => {
    try {
        const user = JSON.parse(jsonString);
        console.log('Parsed user data:', user);
    } catch (error) {
        console.error('Invalid JSON');
    }
};

errorについて

これまではcatch(error)のみの記述でしたが、catch(error: any)と記述する場合もあります。

違いは、errorオブジェクトを参照するかどうかです。

errorオブジェクトについてはこちら参照（https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Error）

なぜerrorオブジェクトの参照に型指定が必要かというと、デフォルトではunknownとみなされるからです。

例）型指定をしない場合

try {
    console.log("Hello, world!");
} catch (error) {
    console.error(error.message); // 型エラー: 'unknown'型に'message'は存在しません
}

例）型指定をする場合

try {
    console.log("Hello, world!");
} catch (error: any) {
    console.error(error.message); // OK: 型が'any'でmessageにアクセス可能
}

ちなみに、以下記事によるとコンパイラーオプションのuseUnknownInCatchVariablesを有効にするとerrorがunknown型、デフォルトではany型だそうです（未検証。自分の場合特に設定いじってないのに型指定しないとエラーになったのはなんのことやら）。

他に以下の情報も見つかりました。

TypeScript 4.4から、catchされたエラーはanyからunknownで返されるようになったらしい。

いずれにせよ、頭の片隅にあれば対応可能かと思います。