如何将 date-fns 与 TypeScript 一起使用？

Question

I have an ASP.NET Core website with TypeScript. My ASP.NET Core setup is typical in that it has a node_modules folder in the root of the project and then I copy the source folders of the libraries I'm using from node_modules to wwwroot/lib using Gulp.

Therefore, I have date-fns source files in wwwroot/lib/date-fns and in my TypeScript .ts file I'm trying to import it like this:

import * as fns from "lib/date-fns/i.am.stuck.here.js";

The VS2019 code editor is autocompleting the folder so it can see it, but I don't know what .js file to enter, it doesn't suggest one.

I also don't know if I should import * or something else. I'm not a frontend dev so I struggle with TS and JS and imports and requires and all that stuff.

I can see that date-fns has a typings file so I assume this is straight forward for those in the know.

---

Update:

I found this:

https://github.com/date-fns/date-fns/blob/master/examples/typescript/example.ts

Which is strange because updating my code to the below, which is auto-suggested as the editor reads the folders on disk:

import { format } from "lib/date-fns";

Leaves me with an error:

error TS2307: Cannot find module 'lib/date-fns' or its corresponding type declarations.

When I was importing moment.js I pointed it at the .js file itself, which was auto-suggested.

Also, if I change to 'lib/date-not-exist' I get the same error, so I'm unable to tell if it's a file path existence issue or a TypeScript locating module issue.

---

Update:

I can get TypeScript to squelch the error and presumably find a module with this:

import * as dformat from "lib/date-fns/format/index";

But this doesn't work because:

var result = dformat(date, 'dd.MM.yyy HH:mm:ss');

Gives error:

error TS2349: This expression is not callable.

Answer 1

See my answer in Import a JavaScript module or library into TypeScript if you're having problems importing modules generally using TypeScript and JavaScript in the browser.