Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

add a definition file for typescript

See original GitHub issue


For some project, I use TypeScript in react. The react-lottie package is not compatible with TypeScript because TypeScript requires a variable definition file to work properly (FlowType also uses it for variable definitions).

I propose a draft definition file (I’m not sure it’s 100% compatible with your code)

declare module 'react-lottie' {
   * @param loop if the animation must be continue after the animation has fully executed
   * @param autoplay if the animation needs to be started when the react component requests rendering
   * @param animationData require here the animation data in format JSON
   * @param rendererSettings
  interface LottieBodymovinOptionProps {
    loop?: boolean,
    autoplay?: boolean,
    animationData: any,
    rendererSettings?: {
      preserveAspectRatio?: any
      context?: any, // the canvas context
      scaleMode?: 'noScale' | any,
      clearCanvas?: boolean,
      progressiveLoad?: boolean, // Boolean, only svg renderer, loads dom elements when needed. Might speed up initialization for large number of elements.
      hideOnTransparent?: boolean, //Boolean, only svg renderer, hides elements when opacity reaches 0 (defaults to true)
      className?: string,

   * @param eventName the event sent by bodymovin
   * @param callback a callback execute when this eventName is received.
  interface BodymovinEvent {
    eventName: 'complete' | 'loopComplete' | 'enterFrame' | 'segmentStart' | 'config_ready' | 'data_ready' | 'loaded_images' |
    'DOMLoaded' | 'destroy',
    callback: () => void,

   * Props of Lottie component
   * @param options the object representing the animation settings that will be instantiated by bodymovin.
   * @param height height size of the animation in pixel, default value is 100%
   * @param width width size of the animation in pixel, default value is 100%
   * @param isStopped must be stocked in a state, boolean that describe if the animation must be in stopped mode
   * @param isPaused must be stocked in a state, boolean that describe if the animation must be in paused mode
   * @param eventListeners optional [default: []], This is an array of objects containing a eventName and callback function that will be registered as eventlisteners on the animation object. refer to bodymovin#events where the mention using addEventListener, for a list of available custom events.
  interface LottiePropsType {
    options: LottieBodymovinOptionProps,
    height?: number | string,
    width?: number | string,
    isStopped: boolean,
    isPaused: boolean,
    eventListeners?: Array<BodymovinEvent>
    segments?: Array<number>
    speed?: number | 1,
    direction?: number,
    ariaRole?: string | 'button',
    ariaLabel?: string | 'animation',
    isClickToPauseDisabled?: boolean,
    title?: string,
   * @component Lottie is a component that allow you to use animation from JSON file that created by
   * Bodymovin on Adobe After Effect
  class Lottie extends React.Component<LottiePropsType, any> {}
  export default Lottie;

Note : this code must be in a file whose name ends in .d.ts. More documentation here

Note : you must probably add a new css rule to remove the blue outline when the mac user clicks on the animation exemple

  .myAnimationDiv {
    outline: 0;

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:4
  • Comments:7

github_iconTop GitHub Comments

Ricki-BumbleDevcommented, Oct 3, 2018

As @chenqingspring doesn’t seem to be looking through PRs lately I also made a PR for the DefininetlyTyped repo, as recommended by @TanelVari, which got merged and published today:

jadboxcommented, Aug 14, 2018

@Kana00 mind starting a PR for this?

Read more comments on GitHub >

github_iconTop Results From Across the Web

TypeScript: Adding Custom Type Definitions for Existing ...
In this case, we're going to make a new folder inside our src folder called customTypings to hold all our definition files, and...
Read more >
Documentation - Creating .d.ts Files from .js files - TypeScript
Run the TypeScript compiler to generate the corresponding d.ts files for JS files; (optional) Edit your package.json to reference the types. Adding TypeScript....
Read more >
A quick introduction to “Type Declaration” files and adding ...
A Type Declaration or Type Definition file is a TypeScript file but with .d.ts filename extension. So what so special about these Type ......
Read more >
How to create your own TypeScript type definition files (.d.ts ...
Writing your own type definitions files. To create our own type definitions, we need to see the source code of the npm module...
Read more >
TypeScript: Type Definition Files - DEV Community ‍ ‍
To add a definition file to your project, you need to install an npm module containing @types/{library_name} name. For example, to add a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found