Help us improve 🍉's TypeScript support

[radex]

0.25 came with a huge improvement in the quality and maintainability of 🍉's TypeScript types. There were some teething problems, requiring a few patch releases, and no doubt the increased type coverage revealed new TS errors that weren't there before.

Anyway, thanks a lot to @sidferreira @paulrostorp @enahum @mlecoq for their contributions

You can help. Here's a few TS maintenance items that need to be done:

• hook up prettier to run over .d.ts
• in package.json there are outdated TS-related dependencies… I'm not even sure that all of them should be there, given that much of the TS checking lives in examples/typescript
• remove // @flow comments from d.ts's
• there's tslint, but I don't think it's hooked up to run anywhere? shouldn't it be a part of yarn ci:check ?
• add usage of more 🍉 APIs to examples/typescript to test type-checking
• add typescript types to documentation

[lucaswitch]

Hello @radex, i just added some Typescript support on the Setup docs website section.
Can i continue or we need to change something?

[radex]

@lucaswitch PR?

[lucaswitch]

Just added the PR #1636

[dexter-stpierre]

Hoping to find time to contribute some types for this soon. FWIW I thought I'd let you know that tslint was deprecated in 2020. From what I can tell the eslint settings should handle linting the .ts files, but I can confirm when I find time to contribute to the types https://www.npmjs.com/package/tslint

[BrunnerLivio]

I created a little wrapper around the tableSchema function to make the column names & table name types secure and synched with the model.

import {Model, tableSchema} from '@nozbe/watermelondb'

type TableSchema = Parameters<typeof tableSchema>[0]
type Column = TableSchema['columns'][number]

type WatermelonModelFields = keyof Model
type Class<TModel extends typeof Model> = TModel extends {
  new (...args: any[]): infer U
}
  ? U
  : never

/**
 * Removes all fields that are inherited from the Watermelon Model class
 */
type ModelFieldNames<TModel extends Model> = Exclude<
  keyof TModel,
  WatermelonModelFields
>

export type ModelSchema<TModel extends typeof Model> = TableSchema & {
  name: TModel['table']
  columns: (Column & {
    name: ModelFieldNames<Class<TModel>> extends never
      ? string
      : ModelFieldNames<Class<TModel>>
  })[]
}

export const tableSchemaTypesecure = <
  TModel extends typeof Model = typeof Model,
>(
  arg0: ModelSchema<TModel>
) => tableSchema(arg0)

Usage:

class UserModel extends Model {
  // Needs to be `readonly` so that the type can be inferred
  static readonly table = 'users'

  @field('name') name!: string
}

const userSchema = tableSchemaTypesecure<typeof UserModel>({
  name: 'users',
  columns: [{name: 'name', type: 'string'}],
})

If you're interested I'll gladly try to make this work upstream & create a PR :)

Though there are better ways to solve this problem -- this would just be a simple way to provide typescurity without introducing a breaking change.

[tg44]

Can we get a better typed DirtyRaw based on the schema?
My usecase is that I have a typed api from the server (supabase generated), and I want to check if the typed api and the schema type def is compatible or not.
something like;

const plants = changes['plants'] //here I should know that the DirtyRaw is something like FromSchema<plantsSchema>
const plantPromises = await supabase.from("plants").upsert(plants.updated) //so here I can typecheck

[radex]

@tg44 DirtyRaw would not be the place to do it - it is a type alias for an "unknown (type-not-known) object" by design. What you'd want to do is have RawRecord be optionally strongly typed. Not trivial to do, since you don't want to break existing apps that don't have a typed api generated. Feel free to email me - [email protected] - if you want to talk more about this.

[sidferreira]

@radex I miss collaborating with you guys! Sadly I don't have any projects with it anymore...

[sidferreira]

@tg44 @radex I wonder if it is possible to have something like:

type DirtyRaw<T = Model> = {keyof Model}

I don't remember 100% what the DirtyRaw holds

[radex]

@sidferreira heh, great to see you in this thread :)

keyof Model would not work since Model class's properties generally don't match the raw representation (table column names). But optionally typing a Model, something to the effect of class Post extends Model<RawPost> where RawPost is the type of raw representation (whether hand-defined or auto-generated) could work. This could propagate to other types roughly like so: RawRecord<U, T: Model<U>> = U. But it would be important to set defaults so that this is not forced on all users of the library, as generally typed raw records are cumbersome and not needed (though it makes sense in @tg44's case). And ideally such a change should not be a breaking change, or would require only minimal changes to users who opt out of this.

[sidferreira]

I'll try to set up something this week to see if I have any insights!

And indeed, we need to make it backwards compatible!

[tg44]

For me it would be enough for now, if we could get the "raw type" representation from a schema, and I could use an as keyword.

[sidferreira]

@radex @tg44 just to be sure, what exactly we expect in this DirtyRaw?

I'm using the examples with Post, and I'm curious how we should display the blogId

[tg44]

So, for me, in this case, I don't mind if the DirtyRaw is not typed properly end to end. What I would like to get the type from the schema definition. We have a "db type" and a "model type", and we usually don't need the db type in our code, but it would be nice if we could derive it from the schema anyways. One example is to make the sync more typed. If I can "cast" the DirtyRaw to the right db type thats a good step ahead.

This is why I asked if we have a method/helper/anything that can derive the Raw type from a schema?

[sidferreira]

@tg44 🤔 I feel like I'm missing a detail... It seems to be way simpler than what I had in mind, but I still can't see the use.

tableSchema({
  name: TableName.POSTS,
  columns: [
    { name: 'title', type: 'string' },
    { name: 'body', type: 'string' },
    { name: 'blog_id', type: 'string', isIndexed: true },
    { name: 'is_nasty', type: 'boolean' },
  ],
})

The "DirtyRaw" would be:

type DirtyRawPosts = {
  title: string
  body: string
  blog_id: string
  is_nasty: string
}

is that it?

[tg44]

@sidferreira yeah, but can we auto derive the DirtyRawPost type from the table schema?

[sidferreira]

@tg44 I guess we can infer in a very crazy way, but not sure

[tg44]

I'm not saying that it is bullet proof, and I have no idea how it will handle relations EDIT: I fixed the relations so it works for my cases, but my WIP first version is;

import {Model, tableSchema} from '@nozbe/watermelondb'
import {date, nochange, readonly, text} from "@nozbe/watermelondb/decorators";

type TableSchema = Parameters<typeof tableSchema>[0]
type Column = TableSchema['columns'][number]

type WatermelonModelFields = keyof Model
type Class<TModel extends typeof Model> = TModel extends {
        new (...args: any[]): infer U
    }
    ? U
    : never

/**
 * Removes all fields that are inherited from the Watermelon Model class
 */
type ModelFieldNames<TModel extends Model> = Exclude<
    keyof TModel,
    WatermelonModelFields
>

type CamelToSnakeCase<S extends string> =
    S extends `${infer T}${infer U}` ? `${T extends Capitalize<T> ? '_' : ''}${Lowercase<T>}${CamelToSnakeCase<U>}` : S;

type CamelToSnakeObject<T> = {
    [K in keyof T as CamelToSnakeCase<Extract<K, string>>]: T[K];
};
type CamelToSnakeUnion<T> = T extends string ? CamelToSnakeCase<T> : never;

export type ModelSchema<TModel extends typeof Model> = TableSchema & {
    name: TModel['table']
    columns: (Column & {
        name: ModelFieldNames<Class<TModel>> extends never
            ? string
            : CamelToSnakeUnion<ModelFieldNames<Class<TModel>>>
    })[]
}

export const tableSchemaTypesecure = <
    TModel extends typeof Model = typeof Model,
>(
    arg0: ModelSchema<TModel>
) => tableSchema(arg0)

export type RawRecordTyped<TModel extends typeof Model> = {id: string} & {
    [K in ModelFieldNames<Class<TModel>> as Class<TModel>[K] extends Model ? `${CamelToSnakeCase<Extract<K, string>>}_id` : CamelToSnakeCase<Extract<K, string>>]: Class<TModel>[K] extends Date
        ? number
        : Class<TModel>[K] extends string
        ? string
        : Class<TModel>[K] extends boolean
        ? boolean
        : Class<TModel>[K] extends number
        ? number
        : Class<TModel>[K] extends Model
        ? string
        : Class<TModel>[K] extends Model[]
        ? never //we don't add the Model[] to the raw record
        : never
}

//example usages;
export default class Icon extends Model {
    static table = 'icons'

    @nochange @text('name') name!: string;
    @nochange @text('svg') svg!: string;
    @nochange @readonly @date("created_at") createdAt!: Date;
    @nochange @readonly @date("updated_at") updatedAt!: Date;
}

export const iconsSchema = tableSchemaTypesecure<typeof Icon>({
    name: 'icons',
    columns: [
        { name: 'name', type: 'string', isIndexed: true },
        { name: 'svg', type: 'string' },
        { name: 'created_at', type: 'number' },
        { name: 'updated_at', type: 'number' },
    ]
});

const func = async (changes: SyncDatabaseChangeSet) => {
  const icons = changes['icons'].updated as RawRecordTyped<typeof Icon>[]
  const iconPromises = await supabase.from("icons").upsert(icons)
}