Typescript错误 TS2345: 类型为’number’的参数无法分配给类型为’never’的参数。

huangapple go评论68阅读模式
英文:

Typescript error TS2345: Argument of type 'number' is not assignable to parameter of type 'never'

问题

以下是代码部分的中文翻译:

> src/app/is-disabled/is-disabled.component.ts:26:89 - error TS2345: 类型为 'number' 的参数无法分配给类型为 'never' 的参数。
>
> 26       ([allowDenyListed, denyList, selected]) => !allowDenyListed && denyList!.includes(selected),

带有错误的 TypeScript 代码如下:

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { combineLatest, map, startWith } from 'rxjs';

@Component({
  selector: 'app-is-disabled',
  templateUrl: './is-disabled.component.html',
  styleUrls: ['./is-disabled.component.css']
})
export class IsDisabledComponent {
  users = [
    { name: 'Peter', id: 1 },
    { name: 'Paul', id: 2 },
    { name: 'Mary', id: 3 },
  ];

  denyListedUsers = new FormControl([]);
  selectedUserId = new FormControl(null);
  allowDenyListedUsers = new FormControl(false);
  isDisabled$ = combineLatest([
    this.allowDenyListedUsers.valueChanges.pipe(startWith(false)),
    this.denyListedUsers.valueChanges.pipe(startWith([])),
    this.selectedUserId.valueChanges.pipe(startWith(null), map(id => +id!)),
  ]).pipe(
    map(
      ([allowDenyListed, denyList, selected]) => !allowDenyListed && denyList!.includes(selected),
    ),
  )
}

Angular 版本为 15.0.0。

英文:

The following Angular Typescript code has an error:

> src/app/is-disabled/is-disabled.component.ts:26:89 - error TS2345: Argument of type 'number' is not assignable to parameter of type 'never'.
>
> 26 ([allowDenyListed, denyList, selected]) => !allowDenyListed && denyList!.includes(selected),

I am learning Angular, Typescript and Rxjs.
I think I need to declare the proper type for line 26. I tried but still, get the same error.
How to fix it?

is-disabled.component.html:

<select [formControl]="selectedUserId">
    <option>Select a User</option>
    <option *ngFor="let user of users" [value]="user.id">{{ user.name }}</option>
</select>
<select [formControl]="denyListedUsers" multiple>
    <option *ngFor="let user of users" [value]="user.id">{{ user.name }}</option>
</select>
Allow deny listed users <input type="checkbox" [formControl]="allowDenyListedUsers" />
<button [disabled]="isDisabled$ | async">Submit</button>

is-disabled.component.ts:

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { combineLatest, map, startWith } from 'rxjs';

@Component({
  selector: 'app-is-disabled',
  templateUrl: './is-disabled.component.html',
  styleUrls: ['./is-disabled.component.css']
})
export class IsDisabledComponent {
  users = [
    {name: 'Peter', id: 1},
    {name: 'Paul', id: 2},
    {name: 'Mary', id: 3},
  ];

  denyListedUsers = new FormControl([]);
  selectedUserId = new FormControl(null);
  allowDenyListedUsers = new FormControl(false);
  isDisabled$ = combineLatest([
    this.allowDenyListedUsers.valueChanges.pipe(startWith(false)),
    this.denyListedUsers.valueChanges.pipe(startWith([])),
    this.selectedUserId.valueChanges.pipe(startWith(null), map(id => +id!)),
  ]).pipe(
    map(
      ([allowDenyListed, denyList, selected]) => !allowDenyListed && denyList!.includes(selected),
    ),
  )
}

The Angular version is 15.0.0.

答案1

得分: 2

  1. 使用强类型的 FormControl。
denyListedUsers = new FormControl<number[]>([] as number[]);
  1. 接下来,您必须将空数组 [] 定义为 number[] 类型。
this.denyListedUsers.valueChanges.pipe(startWith([] as number[]))

或者,不使用 startWith rxjs 运算符也可以正常工作。

this.denyListedUsers.valueChanges.pipe()

示例 @ StackBlitz

英文:
  1. Use strong-typed FormControl.
denyListedUsers = new FormControl&lt;number[]&gt;([] as number[]);
  1. Next, you have to define empty array [] as number[] type.
this.denyListedUsers.valueChanges.pipe(startWith([] as number[]))

Or without startWith rxjs operator could be worked as well.

this.denyListedUsers.valueChanges.pipe()

Demo @ StackBlitz

huangapple
  • 本文由 发表于 2023年2月10日 11:06:54
  • 转载请务必保留本文链接:https://go.coder-hub.com/75406559.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定