Type 'ArrayBufferView' is not assignable to type 'DataView'

[mhart]

TypeScript Version: Nightly

Search Terms:

ArrayBufferView

Expected behavior:

According to MDN, ArrayBufferView is one of these types:

• Int8Array,
• Uint8Array,
• Uint8ClampedArray,
• Int16Array,
• Uint16Array,
• Int32Array,
• Uint32Array,
• Float32Array,
• Float64Array or
• DataView.

However, in lib.es5.d.ts it's just an interface.

This would be fine if it were used consistently, but it appears that it's used in some places (eg BodyInit) but then in others the actual types from above are listed (eg crypto.subtle.digest). This means, for example, that going from BodyInit to crypto.subtle.digest (while filtering out incompatible types) is impossible.

According to these links:

1. https://developer.mozilla.org/en-US/docs/Web/API/Request/Request#Syntax
2. https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest#Syntax

This code should compile:

function bodyHash(body: BodyInit) {
    if (typeof body === 'string' ||
        body instanceof Blob ||
        body instanceof FormData ||
        body instanceof URLSearchParams ||
        body instanceof ReadableStream) {
            throw new Error('Only ArrayBuffer or ArrayBufferView allowed')
    }
    // error 2345: Type 'ArrayBufferView' is not assignable to type 'DataView'
    let result = crypto.subtle.digest('SHA-256', body)
}

Actual behavior:

Code fails to compile with type errors

Related Issues:

Possibly #15402

Code

// https://developer.mozilla.org/en-US/docs/Web/API/ArrayBufferView
type ActualArrayBufferView = Int8Array | Uint8Array | Uint8ClampedArray | Int16Array | Uint16Array | Int32Array | Uint32Array | Float32Array | Float64Array | DataView

function actual(arr: ActualArrayBufferView) {
    // https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest#Syntax
    // works as it should with no error
    let result = crypto.subtle.digest('SHA-256', arr)
}

function builtin(arr: ArrayBufferView) {
    // error 2345: Type 'ArrayBufferView' is missing the following properties from type 'DataView': getFloat32, getFloat64, getInt8, getInt16, and 13 more
    actual(arr)

    // error 2345: Type 'ArrayBufferView' is not assignable to type 'DataView'
    let result = crypto.subtle.digest('SHA-256', arr)
}

// Real-world example
function bodyHash(body: BodyInit) {
    if (typeof body === 'string' ||
        body instanceof Blob ||
        body instanceof FormData ||
        body instanceof URLSearchParams ||
        body instanceof ReadableStream) {
            throw new Error('Only ArrayBuffer or ArrayBufferView allowed')
    }
    // error 2345: Type 'ArrayBufferView' is not assignable to type 'DataView'
    let result = crypto.subtle.digest('SHA-256', body)
}

Output

"use strict";
function actual(arr) {
    // https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest#Syntax
    // works as it should with no error
    let result = crypto.subtle.digest('SHA-256', arr);
}
function builtin(arr) {
    // error 2345: Type 'ArrayBufferView' is missing the following properties from type 'DataView': getFloat32, getFloat64, getInt8, getInt16, and 13 more
    actual(arr);
    // error 2345: Type 'ArrayBufferView' is not assignable to type 'DataView'
    let result = crypto.subtle.digest('SHA-256', arr);
}
// Real-world example
function bodyHash(body) {
    if (typeof body === 'string' ||
        body instanceof Blob ||
        body instanceof FormData ||
        body instanceof URLSearchParams ||
        body instanceof ReadableStream) {
        throw new Error('Only ArrayBuffer or ArrayBufferView allowed');
    }
    // error 2345: Type 'ArrayBufferView' is not assignable to type 'DataView'
    let result = crypto.subtle.digest('SHA-256', body);
}

Compiler Options

{
  "compilerOptions": {
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "strictBindCallApply": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "useDefineForClassFields": false,
    "alwaysStrict": true,
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "downlevelIteration": false,
    "noEmitHelpers": false,
    "noLib": false,
    "noStrictGenericChecks": false,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "esModuleInterop": true,
    "preserveConstEnums": false,
    "removeComments": false,
    "skipLibCheck": false,
    "checkJs": false,
    "allowJs": false,
    "declaration": true,
    "experimentalDecorators": false,
    "emitDecoratorMetadata": false,
    "target": "ES2017",
    "module": "ESNext"
  }
}

Playground Link: Provided

[mazerab]

Hello, I am running into this exact issue and was wondering if there is any workaround one could apply. Thank you, Bastien

[jakebailey]

This was fixed in #44684, and is in TS 4.4+.