Angular Material报错string不可赋值给MatSnackBarHorizontalPosition如何解决

报错原因 #

TypeScript会对未显式指定类型的对象默认做宽类型推导：你代码中position参数的默认值{ horizontal: "right", vertical: "bottom" }会被推导为{ horizontal: string; vertical: string }类型，而Angular Material定义的MatSnackBarHorizontalPosition、MatSnackBarVerticalPosition是仅包含合法位置枚举值的字面量联合类型，普通string类型无法直接赋值给该限定类型。
你直接给属性赋值常量"right"、"bottom"时，TypeScript能自动匹配到联合类型的合法值，不会将其推导为普通string，因此不会触发报错。

解决方法 #

方法1：给position参数显式指定类型（最推荐） #

首先从snack-bar包导入对应的类型定义：

import { MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition } from '@angular/material/snack-bar';

然后给position参数显式定义类型：

// 定义位置参数的类型
interface SnackbarPosition {
  horizontal: MatSnackBarHorizontalPosition;
  vertical: MatSnackBarVerticalPosition;
}

showMessage(message: string, position: SnackbarPosition = { horizontal: "right", vertical: "bottom" }): void {
    const _htmlMessage ="some message";
    this.snackBar.openFromComponent(SnackbarComponent, {
        data: {
            html: _htmlMessage
        },
        duration: 2000,
        horizontalPosition: position.horizontal,
        verticalPosition: position.vertical
    });
}

该方法类型校验最严格，还能在后续调用函数时提示合法的位置参数值，避免传入非法值。

方法2：给默认值加const断言限制类型推导 #

如果不想单独定义类型，可以给默认值添加as const，让TypeScript将属性值推导为字面量类型而非普通string：

showMessage(message: string, position = { horizontal: "right", vertical: "bottom" } as const): void {
    const _htmlMessage ="some message";
    this.snackBar.openFromComponent(SnackbarComponent, {
        data: {
            html: _htmlMessage
        },
        duration: 2000,
        horizontalPosition: position.horizontal,
        verticalPosition: position.vertical
    });
}

方法3：赋值时强制类型断言 #

如果仅需要临时修复报错，可以在给snackbar配置赋值时直接断言为对应类型：

import { MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition } from '@angular/material/snack-bar';

showMessage(message: string, position = { horizontal: "right", vertical: "bottom" }): void {
    const _htmlMessage ="some message";
    this.snackBar.openFromComponent(SnackbarComponent, {
        data: {
            html: _htmlMessage
        },
        duration: 2000,
        horizontalPosition: position.horizontal as MatSnackBarHorizontalPosition,
        verticalPosition: position.vertical as MatSnackBarVerticalPosition
    });
}

内容的提问来源于stack exchange，提问作者Code Guru