web-dev-qa-db-ja.com

モジュール「date-fns」が見つかりません

インストールされたノードモジュール「date-fns」を使用してインポートすると

_import { startOfDay } from 'date-fns';_

その後、コンパイルエラーが発生します：

_error TS2307: Cannot find module 'date-fns'._

ただし、以下ではエラーは発生しません。

var startOfDay = require('date-fns');

なぜこれが起こっているのですか？

以下は私のインストールされたdate-fnsです：

_node_modules/date-fns/
├── start_of_day
│   ├── index.js
│   └── index.js.flow
_
angulartypescriptcompiler-errors
8
Kumar Gaurav

代わりにこれを使用してみてください最初にモジュールをインポートします

端末タイプで

npm install date-fns @types/date-fns

次にコードで

import * as startOfDay from "date-fns";
12
Edwin Kato

特にstart_of_day関数のみを使用する場合は、代わりに documentation を使用する必要があります。

Npmによるインストール

npm install date-fns --save

または糸で：

yarn add date-fns

使用例：

// option 1
var startOfDay = require('date-fns/start_of_day');

// option 2
// import * as startOfDay from 'date-fns/startOfDay';

// option 3 (only 2.0.0-alpha.25 or higher)
// import { startOfDay } from 'date-fns';

// The start of a day for 2 September 2014 11:55:00:
var result = startOfDay(new Date(2014, 8, 2, 11, 55, 0));
//=> Tue Sep 02 2014 00:00:00

利点

オプション1と2を使用すると、ほとんどのビルドツールで実際に使用するものだけを簡単に含めることができるため、最終的なバンドルが小さくなり、Webアプリの読み込みがわずかに速くなります。ライブラリに追加されたsideffectフラグを参照するWebpack 4およびその他のビルドツールも、2.0.0-alpha.25以降を使用している場合、オプション3をツリーシェークできます。

現在、date-fnsの一般的なモジュール性は、「date-fns」がより一般的で確立された「モーメント」と比較した場合の主な利点です。著者は githubの問題 の他の利点についても説明しています。

「date-fns」のすべてをインポートしないでください

上記の両方のソリューションは単に「date-fns」ライブラリ全体をフェッチするだけなので、まだ有効な構文ですが、変数に「startOfDay」というラベルを付けると、実際にロードまたは使用される部分はこの関数だけであるように見えます。他のすべての機能も無駄に読み込まれる場合。 「start_of_day」は、同じオブジェクトにロードされた多くの関数の1つにすぎません。

したがって、本当にすべての関数をロードしたい場合は、代わりに変数「date-fns」を呼び出す必要があります。ただし、使いやすさと利点を考えると、ドキュメンテーションに従って個々の関数をインポートしない理由はわかりません。

タイプ定義

編集：TypeScript 2+では、ライブラリから直接型定義を取得します（バージョン1.23+）。

以前のバージョン（バージョン1.22.x以下）は、 "date-fns"の型定義のインストールに関するEdwin Katoのアドバイスに従う必要があります。ただし、「package.json」のローカルの開発依存関係にも保存する必要があります。 npmを使用する場合は、これを明示的に示す必要があります。ヤーンの場合は、それが開発依存であり、通常の依存ではないことを述べる必要があります。

したがって、npmを使用して次のようにインストールする必要があります。

npm install @types/date-fns --save-dev

または糸で：

yarn add @types/date-fns --dev
7
Koslun

代わりに言うべきですか

import * as startOfDay from 'date-fns/startOfDay';

Angular TypeScriptコードで他のライブラリを使用して同様のことを行っているようです。

2
Alex

これはより良いアプローチだと思います

import  {differenceInCalendarDays, parseISO } from 'date-fns';
0
Alamgir Qazi