Could not find a declaration file for module 'troika-three-text'

[yoavmil]

Can't import troika-three-text in my Angular project:

Error TS7016: Could not find a declaration file for module 'troika-three-text'. 
'.../node_modules/troika-three-text/dist/troika-three-text.umd.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/troika-three-text` if it exists 
      or add a new declaration (.d.ts) file containing `declare module 'troika-three-text';`

Please advice.

[lojjic]

No typescript declarations currently exist -- I'd welcome that as a contribution if someone were so inclined. In the meantime, that message tells you exactly what to do to declare it as a module locally.

[se-panfilov]

I'm pretty sure it's not 100% accurate type, rather a quick fix,. But I guess it should be something like this.

Create troika-three-text.d.ts file in location you like (better root/types) and put the following code inside:

declare module 'troika-three-text' {
  import type { Color, Material, MeshBasicMaterial, MeshStandardMaterial } from 'three';
  import { Object3D } from 'three';

  export class Text extends Object3D {
    constructor();

    text: string;
    fontSize: number;
    font: string;
    color: string | number | Material;
    maxWidth: number;
    lineHeight: number;
    letterSpacing: number;
    textAlign: 'left' | 'right' | 'center' | 'justify';
    material: MeshBasicMaterial | MeshStandardMaterial;
    anchorX: 'left' | 'center' | 'right' | number;
    anchorY: 'top' | 'middle' | 'bottom' | 'baseline' | number;
    clipRect: [number, number, number, number];
    depthOffset: number;
    direction: 'auto' | 'ltr' | 'rtl';
    overflowWrap: 'normal' | 'break-word';
    whiteSpace: 'normal' | 'nowrap';
    outlineWidth: number;
    outlineOffsetX: number;
    outlineOffsetY: number;
    outlineColor: string | number;
    outlineOpacity: number;
    strokeWidth: number;
    strokeColor: string | number | Color;
    strokeOpacity: number;
    curveRadius: number;
    fillOpacity: number;
    fontStyle: 'normal' | 'italic';
    fontWeight: 'normal' | 'bold';
    glyphGeometryDetail: number;
    gpuAccelerateSDF: boolean;
    outlineBlur: number;
    sdfGlyphSize: number;
    textIndent: number;
    unicodeFontsUrl: string;
    sync: () => void;
    dispose(): void;
  }
}

[merlinthemagic]

@se-panfilov added verbatim to node_modules/troika-three-text and Angular 17 started rendering beautiful dynamic text

[TBrayner]

Can you show more specifically how did you do to make it work?

[netgfx]

is there something we can do about troika-three-utils for types?

[mihkuno]

why was this closed the issue still exists

[ajmas]

@mihkuno likely because of the comment by @se-panfilov , though I think it would be better that the type.d.ts file was provided as part of this project or via a @types/troika-three-text package. Personally, I'd prefer the former, since there is more change of it getting the attention from the project maintainers, and its one less package dependency.

Additionally there seems to be this PR, but it does not seem to cover the troika-three-text aspect: #369