Ways to resolve TypeScript error(ts:2740) similar to this

Question

Ways to resolve TypeScript error(ts:2740) similar to this

Apologies, I require a translator for English. Please provide the code in your response. Thank you.

// [message]: Type 'Promise<unknown>' is missing the following properties from type 'IDBDatabase': name, objectStoreNames, onabort, onclose, and 10 more.ts(2740)

const /*[message] here("IDB") -->*/ IDB: IDBDatabase | null = (async () => {
    return (await new Promise((resolve, reject) => {
        const request = indexedDB.open("idb")
        request.onerror = (event) => {
            resolve(null)
        }
        request.onupgradeneeded = (event) => {
            resolve(null)
        }
        request.onsuccess = (event) => {
            resolve(request.result as IDBDatabase)
        }
        request.onblocked = () => {
            resolve(null)
        }
    }))
})()

typescript

Answer 1

Answer №1

You seem to have some async function misuse. The async function you are using returns a

Promise<IDBDatabase | null>

, meaning you cannot assign it directly to IDBDatabase | null

When the promise resolves, there are 2 ways you can execute your code:

Using await in an async function
Utilizing then on the promise for providing a callback

function getDBPromise(): Promise<IDBDatabase|null> {
  return new Promise((resolve, reject) => {
        const request = indexedDB.open("idb")
        request.onerror = (event) => {
            resolve(null)
        }
        request.onupgradeneeded = (event) => {
            resolve(null)
        }
        request.onsuccess = (event) => {
            resolve(request.result as IDBDatabase)
        }
        request.onblocked = () => {
            resolve(null)
        }
    })
}

async function awaitInAsyncFunction() {
    const IDB: IDBDatabase | null = await getDBPromise();
}


getDBPromise().then((db) => {
    const IDB: IDBDatabase | null = db;
})

Answer 2

You seem to have some async function misuse. The async function you are using returns a

Promise<IDBDatabase | null>

, meaning you cannot assign it directly to IDBDatabase | null

When the promise resolves, there are 2 ways you can execute your code:

Using await in an async function
Utilizing then on the promise for providing a callback

function getDBPromise(): Promise<IDBDatabase|null> {
  return new Promise((resolve, reject) => {
        const request = indexedDB.open("idb")
        request.onerror = (event) => {
            resolve(null)
        }
        request.onupgradeneeded = (event) => {
            resolve(null)
        }
        request.onsuccess = (event) => {
            resolve(request.result as IDBDatabase)
        }
        request.onblocked = () => {
            resolve(null)
        }
    })
}

async function awaitInAsyncFunction() {
    const IDB: IDBDatabase | null = await getDBPromise();
}


getDBPromise().then((db) => {
    const IDB: IDBDatabase | null = db;
})

Ways to resolve TypeScript error(ts:2740) similar to this

Answer №1

Similar questions

Is there a way to properly test a Vue component that is watching a ref prop?

Error: The next.config.js file contains invalid options - The root value includes an unexpected property

This TypeScript error indicates that the variable may be undefined (Error code: 18048)

Guide on updating a value in a Firestore document using Firebase

Is there a way to assign a function signature to every property within a class in typescript?

Encountering a 405 error when making an OpenAI API call with next.js, typescript, and tailwind CSS

Utilize an enum to serve as a blueprint for generating a fresh object?

How can an Angular 4 HTML for loop display a loosely typed object (string) normally but behave differently when the element is extracted directly?

Import statement cannot be used except within a module

The database migration encounters an issue: The module 'typeorm' cannot be located

Adjust the column count in mat-grid-list upon the initial loading of the component

Unable to remove a OneToMany entry in TypeORM

Implementing ExpressJS functionality within a TypeScript class

Converting a JSON string into an ES6 map or another data structure in JavaScript in order to maintain the order of keys

Clearing the Value of a Linked Ant Design Cascading Dropdown Select in Next.js/React.js

In the en-US locale, the toLocaleDateString function is transforming "00:30" into 24:30

Tips for troubleshooting TypeScript Express application in Visual Studio Code

What steps can I take to resend a fetch request in React.js if I receive a 408 or 503 error?

Exploring the world of Typescript and Angular Filter functionalities

Creating a JSON array or JSON object from an Angular Material table