こんにちは。今日も今日とてReactNativeに染まる週末です。
私は今、TypeScript+ReactNativeで日々開発をしているのですが、最近、パッケージをインストールしてもimport時にNot foundのエラーが出るケースに何度か遭遇しました。
パッケージは確かにインストールしたのにおかしいな・・と思って調べていると、大体がこの@types問題に帰着することがわかってきましたので、備忘も兼ねてメモを残しておきます。
Contents
@typesとは？なぜ必要？
この記事が非常にわかりやすかった。説明は全て譲るとします。笑
JavaScriptの資産と@types | Revised Revised TypeScript in Definitelyland
例えば、react-native-calendarsパッケージ。普通にyarn add react-native-calendars (or npm install)をすると、以下のようなエラーが出てきます。
インポート宣言内のインポートはすべて未使用です。ts(6192)
モジュール 'react-native-calendars' の宣言ファイルが見つかりませんでした。'/Users/ユーザ名/Workspace/プロジェクト名/node_modules/react-native-calendars/src/index.js' は暗黙的に 'any' 型になります。
存在する場合は `npm i --save-dev @types/react-native-calendars` を試すか、`declare module 'react-native-calendars';` を含む新しい宣言 (.d.ts) ファイルを追加しますts(7016)ここで、上記のアドバイスのように、@typesをつけてインストールすると、無事importのエラーが解消されました！
yarn add @types/react-native-calendars @typesのパッケージが存在しない場合の対処方法は？
で、@typesによる型定義ファイルがない場合には、以下の記事で紹介されているような方法で自前で準備することも可能だとのこと。
TypeScript で型定義ファイル( d.ts )がないときの対処法 – Qiita
勉強になりました！
[番外編] TypeScriptをもっと学ぶなら・・
TypeScriptをもっと体系的に学ばれたい方向けにこちらもまとめましたので、ご参考になりましたら幸いです。
