Angular组件调用含自定义类型的服务编译报错：变量未定义

问题背景 #

跟着Maximillian Schwarzmüller的Udemy课程《Ionic - Build iOS, Android, and Web Apps with Ionic & Angular》开发时，因课程版本较老，Angular/Ionic的TypeScript严格模式更新导致两个编译错误，无法推进课程至第77课。

相关代码片段 #

recipe.model.ts #

export class Recipe {
    id: string = '';
    title: string = '';
    imageUrl: string = '';
    ingredients: string[] = [];
}

const recipe: Recipe = new Recipe();

recipes.service.ts #

import { Injectable } from '@angular/core';
import { Recipe } from './recipe.model';

@Injectable({
  providedIn: 'root'
})
export class RecipesService {

    private recipes: Recipe[] = [
        {
            id: 'r1',
            title: 'Schnitzel',
            imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/Schnitzel.JPG/1024px-Schnitzel.JPG',
            ingredients: ['French Fries', 'Pork', 'Salad']
        },
        {
            id: 'r2',
            title: 'Spaghetti',
            imageUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Spaghetti_Bolognese_mit_Parmesan_oder_Grana_Padano.jpg/1024px-Spaghetti_Bolognese_mit_Parmesan_oder_Grana_Padano.jpg',
            ingredients: ['Spaghetti', 'Meat', 'Tomatoes']
        }
    ]

    constructor() { }

    getAllRecipes() {
        return this.recipes;
    }

    getRecipe(recipeId: string) {
        return this.recipes.find(recipe => {
                return recipe.id === recipeId;
            });
    }
}

recipe-detail.page.ts #

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { RecipesService } from '../recipes.service';
import { Recipe } from '../recipe.model';

@Component({
    selector: 'app-recipe-detail',
    templateUrl: './recipe-detail.page.html',
    styleUrls: ['./recipe-detail.page.scss'],
})
export class RecipeDetailPage implements OnInit {

    loadedRecipe: Recipe = new Recipe();

    constructor(private activatedRoute: ActivatedRoute, private recipesService: RecipesService) {
    }

    ngOnInit() {
        this.activatedRoute.paramMap.subscribe(paramMap => {
            if (!paramMap.has('recipeId')) {
                //todo: redirect
                return;
            }
            const recipeId = paramMap.get('recipeId');
            this.loadedRecipe = this.recipesService.getRecipe(recipeId as string); // !!!ERROR HERE!!!
        });
    }

}

遇到的错误 #

1. 类型不匹配错误：

TS2322: Type 'Recipe | undefined' is not assignable to type 'Recipe'.

2. 参数类型错误（省略类型转换时）：

TS2345: Argument of type 'string | null' is not assignable to parameter of type 'string'.

问题原因与修复方案 #

错误1：返回值可能为undefined #

Array.find()方法在找不到匹配项时会返回undefined，而getRecipe方法未明确标注返回类型，TS会推断其返回Recipe | undefined，但组件中loadedRecipe被声明为Recipe类型，无法接受undefined。

修复方案（二选一）：

• 方案一：确保服务返回有效Recipe
  修改recipes.service.ts中的getRecipe方法，添加不存在时的处理逻辑：

getRecipe(recipeId: string): Recipe {
  const recipe = this.recipes.find(recipe => recipe.id === recipeId);
  // 如果找不到对应食谱，抛出错误或返回默认实例
  if (!recipe) {
    // 场景1：抛出错误，配合组件中的错误处理
    throw new Error(`Recipe with ID ${recipeId} not found`);
    // 场景2：返回默认空实例
    // return new Recipe();
  }
  return recipe;
}

• 方案二：调整组件变量类型并处理空值
  修改recipe-detail.page.ts中的loadedRecipe类型，并在模板中添加空值判断：

// 组件中更新变量类型
loadedRecipe: Recipe | undefined;

在对应的模板文件recipe-detail.page.html中，用*ngIf确保只有当loadedRecipe存在时才渲染内容：

<div *ngIf="loadedRecipe">
  <!-- 食谱详情内容 -->
  <h1>{{ loadedRecipe.title }}</h1>
</div>

错误2：参数可能为null #

paramMap.get('recipeId')的返回类型是string | null，即使你已经通过paramMap.has('recipeId')判断参数存在，TS仍无法自动推断其非空。

修复方案：
使用非空断言运算符!代替类型转换，明确告诉TS该值不会为null：

const recipeId = paramMap.get('recipeId')!;
this.loadedRecipe = this.recipesService.getRecipe(recipeId);

内容的提问来源于stack exchange，提问作者Laurence MacNeill