tameemsafi / typewriterjs

A simple yet powerful native javascript plugin for a cool typewriter effect.
https://www.npmjs.com/package/typewriter-effect
MIT License
2.49k stars 221 forks source link

Cannot find Typewriter when installing through npm #144

Open wolkemann opened 2 years ago

wolkemann commented 2 years ago

Hello, I have a project that uses Vite with Typescript. When I install TypewriterJs through then I can't import it because Typewriter is no where to be found.

hamzajamshed152 commented 2 years ago

you should import TypewriterComponent

josias-r commented 2 years ago

Index.d.ts suggests the TypewriterClass to be a named export, but it isn't and will throw an error when used.

import { TypewriterClass } from "typewriter-effect";
const typewriter = new TypewriterClass(myElement, {
    loop: true,
    delay: 75,
});

// -> TypeError: TypewriterClass is not a constructor
Shadowstep33 commented 2 years ago

Im still working on getting it fully working... but @wolkemann this solved my issue:

tsconfig.json

{
  "compilerOptions": {
    "esModuleInterop": true,
...

and I import and use it like so:

import Typewriter from 'typewriter-effect/dist/core';
...
    new Typewriter('#typewriter', {
      strings: this.splitNarr(),
      autoStart: true,
    })
    .callFunction(() => {
      console.log('String typed out!');
    });    
thdoan commented 1 year ago

I have "esModuleInterop": true but getting this error in Svelte:

Could not find a declaration file for module 'typewriter-effect/dist/core'. 'path/to/node_modules/typewriter-effect/dist/core.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/typewriter-effect` if it exists or add a new declaration (.d.ts) file containing `declare module 'typewriter-effect/dist/core';`

However, there is no such package @types/typewriter-effect -- how did you guys solve this TS error?

UPDATE: I solved it by adding this to vite-env.d.ts:

declare module 'typewriter-effect/dist/core';
zakutnya commented 9 months ago

In my TS project I've managed to both get rid of import error and to enable typewriter-effect code completion by adding the following to vite-env.d.ts:

declare module "typewriter-effect/dist/core" {
    const Typewriter: typeof import("typewriter-effect").TypewriterClass;
    export default Typewriter;
}
jneuendorf-i4h commented 6 months ago

In my TS project I've managed to both get rid of import error and to enable typewriter-effect code completion by adding the following to vite-env.d.ts:

declare module "typewriter-effect/dist/core" {
    const Typewriter: typeof import("typewriter-effect").TypewriterClass;
    export default Typewriter;
}

I think, adding this to this repo's index.d.ts should make it work out of the box, shouldn't it?