[RN] ReactNativeのTypeScript化で困ったことまとめ

const { navigation } = this.props;

export interface Props {
  navigation: NavigationScreenProp<any, any>;
}

typescript – Add strong typing for react navigation props – Stack Overflow

Object[key]

型  xxx にはインデックス シグネチャがないため、要素は暗黙的に ‘any’ 型になります。

の対処法

参考:【TypeScript】 Object[key]() (ブラケット記法)で関数呼び出ししたら Element implicitly has an ‘any’ type でハマった話 – Qiita

こんなインターフェースがあったら

interface todayTitle {
  todayFirst: string;
  todaySecond: string;
  todayThird: string;
}

🔼を⏬に

interface todayTitle {
  [key: string]: string;
  todayFirst: string;
  todaySecond: string;
  todayThird: string;
}

Object[key]() (ブラケット記法)で呼ばれた時のキーに関して設定します!

Never型って何?

TypeScriptの型入門 – Qiita

tsconfig.jsonのECMAScript Target

[ts] ES5/ES3 の非同期の関数またはメソッドには、’Promise’ コンストラクターが必要です。’Promise’ コンストラクターの宣言があることを確認するか、`–lib` オプションに ‘ES2015’ を組み込んでください。

困ることよりいいことの方が多い

ScrollView から View に変えてもScrollView設定を消し忘れることがままあるが、typescriptにすれば赤い波波を出してくれるのですぐわかる。

jsの書き方で慣れているならいいけど、そうでないなら逐一レビューしてくれるTypeScriptがおすすめ!

実際にあったひどいコード

TypeScriptにしたらjsxの時に気づかなかったひどいコードがあったので戒め的な感じで載せておきます。

let { todayTitle } = this.setState;

これでも動いていました。。。。凄いね💦

シェアする

  • このエントリーをはてなブックマークに追加

フォローする