Angular/Typescript：声明传递给“find”的lambda的返回类型

Posted 2023-02-22

【中文标题】Angular/Typescript：声明传递给“find”的lambda的返回类型

【英文标题】：Angular/Typescript: declare return type of lambda passed to "find"

【发布时间】：2021-10-16 12:29:49

【问题描述】：

所以，我正在参加培训课程并拥有 Angular 服务：

import Exercise from "./exercise.model";

export class TrainingService
  private availableExercises: Exercise[] = [
     id: 'crunches', name: 'Crunches', duration: 30, calories: 8 ,
     id: 'touch-toes', name: 'Touch Toes', duration: 180, calories: 15 ,
     id: 'side-lunges', name: 'Side Lunges', duration: 120, calories: 18 ,
     id: 'burpees', name: 'Burpees', duration: 60, calories: 8 
  ];

  private currentExercise: Exercise | null = null;

  getAvailableExercises() : Exercise[] 
    return this.availableExercises.slice();   //// slice() returns a copy (new object), not a reference
  

  startExercise(exerciseId: string) : void 
    this.currentExercise = this.availableExercises.find( (exercise: Exercise) : Exercise | null => 
        exercise.id === exerciseId);
  

我刚刚添加了startExercise)() 并收到错误消息。当然，我可以将其重新编码为不使用find()，但更愿意知道这里发生了什么。来自强类型语言背景，我强制执行类型检查。

具体错误是

  Type 'undefined' is not assignable to type 'Exercise | null'.

18     this.currentExercise = this.availableExercises.find( (exercise: Exercise) : Exercise | null => exercise.id === exerciseId);
       ~~~~~~~~~~~~~~~~~~~~


Error: src/app/training/training.service.ts:18:81 - error TS2355: A function whose declared type is neither 'void' nor 'any' must return a value.

18     this.currentExercise = this.availableExercises.find( (exercise: Exercise) : Exercise | null => exercise.id === exerciseId);

如何修复该代码？

【问题讨论】：

.find() 如果未找到匹配项，将返回 undefined，因此您将收到未定义的错误 (developer.mozilla.org/en-US/docs/Web/javascript/Reference/…)。如果您 100% 确定 find() 将返回单个项目，例如 this.availableExercises.find().....

，则可以显式提供类型

【参考方案1】：

打字稿编译器知道数组 AvailableExercises 的类型是练习 []，所以实际上你不必定义 (练习：练习)：练习 |再次 null 作为类型练习。

只是放：

this.currentExercise = this.availableExercises.find(exercise => exercise.id === exerciseId); 

应该已经开始工作了。您可以检查它是否找到任何东西，因为 array.find 将返回谓词为真且未定义的第一个元素。所以

if (!this.currentExercise) 
   // Here some error or your own idea

---

在这里，很抱歉编辑答案，但我不能真正在commants中编码格式。

private currentExercise: Exercise | undefined;

this.currentExercise = this.availableExercises.find( (exercise: Exercise) => exercise.id === exerciseId); 有效

【讨论】：

唉，还是报错:-( error TS2322: Type 'Exercise | undefined' is not assignable to type 'Exercise | null'. Type 'undefined' is not assignable to type 'Exercise | null'.

不用private currentExercise: Exercise | null = null;，private currentExercise: Exercise;就够了:)

哦，实际上我已经编辑了答案来解释这一点。 array.find 将返回一个运动元素，如果没有找到则返回 undefined，因此您可以将 null 更改为 undefined。

是的，@Pilpo 所说的我也会这样做。但是错误背后的原因正如解释的那样，array.find 返回您的类型或未定义:)。

@Pipo 因为 strng 类型检查，所以 gievs TS2564: Property 'currentExercise' has no initializer and is not definitely assigned in the constructor. 但是，nvm，@sdev95 已经回答了它