Typescript types for chartjs-adapter-date-fns

Question

My code works but under my import statements I have 2 dots and if I hover over them it shows the error

Could not find a declaration file for module 'chartjs-adapter-date-fns'. '/home/user/dev/website/client/node_modules/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/chartjs-adapter-date-fns` if it exists or add a new declaration (.d.ts) file containing `declare module 'chartjs-adapter-date-fns';`ts(7016)

I tried yarn add -D @types/chartjs-adapter-date-fns but that seems not to exist. Is the problem that I am missing the typescript types? How can I get rid of this error?

My import statements just in case:

import {
  CategoryScale,
  Chart as ChartJS,
  Filler,
  Legend,
  LinearScale,
  LineElement,
  PointElement,
  TimeScale,
  Title,
  Tooltip,
} from 'chart.js'
import 'chartjs-adapter-date-fns'
import { enGB } from 'date-fns/locale'
import { Line } from 'react-chartjs-2'
import { useMarketDataQuery } from '../generated/graphql'
import BaseCard from './BaseCard'

Dzianis Roi · Accepted Answer · 2022-05-25 09:31:09Z

2

You need to specify your own type definitions for this package.

There are three ways how the library can be typed:

Bundled Types
DefinitelyTyped / @types
Your Own Definitions

As the types aren't bundled with the chartjs-adapter-date-fns package and there are no @types for it in the DefinitelyTyped repository, the only option you have is to provide your own type definition for this package.

The easiest way to do it is to add an empty declaration for it in a .d.ts file in your project with the content.

declare module "chartjs-adapter-date-fns";

It will silence warnings about this module

answered May 25, 2022 at 9:31

Dzianis Roi

9254 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sev Over a year ago

Where would you put this file? should I make a folder src/types?

Dzianis Roi Over a year ago

Yes, it might be a good option. It's up to you where to put declaration files. It's important to make sure that these files are included in tsconfig.json

LeeLenalee · Accepted Answer · 2022-05-25 09:24:15Z

1

The date adapter does not export any functionalities so you can just add a // @ts-ignore above the import or create your own declaration file whith an empty module that provides the typing for the date adapter.

All the typings for the config itself are already provided by chart.js itself.

answered May 25, 2022 at 9:24

LeeLenalee

31.9k7 gold badges62 silver badges81 bronze badges

4 Comments

sev Over a year ago

I tried the // @ts-ignore method but that didn't work - any idea why that could be?

LeeLenalee Over a year ago

No also cant seem to reproduce it, dont get any errors on it: typescriptlang.org/play?#code/…

sev Over a year ago

Could the issue with not being able to reproduce it be from my tsconfig? I have

{   "compilerOptions": {     "target": "es5",     "lib": ["dom", "dom.iterable", "esnext"],     "allowJs": true,     "skipLibCheck": true,     "strict": true,     "forceConsistentCasingInFileNames": true,     "noEmit": true,     "esModuleInterop": true,     "module": "esnext",     "moduleResolution": "node",     "resolveJsonModule": true,     "isolatedModules": true,     "jsx": "preserve",     "incremental": true   },

LeeLenalee Over a year ago

Don't know enough about that specifically to give you an answer about that

Collectives™ on Stack Overflow

Typescript types for chartjs-adapter-date-fns

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related