hybrids: Using "store([Model])" causes a TypeScript error

import { Model, define, store } from "https://esm.sh/hybrids@8.2.11"

export interface IModel {
    prop1: number
}

export const ModelStore: Model<IModel> = {
    id: true,
    prop1: 1
}

export interface IComponent extends HTMLElement {
    models: IModel[]
}

export default define<IComponent>({
    tag: "a-component",
    models: store([ModelStore]),
})

image

message:

Argument of type 'Model<IModel>[]' is not assignable to parameter of type 'Model<IModel[]>'.
  Type 'Model<IModel>[]' is not assignable to type '{ [x: number]: Model<IModel> | ((model: IModel[]) => IModel); [Symbol.iterator]: Model<() => IterableIterator<IModel>> | ((model: IModel[]) => () => IterableIterator<...>); ... 32 more ...; flat: Model<...> | ((model: IModel[]) => <A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<...>[]); }'.
    Types of property '[Symbol.unscopables]' are incompatible.
      Type '{ [x: number]: boolean | undefined; length?: boolean | undefined; toString?: boolean | undefined; toLocaleString?: boolean | undefined; pop?: boolean | undefined; push?: boolean | undefined; ... 28 more ...; readonly [Symbol.unscopables]?: boolean | undefined; }' is not assignable to type 'Model<{ [x: number]: boolean | undefined; length?: boolean | undefined; toString?: boolean | undefined; toLocaleString?: boolean | undefined; pop?: boolean | undefined; push?: boolean | undefined; ... 28 more ...; readonly [Symbol.unscopables]?: boolean | undefined; }> | ((model: IModel[]) => { ...; })'.
        Type '{ [x: number]: boolean | undefined; length?: boolean | undefined; toString?: boolean | undefined; toLocaleString?: boolean | undefined; pop?: boolean | undefined; push?: boolean | undefined; ... 28 more ...; readonly [Symbol.unscopables]?: boolean | undefined; }' is not assignable to type 'Model<{ [x: number]: boolean | undefined; length?: boolean | undefined; toString?: boolean | undefined; toLocaleString?: boolean | undefined; pop?: boolean | undefined; push?: boolean | undefined; ... 28 more ...; readonly [Symbol.unscopables]?: boolean | undefined; }>'.
          Types of property 'toString' are incompatible.
            Type 'boolean | undefined' is not assignable to type '(boolean | ((model: { [x: number]: boolean | undefined; length?: boolean | undefined; toString?: boolean | undefined; toLocaleString?: boolean | undefined; pop?: boolean | undefined; ... 29 more ...; readonly [Symbol.unscopables]?: boolean | undefined; }) => boolean | undefined) | undefined) & (() => string)'.
              Type 'undefined' is not assignable to type '(boolean | ((model: { [x: number]: boolean | undefined; length?: boolean | undefined; toString?: boolean | undefined; toLocaleString?: boolean | undefined; pop?: boolean | undefined; ... 29 more ...; readonly [Symbol.unscopables]?: boolean | undefined; }) => boolean | undefined) | undefined) & (() => string)'. ts(2345)

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "strict": true,
    "baseUrl": "./web",
    "paths": {
      // "/" is not "C:/", but is "./web"
      "/*": [ "*" ],
      // from module to their declaration
      "/modules/fingerprintjsv3.js": ["../node_modules/@fingerprintjs/fingerprintjs/dist/fp"],
      "https://esm.sh/mitt@3.0.1": ["../node_modules/mitt/index"],
      "https://esm.sh/just-intersect@4.3.0": [ "../node_modules/just-intersect/index" ],
      "https://esm.sh/bootstrap@5.3.2": ["../node_modules/@types/bootstrap/index"],
      "https://esm.sh/hybrids@8.2.11": ["@types/hybrids"],
      "https://esm.sh/colorjs.io@0.4.5": ["../node_modules/colorjs.io/types/src/index"],
      "https://esm.sh/ts-debounce@4.0.0": ["../node_modules/ts-debounce/dist/src/index"],
      "https://esm.sh/mezr@1.1.0": ["../node_modules/mezr/dist/esm/index"]
    },
    "skipLibCheck": true
  },
  "include": [ "./web" ]
}

typescript version: “5.1.6”

About this issue

  • Original URL
  • State: closed
  • Created 3 months ago
  • Comments: 18 (18 by maintainers)

Most upvoted comments

Problem solved.

I also sent to PR a version of the store() function, protected from passing arguments like store([SingletonStore]).

commit: https://github.com/hybridsjs/hybrids/commit/64777f5e1afbdd58d28767a0b6ef7dc227c121dc

I looked in other node modules:

They all have the following content in package.json:

{
    ...
    "main": "",
    "types": "index.d.ts",
    "repository": {
        "type": "git",
        "url": "https://github.com/DefinitelyTyped/DefinitelyTyped.git",
        "directory": "types/bootstrap"
    },
    "typesPublisherContentHash": "c92ed4379251cc173e28be43e85f18041aa3e6ec2cd0d7b66e800b0f8a0b36a8",
    "typeScriptVersion": "4.5"
}

I don’t know how it works, but most likely something similar is described in DefinitelyTyped documentation.