账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    typescript 泛型约束的问题
    69
    0
    type Resource<T extends HTMLAudioElement | HTMLImageElement> = { id: string resource: T}function resourceLoad<T extends HTMLAudioElement | HTMLImageElement>( id: string, path: string, type: "img" | "audio"): Promise<Resource<T>> { return new Promise((resolove, reject) => { let resource:T if (type == "audio") { resource = new Audio(path) resource.oncanplaythrough = () => { resolove({ id, resource:resource as HTMLAudioElement}) } } else { resource = new window.Image() resource.src = path resource.onload = () => { resolove({ id, resource :resource as HTMLImageElement}) } } resource.onerror = () => { reject(`load resource:"${id}"fail.\npath:${path}`) } })}问题是在resource = new Audio(path) 这一部分会提示以下resource 错误,Type 'HTMLAudioElement' is not assignable to type 'T'.'HTMLAudioElement' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint 'HTMLAudioElement | HTMLImageElement'.ts(2322)实现功能大概就是传入type = 'img' 返回 HTMLImageElement ,传入 type = 'audio' 返回 HTMLAudioElement。如何让他取消错误提示?目前用起来提示是正常的。
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 喪风 普通会员 1楼

      在 TypeScript 中,泛型约束是一种类型检查机制,用于确保类型参数在编译时已经被正确地使用。当定义泛型类型时,你需要提供一个或多个类型参数,并使用 类型参数约束 关键字来指定这些类型参数的类型范围。

      以下是一个基本的 TypeScript 泛型约束示例:

      ```typescript function printNumber(number: T): void { console.log(number); }

      let num1: number = 10; let num2: number = 20; let num3: number = 30;

      printNumber // 输出:10 printNumber // 输出:20 printNumber // 输出:30 ```

      在这个示例中,我们定义了一个名为 printNumber 的函数,该函数接受一个 T 类型参数。T 是一个或多个可能的类型参数,它们可以是整数、浮点数或其他任何类型。在函数定义时,我们使用了 typeof 关键字来获取每个类型参数的类型,然后使用 typeof 关键字来获取参数 number 的类型。然后,我们使用 type 关键字来创建一个类型约束,它指定 number 类型参数的类型范围为 number

      例如,如果我们有以下的类型参数列表:

      ```typescript function printNumber(number: T): void { console.log(number); }

      let num1: number = 10; let num2: number = "10"; let num3: number = 30; ```

      那么编译器会抛出一个错误,因为 typeof 返回的是字符串 'number',而不是整数类型 number

      typescript printNumber<num1> // TypeScript Error: Argument of type 'string' is not assignable to parameter of type 'number'.

      为了解决这个问题,我们可以在泛型函数定义时使用 as 关键字来指定参数 number 的类型。例如:

      ```typescript function printNumber(number: T): void { console.log(number); }

      let num1: number = 10; let num2: string = "10"; let num3: number = 30;

      printNumber(num1) // 输出:10 printNumber(num2) // 输出:10 printNumber(num3) // 输出:30 ```

      在这个示例中,我们使用了 as 关键字将 number 类型参数的类型转换为 number 类型。这使得编译器可以正确地处理参数 number 的类型,从而避免了 TypeScript Error

      注意,as 关键字用于强制类型转换,但它不是类型约束,而是类型解析器的默认行为。这意味着如果泛型函数接受的参数是有效的类型,但不是预期的类型,类型解析器会将参数转换为预期的类型。例如:

      ```typescript function printNumber(number: T): void { console.log(number); }

      let num1: number = 10; let num2: string = "10"; let num3: number = 30;

      printNumber(num1 as number) // 输出:10 ```

      在这个示例中,我们使用了 as number 关键字将 number 类型参数转换为 number 类型,但同时在调用函数时也使用了 as number 关键字。这使得编译器无法解析 number 类型参数,从而抛出 TypeScript Error

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部