Attempting to fix TypeScript errors

[GabrielCousin]

I have to say there is a huge part of TypeScript witchcraft ✨
After upgrading to 5.1.0, we keep experiencing these reports:

Found 8 errors.

  - name: Error
  - nodeAnnotation: [undefined]
  - nodeName: [undefined]
  - originalErrorMessage: [undefined]
  - stack: Error: Command failed with exit code 2: tsc --allowJs false --noEmit false --rootDir /home/runner/work/***/*** --isolatedModules false --declaration --declarationDir /home/runner/work/***/***/e-c-ts-precompile-1751 --emitDeclarationOnly --pretty true
addon/components/sm-previewable-dropzone.ts:92:5 - error TS2322: Type 'string | ArrayBuffer | null' is not assignable to type 'string | null'.
  Type 'ArrayBuffer' is not assignable to type 'string'.

92     this.previewBase64Url = base64;
       ~~~~~~~~~~~~~~~~~~~~~

node_modules/ember-file-upload/addon/queue.ts:156:30 - error TS2345: Argument of type 'import("/home/runner/work/***/***/node_modules/ember-file-upload/addon/upload-file").default' is not assignable to parameter of type 'import("/home/runner/work/***/***/node_modules/ember-file-upload/upload-file").default'.
  Property '#private' is missing in type 'import("/home/runner/work/***/***/node_modules/ember-file-upload/addon/upload-file").default' but required in type 'import("/home/runner/work/***/***/node_modules/ember-file-upload/upload-file").default'.

156       listener.onFileAdded?.(file);
                                 ~~~~

  node_modules/ember-file-upload/upload-file.d.ts:9:5
    9     #private;
          ~~~~~~~~
    '#private' is declared here.

node_modules/ember-file-upload/addon/queue.ts:174:32 - error TS2345: Argument of type 'import("/home/runner/work/***/***/node_modules/ember-file-upload/addon/upload-file").default' is not assignable to parameter of type 'import("/home/runner/work/***/***/node_modules/ember-file-upload/upload-file").default'.

174       listener.onFileRemoved?.(file);
                                   ~~~~

node_modules/ember-file-upload/addon/queue.ts:236:31 - error TS2345: Argument of type 'import("/home/runner/work/***/***/node_modules/ember-file-upload/addon/upload-file").default[]' is not assignable to parameter of type 'import("/home/runner/work/***/***/node_modules/ember-file-upload/upload-file").default[]'.
  Type 'import("/home/runner/work/***/***/node_modules/ember-file-upload/addon/upload-file").default' is not assignable to type 'import("/home/runner/work/***/***/node_modules/ember-file-upload/upload-file").default'.

236       named.onFilesSelected?.(selectedFiles);
                                  ~~~~~~~~~~~~~

node_modules/ember-file-upload/addon/services/file-queue.ts:118:5 - error TS2717: Subsequent property declarations must have the same type.  Property ''file-queue'' must be of type 'FileQueueService', but here has type 'FileQueueService'.

118     'file-queue': FileQueueService;
        ~~~~~~~~~~~~

  node_modules/ember-file-upload/services/file-queue.d.ts:71:9
    71         'file-queue': FileQueueService;
               ~~~~~~~~~~~~
    ''file-queue'' was also declared here.

node_modules/ember-file-upload/addon/upload-file.ts:158:19 - error TS2345: Argument of type 'this' is not assignable to parameter of type 'UploadFile'.
  Property '#private' is missing in type 'import("/home/runner/work/***/***/node_modules/ember-file-upload/addon/upload-file").default' but required in type 'import("/home/runner/work/***/***/node_modules/ember-file-upload/upload-file").default'.

158     return upload(this, url, options, (request) => {
                      ~~~~

  node_modules/ember-file-upload/upload-file.d.ts:9:5
    9     #private;
          ~~~~~~~~
    '#private' is declared here.

node_modules/ember-file-upload/addon/upload-file.ts:171:7 - error TS2345: Argument of type 'this' is not assignable to parameter of type 'UploadFile'.

171       this,
          ~~~~

node_modules/ember-file-upload/queue.d.ts:97:42 - error TS2694: Namespace '"/home/runner/work/***/***/node_modules/ember-modifier/index"' has no exported member 'FunctionBasedModifier'.

97     selectFile: import("ember-modifier").FunctionBasedModifier<{
                                            ~~~~~~~~~~~~~~~~~~~~~

Issues we can ignore because that are related to our project:

• 97 selectFile: import("ember-modifier").FunctionBasedModifier<{ 👉 fixed with upgrading ember-modifier into our project
• 92 this.previewBase64Url = base64; 👉 fixed in our project (the "issue" is because the "cancellablePromise" can return several types

Issues I fixed

• '#private' is declared here. 👉 It appears that TypeScript prefers using the private field notation instead of #field private class field declaration generates #private in dts microsoft/TypeScript#38050 - I agree we can feel like it's not the "modern" way to write things
• I noticed some files could have different typing files because of different paths 👉 I suggest we use Ember aliases instead of relative paths
• I fixed the service injecting (https://github.com/typed-ember/ember-cli-typescript/blob/master/docs/ember/services.md#using-services) - which was already correct on every injection except into the FileQueueHelper

Let me know if I can help!
To test things out, I ran ember ts:precompile and replace ember-file-upload folder in my project node_modules

[gossi]

Basically, most of the changes you are "reverting" is going back to an old style before there was #private available in js (which is fine to use in ts as well) - which feels like a step backwards (ref to last sentence).

The import paths are internal and the public exports are subject when moving to a v2 addon format - which might be the solution to your problem.

What surprises me most is actually the fact, you are seeing these messages (which you shouldn't for sure). As I/we never experienced them and we need to understand them. Can you provide a minimal working example in form of a repro repo? Most likely your project config/setup is the interesting part.

I'm looking for a way to "fix this forward" with hindsight of addon v2 format 👍

[GabrielCousin]

@gossi Thanks for challenging this! Actually I found the root issue (and it's on us):

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';
import Notify from 'ember-notify';
import UploadFile from 'ember-file-upload/addon/upload-file'; // <-- replacing with import UploadFile from 'ember-file-upload/upload-file'; fixes everything

export interface DataTransfer {
  valid: boolean;
  files: File[];
}

interface SmPreviewableDropzoneArgs {
  name: string;
  maxFileSize: number;
  accept?: string;
  imageUrl?: string;
  onFileAdd: (file: UploadFile) => void;
  onFileDelete: () => void;
}

export default class SmPreviewableDropzone extends Component<SmPreviewableDropzoneArgs> {
  // ...
}

Sorry for the false alarm 😞

[GabrielCousin]

I'm taking the liberty to close this since it's not relevant anymore

[gossi]

Thank you for investing more time for another look. I know your problem I've been running into this way too often, when you hit ctrl + space without checking if the import is from the correct location =)