类型“未知”不可分配给类型“字符串”答案

【问题标题】：Type 'unknown' is not assignable to type 'string'类型“未知”不可分配给类型“字符串”
【发布时间】：2021-10-19 17:57:12
【问题描述】：

这里我设置了函数toBase64()

export function toBase64(file:File) {
   
    return new Promise((resolve,reject)=>{
        

        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload=()=> resolve(reader.result);
        reader.onerror=(error) =>reject(error);
    })

它表明reader.result的类型是 string | ArrayBuffer | null，但是，当我需要使用响应时。

export class InputImgComponent implements OnInit {

  constructor() { }
  imageBase64!:string;
  @Output()
  onImageSelected = new EventEmitter<File>();


  ngOnInit(): void {
  }
  change(event:any){
    if(event.target.files.length>0) {
      const file:File= event.target.files[0];
      toBase64(file).then((value)=>this.imageBase64=value ); 
    }

它表示result type is unknown，我将imageBase64 设置为字符串Type 'unknown' is not assignable to type 'string'。

真是奇怪，怎么解决这个问题，我只需要字符串结果。

【问题讨论】：

你应该给toBase64一个返回类型注解

标签： angular typescript promise

【解决方案1】：

你没有指定你的函数返回的Promise的类型，所以它默认为Promise<unknown>。 Promise 是泛型类型，因此字符串的承诺是 Promise<string>。

您可以在 Promise 的构造函数上注释 this，也可以在函数的返回类型上注释它，Typescript 会为您推断它。

export function toBase64(file:File) {
    return new Promise<string>((resolve,reject) => {
        const reader = new FileReader();
        // the docs say that result should always be a string, but double-check for future-proofing
        reader.onload = (ev) => typeof reader.result === "string" ? resolve(reader.result) : reject("Unexpected type received from FileReader");
        reader.onerror = (error) => reject(error);
        reader.readAsDataURL(file);
    })
}

【讨论】：

【解决方案2】：

您需要在 lambda 回调中使用类型断言来指定 value 的类型。目前默认为unknown。

((value:string) => this.imageBase64=value)

【讨论】：

这个答案没有解决问题的根源，即toBase64的返回类型不正确（Promise<unknown>）。