Angular 12 - is not assignable to type '[number, number]

yea2021

I am trying out ngx-charts library in Angular 12 and I keep getting this issue:

Type 'any[]' is not assignable to type '[number, number]'.

Target requires 2 element(s) but source may have fewer.

I don't know what the error means.

Here is the code:

HTML:

<ngx-charts-linear-gauge 
  [view]="view" 
  [scheme]="colorScheme" 
  [value]="value" 
  [previousValue]="previousValue" 
  (select)="onSelect($event)" 
  [units]="units"
>
</ngx-charts-linear-gauge>

ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  single: any[];
  view: any[] = [400, 400];
  colorScheme = {
    domain: ['#aae3f5']
  };
  value: number = 43;
  previousValue: number = 70;
  units: string = 'counts';

  onSelect(event) {
    console.log(event);
  }

}

Any ideas on what the error means, how to fix this?

ts config code is:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}
TmTron

I guess the issue is the type of you view property. According to the cods it must be of type number[]: doc-ref
note: the type in the docs is not exact enough. view is not defined as array of number (number[]), but as a tuple of 2 numbers ([number, number]) - source-code ref

But you define it as any[].
Depending on your typescript compiler settings, you may get an error or warning.

When you need the exact correct type use:

// use as const so that typescript will infer the type [number, number] instead of number[]
view = [400, 400] as const;

The explict type would be:

view: [number, number] = [400, 400];

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Type 'number' is not assignable to type 'Date' in Angular

Type number[][] is not assignable to type number[]

Angular Error: Type 'Observable<number | undefined>' is not assignable to type 'Observable<number>'

Angular - Type 'null' is not assignable to type 'number' in Angular reducer

angular2 Type 'Subject<{}>' is not assignable to type '() => Subject<number>'

Angular2 Error: Type 'number' is not assignable to type 'NumberConstructor'

Angular 2 - Getting Type 'string' is not assignable to type 'number'

Argument of type 'number' is not assignable to parameter of type 'string' - Typescript and Angular

Angular Type 'string' is not assignable to type 'Number' ...but it never is a string

Argument of type 'number' is not assignable to parameter of type 'string' in angular2.

Angular TypeScript error - Type 'number' is not assignable to type 'any[]'

Type 'number' is not assignable to type 'ReadonlyArray<{}>'

Type number is not assignable to type string

Type 'number' is not assignable to type 'string'

Type 'string' is not assignable to type 'number'

Type 'number' is not assignable to type 'TeardownLogic'

Type 'null' is not assignable to type 'number'

Type 'number' is not assignable to type 'never'

TypeScript - Type 'number | undefined' is not assignable to type 'number'

Typescript: Type 'number | null' is not assignable to type 'number'

Type 'Promise<number>' is not assignable to type 'number'

Type 'number' is not assignable to type '[string | number, string]'

Type 'number | undefined' is not assignable to type 'number'

TypeScript: 'number | undefined' is not assignable to parameter of type 'number'

Angular, typescript, google charts - Type (Date|number)[][] is not assignable to type Array<Array<string|number>>

Error: "Type '(num: number) => number' is not assignable to type 'number'.(2322)"

Error: Type 'number | undefined' is not assignable to type 'number | { valueOf(): number; }'?

Typescript error:Type 'number' is not assignable to type 'never'

Type 'undefined' is not assignable to type '(number | null)[]'