Can EaselJS (CreateJS) be utilized with TypeScript through parceljs?

I'm currently working on developing a game using EaselJS, and in this day and age, I've opted to use TypeScript. I have incorporated the "official" types from this source. However, I am encountering difficulties when trying to integrate it with parceljs. When I import the types, parcel fails to build. On the other hand, if I exclude the types during import, parcel works seamlessly but I lose type support in VS Code.

Below is the import that successfully builds with parcel:

import * as createjs from '@createjs/easeljs';

In VS Code, an info warning pops up stating

Could not find a declaration file for module '@createjs/easeljs'
, consequently causing issues with the types.

On the other hand, here's an import that pleases VS Code but disappoints parcel:

import 'createjs';

While this enables the EaselJS types to function properly in VS Code, the parcel build fails with the error

src/main.ts:3:8: Cannot resolve dependency 'createjs'
. Quite frustrating!

Here is a snippet of my package.json:

{
  "name": "corona-coaster",
  "version": "0.1.0",
  "license": "GPL-3.0-only",
  ...
}

And my tsconfig:

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "~/*": [
        "./*"
      ]
    },
    ...
  }
}

You can find the GitHub repository here. Please note that switching to webpack is not an option for me at this time.

Answer №1

After some experimentation, I stumbled upon a clever workaround. Instead of the usual approach, consider using the createjs-module package and importing it with this line:

import * as createjs from 'createjs-module';

Hooray! The struggle is now a thing of the past. No need for any special modifications in the tsconfig file, and you don't have to worry about including types manually - everything you need is already included in the createjs-module. Pretty neat solution!

All credit for this ingenious insight goes to this helpful comment.

Answer №2

Recently, I've come across some interesting developments in my line of work. I'm excited to share that the @thegraid/createjs-module has been updated to createjs 1.0.0, which has resolved numerous issues. Check it out here!

To incorporate these updates, follow these steps:
npm install --save @types/createjs
npm install --save @thegraid/createjs-module
import * as createjs from '@thegraid/createjs-module';

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Strategies for effectively passing parameters to animation step functions

By breaking down an animation function into reusable parts, I created the following structure: const enterLeaveAnimation = ( triggerName: string, step1: AnimationMetadata | AnimationMetadata[], step2: AnimationMetadata | AnimationMetadata[] ) => t ...

Switching the focus of detection from a child to a parent

I am currently working on enhancing the functionality of my UI to display selections dynamically as they are selected or de-selected. import { Wizard } from './report-common'; import { Router } from '@angular/router'; import { DataServ ...

What is the best way to switch a boolean state in React using TypeScript?

Hey there! I'm diving into the world of React and TypeScript. My goal is to toggle a boolean state (true/false) using a handler function. While I've come across solutions in ES6, I'm struggling to grasp how it can be implemented in TypeScri ...

Leveraging React's state to enable temporary invalid numeric input handling

My current approach may be flawed, but I aim to have a parent component and a child component, where the child contains an input field for users to enter numbers. The callback function of the parent component will only be triggered for valid numbers, as ve ...

Handling JSON Objects with Next.js and TypeScript

Currently, I am working on a personal project using Next.js and Typescript. Within the hello.ts file that is included with the app by default, I have added a JSON file. However, I am facing difficulties in mapping the JSON data and rendering its content. T ...

A step-by-step guide on integrating Detox with jest (ts-jest) and Typescript in a react-native app

I've been experimenting with incorporating Typescript into my detox tests. The most relevant information I could find was in this gist. However, when trying to implement it, I encountered an error stating that jasmine is not defined. After researching ...

Custom React components are not designed to handle multiple onClick events simultaneously

One of my custom button components looks like this: export const Button = ({ children, onClick, className, ...props }: IButton) { const [selected, setSelected] = React.useState('primary') const handleSelected = () => { setSele ...

The custom validator in Material2 Datepicker successfully returns a date object instead of a string

Im currently working on developing a unique custom validator for the datepicker feature within a reactive form group. Within my code file, specifically the .ts file: form: FormGroup; constructor( private fb: FormBuilder, ...

The RouteParams encounter a problem because it is unable to resolve all parameters

I'm encountering an issue with the RC3 router. The error message I am receiving is: Can't resolve all parameters for RouteParams: (?). Below is my code: //route.ts import {provideRouter, RouterConfig} from '@angular/router'; import {H ...

Prevent selection of future dates and display them in a muted grey color in the p-calendar component

I am attempting to prevent users from selecting future dates and visually distinguish them by setting a grey color background. However, I am having trouble disabling the future dates while the grey color background is functioning correctly. Any ideas on ho ...

Transfer the layout from one HTML file to multiple others without the need to retype the code

I am working on developing an e-commerce website with HTML/CSS. My goal is to have a consistent template for all product pages that are accessed when clicking on a product. However, I do not want to manually code each page using HTML and CSS. Is there a mo ...

One-of-a-kind npm module for typescript

As part of my project, I am enhancing an existing library to make it compatible with TypeScript. To showcase this modification, I have condensed it into a succinct Minimal working example The specified requirements To ensure backward compatibility, the li ...

What are the ways to recognize various styles of handlebar designs?

Within my project, I have multiple html files serving as templates for various email messages such as email verification and password reset. I am looking to precompile these templates so that they can be easily utilized in the appropriate situations. For ...

The parameter cannot be assigned a value of type 'string' as it requires a value that matches the format '`${string}` | `${string}.${string}` | `${string}.${number}`'

I recently updated my react-hook-forms from version 6 to version 7. Following the instructions in the migration guide, I made changes to the register method. However, after making these changes, I encountered the following error: The argument being pass ...

I am having issues with the Okta Angular sign-in widget as it is not redirecting

Recently, I integrated the Okta angular sign-in widget into my project, but I encountered an issue. In my application, I have multiple modules including an authentication module that manages sign-in, sign-out, and sign-up functionalities. The route I ult ...

Tips for retrieving the return value from a function with an error handling callback

I am having an issue with my function that is supposed to return data or throw an error from a JSON web token custom function. The problem I am facing is that the data returned from the signer part of the function is not being assigned to the token const a ...

Typescript: The property 'userId' is not found within the 'unknown' type

For my rxJS practice in Typescript, I wrote the following simple code. import fetch from 'node-fetch'; import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent, SubscriptionLike, PartialObserver } from &apo ...

Guide to integrating global interfaces into your Nuxt project

Recently diving into the world of Nuxt 3, I've encountered a challenge while exploring TypeScript functionalities. My current goal is to create a versatile NavBar featuring multiple buttons with unique links. To achieve this, I aimed to establish an ...

Can you explain the significance of the "type" reserved word in TypeScript?

When attempting to construct an interface in TypeScript, I discovered that the word "type" is both a keyword and a reserved term. In Visual Studio 2013 with TypeScript 1.4, for instance, when defining the following interface: interface IExampleInterface { ...

In TypeScript and React, what is the appropriate type to retrieve the ID of a div when clicked?

I am facing an issue in finding the appropriate type for the onClick event that will help me retrieve the id of the clicked div. const getColor = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => { const color = event.target.id; // ...