调用toBase64赋值时报Type 'unknown'无法分配给string类型如何解决

1. 自定义toBase64函数未给返回的Promise指定泛型，TypeScript无法推断返回值类型，默认识别为Promise<unknown>，是触发unknown 类型不能赋值给 string报错的直接原因
2. reader.result本身的类型为string | ArrayBuffer | null，TypeScript不知道你调用readAsDataURL时返回结果一定为字符串，需要额外做类型声明处理

方案一（最推荐，从函数源头固定返回类型） #

直接修改toBase64函数的类型定义，明确返回值为Promise<string>，同时对已知类型的reader.result做类型断言：

export function toBase64(file:File): Promise<string> {
    return new Promise((resolve,reject)=>{
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload=()=> resolve(reader.result as string);
        reader.onerror=(error) =>reject(error);
    })
}

修改后原有组件的调用代码无需任何调整，即可通过TypeScript类型校验。

方案二（无需修改原函数，调用侧处理） #

如果不想改动原toBase64函数的定义，可在调用时对返回值做类型断言：

toBase64(file).then((value)=>this.imageBase64=value as string ); 

方案三（最严谨，增加类型守卫兼容异常情况） #

如果需要覆盖所有可能的返回类型场景，可增加类型守卫做判断处理：

toBase64(file).then((value)=>{
  if (typeof value === 'string') {
    this.imageBase64 = value
  } else {
    // 自定义异常处理逻辑，例如抛错、赋值默认空字符串
    throw new Error('base64转换结果非字符串类型')
  }
})

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