Strict type check error is thrown when compiling with typeScript/Angular

[temecom]

Describe the Bug

When importing the form-js library a type error:

Member 'container' implicitly has an 'any' type.ts(7008)

is reported in file node_modules/@bpmn-io/form-js-viewer/dist/types/render/Renderer.d.ts preventing the typescript compilation to continue.

Steps to Reproduce

1. Create an Angular project

ng new form-js-test
cd form-js-test

2. Install form-js-viewer types

npm install @bpmn-io/form-js-viewer

3. Generate a component

ng g c TestForm

4. Update the test-form.component.ts file:

import { Component, OnInit } from '@angular/core';

import { Form, Schema } from '@bpmn-io/form-js-viewer';

@Component({
  selector: 'app-test-form',
  standalone: true,
  imports: [],
  templateUrl: './test-form.component.html',
  styleUrl: './test-form.component.scss'
})
export class TestFormComponent implements OnInit {
  form: Form; // Declare form as a class field
  schema: Schema = {
    type: "default",
    components: [
      {
        key: 'creditor',
        id: 'abcdef', 
        label: 'Creditor',
        type: 'textfield',
        validate: {
          required: true,
        },
      },
    ],
  };
  data = {
    creditor: 'John Doe Company',
  };

  constructor() { 
    this.form = new Form(); 
  }

  ngOnInit(): void {
    this.initializeForm();
  }

  initializeForm(): void {
    const container: HTMLElement | null= document.querySelector('#form-container'); 
    this.form = new Form({
      container:  container, // Explicitly define the type
    });
    
    this.form.importSchema(this.schema, this.data);

    // Add event listeners
    this.form.on('submit', this.onSubmit.bind(this));
    this.form.on('changed', 500, this.onFormChanged.bind(this));
  }

  onSubmit(event: any): void {
    console.log('Form <submit>', event);
    // Handle form submission here
  }

  onFormChanged(event: any): void {
    console.log('Form <changed>', event);
    // Handle form change here
  }
}

5. Add a route to the form app.routes.ts

import { Routes } from '@angular/router';
import { TestFormComponent } from './test-form/test-form.component';

export const routes: Routes = [
    {path: 'form/test', component: TestFormComponent}

];

7. Run the server

ng serve

8. Open browser on address:

localhost:4200/form/test

Expected Behavior

Service compiles and renders.

Fix

Update Config declaration:

export type Config = {
    container:HTMLElement;
};

Environment

• Host Angular
• OS: WSL/Windows 11
• Library version: latest

[vsgoulart]

Hello @temecom , I believe the best solution for you would be to disable type checks on libraries via skipLibCheck, since this is third-party code your app has no control over

We sure want to improve our types but it's not a high priority for us right now.

[temecom]

Thank you for the quick response. So far that was the only type check that failed so I can live with a local fix without having to remove type checking globally which has significant down sides.  If you can slip it into a release it would be much appreciated. Thanks ChrisSent from my T-Mobile 4G LTE Device -------- Original message --------From: Vinícius Goulart @.> Date: 5/7/24 12:04 PM (GMT-05:00) To: bpmn-io/form-js @.> Cc: "Christopher C. Smith" @.>, Mention @.> Subject: Re: [bpmn-io/form-js] Strict type check error is thrown when compiling with typeScript/Angular (Issue #1176) Hello @temecom , I believe the best solution for you would be to disable type checks on libraries via skipLibCheck, since this is third-party code your app has no control over We sure want to improve our types but it's not a high priority for us right now.

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: @.***>

[MUSTJPI]

Agree with the down sides...and mention that this was already signaled here : [https://github.com/bpmn-io/form-js/issues/1153]