README.md

Examples for mobx-state-tree + TypeScript article

bad.d.ts

import { IModelType, _NotCustomized, ISimpleType } from "mobx-state-tree";
export declare const ModelA: IModelType<{
    foo: ISimpleType<string>;
}, {}, _NotCustomized, _NotCustomized>;
export declare const ModelB: IModelType<{
    /**
     * Duplication here!
     */
    a: IModelType<{
        foo: ISimpleType<string>;
    }, {}, _NotCustomized, _NotCustomized>;
}, {}, _NotCustomized, _NotCustomized>;

bad.ts

import {
    types as t,
    IModelType,
    Instance,
    _NotCustomized,
    ISimpleType
} from "mobx-state-tree";

export const ModelA = t.model({
    foo: t.string
});

export const ModelB = t.model({
    /**
     * Duplication here!
     */
    a: ModelA
});

good.d.ts

import { IModelType, Instance, _NotCustomized, ISimpleType } from "mobx-state-tree";
declare const ModelAInferred: IModelType<{
    foo: ISimpleType<string>;
}, {}, _NotCustomized, _NotCustomized>;
declare type DirectExtendHelper<T> = T;
/**
 * Here we name ModelAInferred inferred type information
 */
interface ModelAFactoryType extends DirectExtendHelper<typeof ModelAInferred> {
}
/**
 * We mask ModelAInferred behind it's named type information
 */
export declare const ModelA: ModelAFactoryType;
declare const ModelBInferred: IModelType<{
    /**
     * No Duplication here!
     */
    a: ModelAFactoryType;
}, {}, _NotCustomized, _NotCustomized>;
/**
 * Here we name ModelBInferred inferred type information
 */
interface ModelBFactoryType extends DirectExtendHelper<typeof ModelBInferred> {
}
/**
 * We mask ModelBInferred behind it's named type information
 */
export declare const ModelB: ModelBFactoryType;
/**
 * Bonus: export also model instance interfaces, made out of the named interfaces!
 */
export interface ModelAInstance extends Instance<ModelAFactoryType> {
}
export interface ModelBInstance extends Instance<ModelBFactoryType> {
}
export {};

good.ts

import {
    types as t,
    IModelType,
    Instance,
    _NotCustomized,
    ISimpleType
} from "mobx-state-tree";

const ModelAInferred = t.model({
    foo: t.string
});

type DirectExtendHelper<T> = T;

/**
 * Here we name ModelAInferred inferred type information
 */
interface ModelAFactoryType extends DirectExtendHelper<typeof ModelAInferred> {}

/**
 * We mask ModelAInferred behind it's named type information 
 */
export const ModelA: ModelAFactoryType = ModelAInferred;

const ModelBInferred = t.model({
    /**
     * No Duplication here!
     */
    a: ModelA
});

/**
 * Here we name ModelBInferred inferred type information
 */
interface ModelBFactoryType extends DirectExtendHelper<typeof ModelBInferred> {}

/**
 * We mask ModelBInferred behind it's named type information 
 */
export const ModelB: ModelBFactoryType = ModelBInferred;

/**
 * Bonus: export also model instance interfaces, made out of the named interfaces!
 */
export interface ModelAInstance extends Instance<ModelAFactoryType> {}
export interface ModelBInstance extends Instance<ModelBFactoryType> {}

package.json

{
  "name": "mst-ts-thing",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Bnaya Peretz",
  "license": "MIT",
  "dependencies": {
    "mobx-state-tree": "^3.17.2",
    "typescript": "^3.9.7"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "commonjs",
    "lib": ["ESNext"],
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "declaration": true,
    "emitDeclarationOnly": true,
    "types": []
  },
  "exclude": ["*.d.ts"]
}