Type ‘string | string[]‘ is not assignable to type ‘string | undefined‘.

在我用react + typescript写项目的时候，ts总会报一些类型的错误，比如下图的错误：Type ‘string | string[]’ is not assignable to type ‘string | undefined’.

在我确定我的类型是正确的情况下不理解为啥报这样一个错，在网上找了很久，就是加类型断言，解决方法如下图：（值 as 类型）

这样就不会报错拉。
关于typescript类型断言，整理知识点如下：

typescript很强大，但是用不好时也会很头痛，开发遇到类型错误的情况不在少数，或许你需要了解类型断言。使用断言，简单来说就是先做好一个假设，使得编译通过。

我一开始接触类型断言时是有点不明白的，后来我了解到原因是 “类型断言更像是类型的选择，而不是类型转换”。我发现不少博客文章里把类型断言说成了类型转换，这在最开始给我带来了一些困扰。

使用类型断言有两种方式：

<类型>值

// 或者

值 as 类型

推荐以 as 方式，因为 jsx 这样的语法中只支持 as 方式。
举例：

function func(val: string | number): number {
  if (val.length) {
    return val.length
  } else {
    return val.toString().length
  }
}

函数的参数 val 是一个联合类型，在这里的意思是说 val 可以是字符串类型也可以是数值类型。代码中要返回参数的长度，但是 length 可以是字符串的属性，而数值是没有这个属性的，所以当 val 是数值时，就先用 toSting() 来将数字转换为字符串再取长度。这样的逻辑本身没问题，但是在编译阶段一访问 val.length 时就报错了，因为 访问联合类型值的属性时，这个属性必须是所有可能类型的共有属性，而length不是共有属性，val 的类型此时也没确定，所以编译不通过。为了通过编译，此时就可以使用类型断言了，如下：

function func(val: string | number): number {
  if ((<string>val).length) {
    return (<string>val).length
  } else {
    return val.toString().length
  }
}

或者

function func(val: string | number): number {
  if ((val as string).length) {
    return (val as string).length
  } else {
    return val.toString().length
  }
}

例子中，把 val 断言为了 string类型，此时就可以访问 length 属性了。你可能会疑惑如果 val 断言为了string，那么开始定义的联合类型是不是失去了它的意义？答案是否定的。我在一开始就说了类型断言不是类型转换，而是类型选择，可以理解为在编译阶段强行把 val 当作 string类型来访问了。