javascripttypescriptreact-nativereact-native-sqlite-storageexpo-sqlite

RN: Class static side 'typeof *' incorrectly extends base class static side 'typeof BaseModel


In react native, I'm extending an ORM class (according to its documentation) but I'm getting following error in VSCode TypeScript checker:

Class static side 'typeof Animal' incorrectly extends base class static side 'typeof BaseModel'.
  Types of property 'database' are incompatible.
    Type '() => Promise<SQLite.WebSQLDatabase>' is not assignable to type 'void'.ts(2417)

In the end it actually works, but I would like to know if there's a way how to define it more properly or more loose so such checker error is not generated.
The ORM module is just JS (not TypeScript) EDIT: and it's 3rd party, so I can't really edit it

This is the parent class method in BaseModel:

  static get database() {
    throw new Error('DB not defined')
  }

This is the extending method of Animal model:

  static get database() {
    return async () => SQLite.openDatabase('database.db')
  }

Solution

  • Typescript infers BaseModel's database getter to be of type void. This is because you neither return a value, nor do you have an explicit type on that getter. Then Animal tries to extend that, and it returns an async function, which is not void, and you get the type error.

    The correct fix here is to properly type the BaseModel.database return value. In this case, I believe it should return an async function, which returns a promise, which wraps your database object.

    class BaseModel {
      static get database(): () => Promise<MyDb> {
        throw new Error('DB not defined')
      }
    }
    

    Now Animal works without type errors:

    class Animal extends BaseModel {
      static get database() {
        return async () => SQLite.openDatabase('database.db')
      }
    }
    
    

    And you can get a db reference:

    const db = await Animal.database()
    

    Playground


    If different subclasses would return different databases with different interfaces, then you can instead let the subclasses define that return type:

    class BaseModel {
      static get database(): () => Promise<unknown> { // unknown here
        throw new Error('DB not defined')
      }
    }
    

    Playground