Angular 有角度的字体脚本："；类型'；（字符串|未定义）[]和#x27；不可分配给类型'；字符串[]'&引用；

我正在和亚当·弗里曼的书《第9版》一起编写代码。第8行抛出一个错误：

私有类别：字符串[]=[]；

错误是

Error: src/app/model/product.repository.ts:13:7 - error TS2322:
Type '(string | undefined)[]' is not assignable to type 'string[]'.
  Type 'string | undefined' is not assignable to type 'string'.
    Type 'undefined' is not assignable to type 'string'.

我不知道那句话是什么意思。变量怎么可能是字符串和数组

为了让我更困惑，Angular说错误在第13行，而不是第8行。这是第13行：

this.categories=data.map（p=>p.category）.filter（（c，index，array）=>array.indexOf（c）==index.sort（）；

我不知道那条线做什么，除了用过滤器在数组上运行一个映射

该文件还有两个错误。第17行：

getProducts（类别：string=null）：Product[]{

在JavaScript中，我会创建一个空字符串：

var myString='

。在TypeScript中，为什么要将字符串设置为null？字符串和

null

不是不同的类型吗

第三个错误在第22行：

返回this.products.find（p=>p.id==id）；

我不知道那是什么意思

以下是整个文件：

从“@angular/core”导入{Injectable}；
从“/Product.model”导入{Product}；
从“/static.datasource”导入{StaticDataSource}；
@可注射（）
导出类ProductRepository{
私人产品：产品[]=[]；
私有类别：字符串[]=[]；
构造函数（私有数据源：StaticDataSource）{
dataSource.getProducts（）.subscribe（数据=>{
这就是产品=数据；
this.categories=data.map（p=>p.category）.filter（（c，index，array）=>array.indexOf（c）==index）.sort（）；
});
}
getProducts（类别：string=null）：产品[]{
返回此.products.filter（p=>category==null | | category==p.category）；
}
getProduct（id:编号）：产品{
返回这个.products.find（p=>p.id==id）；
}
getCategories（）：字符串[]{
返回此项。类别；
}
}

下面是

product.model.ts

：

出口类产品{
建造师(
公共id？：编号，
公共名称？：字符串，
公共类别？：字符串，
公共描述？：字符串，
公共价格：数字
) { }
}

这引发了另一个错误：

意外标记。应为构造函数、方法、访问器或属性。

第22行的错误是由于

Product

类中的错误造成的吗？

Product

类中的错误是什么？看起来该类有一个构造函数

---

我去了这本书的GitHub repo并下载了最新的文件，这些文件与书中的文件相同。

这里有很多内容，我将尝试一步一步地解释：

首先，它看起来像是在Angular中打开了

“strict”

模式。现在，因为您正在阅读一本书，我建议您关闭它，因为它基本上支持严格的键入和其他类似的东西。在实际项目中，这通常是一种很好的做法，因此您可以避免任何可能的错误，但在这里您可以安全地禁用它要禁用它，请在

tsconfig.json

中将

strict

键设置为

false

错误：src/app/model/product.repository.ts:13:7-错误TS2322:Type “（字符串|未定义）[]”不可分配给类型“字符串[]”。类型 “字符串|未定义”不可分配给类型“字符串”。 类型“未定义”不可分配给类型“字符串”

一旦你关闭严格模式，上面的问题就不会再出现了。TS编译器在这里基本上说的是，你正在将

[]

赋值给

字符串[]

即数组应包含字符串值，但在本例中，您只是将其初始化为空数组，因此它会引发错误。这就是严格模式的工作方式。如果您希望启用严格模式但解决此问题，则可以使用非空断言运算符

！

告诉TS编译器

[]

不为null或未定义。如下所示：

private categories: string[] = []!;

const myString: string = null!;

禁用严格模式后，下面的代码也将停止抛出错误。这基本上是由上述初始化和严格模式本身引起的链式错误

下面解释代码的工作原理： 此代码使用ES6+Arrow语法。实际情况是，您正在使用

Array.prototype.map（）

函数来迭代从

getProducts（）检索的
数据
数组

方法，并将每个对象的

类别

属性从

数据

数组映射到一个新数组，然后在该新数组上，基本上使用

数组.prototype.filter（）

函数，并根据每个元素的索引是它将成为的索引的条件过滤元素，然后在其上调用

Array.prototype.sort（）

函数。然后将整个结果存储到类实例的

categories

属性中

this.products = data;
this.categories = data.map(p => p.category).filter((c, index, array) => array.indexOf(c) == index).sort();

最后，由于启用了“严格”模式，下面的代码也引发了一个错误：

return this.products.find(p => p.id == id);

并回答以下问题：

在JavaScript中，我将生成一个空字符串：var myString='' TypeScript为什么要将字符串设为null？字符串和null不是吗 不同类型

字符串是引用类型，因此您可以为其分配null。老实说，JS或TS都是如此。无法分配null的原因再次是因为严格模式。如果您曾经启用严格模式，但仍然希望分配null或未定义的值作为初始值，则可以使用非null断言运算符

！

如下所示：

private categories: string[] = []!;

const myString: string = null!;

TLDR：

• 了解
• 接下来，使用与课本相同的编译器设置
• 请一次发布一个问题

严格的空检查

比较：

var x: string | undefined;
var y: string = x;

console.log(y);

• 在禁用严格空检查的情况下，它编译并打印未定义的内容
• 带着严厉的怒火

  Type 'string | undefined' is not assignable to type 'string'. 
  Type 'undefined' is not assignable to type 'string'.
  

  public category?: string
  

  this.categories = 
    data.map(p => p.category)       // this is (string | undefined)[]
        .filter((c, index, array) => array.indexOf(c) == index)
        .sort();
  

  getProducts(category: string = null): Product[] {
  }
  // Type 'null' is not assignable to type 'string'.
  

  return this.products.find(p => p.id == id);
  // Type 'Product | undefined' is not assignable to type 'Product'.
  //  Type 'undefined' is not assignable to type 'Product'.
  

  Type 'Product | undefined' is not assignable to type 'Product'.
    Type 'undefined' is not assignable to type 'Product'.
  

  return this.products.find(p => p.id == id);
  

  Type 'null' is not assignable to type 'string'.
  

  getProducts(category: string = null): Product[] {
  

  getProducts(category: string | null = null): Product[] {