Angular中matSortDirection初始化语法及类型报错问题解析

核心语法解析 #

public defaultSortOrder: "asc" | "desc" = "asc"; 里的 "asc" | "desc" 是TypeScript的联合类型，它的作用是给变量defaultSortOrder设定严格的取值范围：只能是"asc"或者"desc"这两个固定字符串，不能是其他任何字符串。

为什么直接赋值会报错？ #

当你写public defaultSortOrder = "asc";时，TypeScript会自动把这个变量的类型推断为宽泛的string类型——也就是说，它认为这个变量可以被赋值为任意字符串。但Angular Material的matSortDirection属性要求的类型是SortDirection，这个类型本质就是限定为"asc"、"desc"（部分版本还包含空字符串）的联合类型，范围远小于string。类型不匹配，自然就会抛出Type 'string' is not assignable to type 'SortDirection'的错误。

更规范的写法 #

你也可以直接引入Angular Material预定义的SortDirection类型来定义变量，效果是一样的，代码可读性更强：

import { SortDirection } from '@angular/material/sort';

public defaultSortOrder: SortDirection = "asc";

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