【ReactNative開発】パッケージのインストール時ににつける@typesとは?【TypeScript】

こんにちは。今日も今日とてReactNativeに染まる週末です。

私は今、TypeScript+ReactNativeで日々開発をしているのですが、最近、パッケージをインストールしてもimport時にNot foundのエラーが出るケースに何度か遭遇しました。

パッケージは確かにインストールしたのにおかしいな・・と思って調べていると、大体がこの@types問題に帰着することがわかってきましたので、備忘も兼ねてメモを残しておきます。

@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をもっと体系的に学ばれたい方向けにこちらもまとめましたので、ご参考になりましたら幸いです。

この記事を気に入っていただけたらシェアをお願いします!

ABOUT US

Yuu113
初めまして。Yuu113と申します。 兵庫県出身、東京でシステムエンジニアをしております。現在は主にデータ分析、機械学習を活用してビジネスモデリングに取り組んでいます。日々学んだことや経験したことを整理していきたいと思い、ブログを始めました。旅行、カメラ、IT技術、江戸文化が大好きですので、これらについても記事にしていきたいと思っています。