{"id":20050091,"url":"https://github.com/mithriljs/mithril.d.ts","last_synced_at":"2025-05-05T11:31:03.226Z","repository":{"id":44103607,"uuid":"66214814","full_name":"MithrilJS/mithril.d.ts","owner":"MithrilJS","description":"Types for mithril.js","archived":true,"fork":false,"pushed_at":"2023-04-17T10:28:51.000Z","size":182,"stargazers_count":81,"open_issues_count":19,"forks_count":11,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-17T05:34:27.348Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MithrilJS.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"open_collective":"mithriljs"}},"created_at":"2016-08-21T18:43:58.000Z","updated_at":"2025-01-29T04:59:04.000Z","dependencies_parsed_at":"2024-01-23T21:17:37.397Z","dependency_job_id":"1e4ee1c0-eef5-4d30-8f7d-3dafba490f0f","html_url":"https://github.com/MithrilJS/mithril.d.ts","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MithrilJS%2Fmithril.d.ts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MithrilJS%2Fmithril.d.ts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MithrilJS%2Fmithril.d.ts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MithrilJS%2Fmithril.d.ts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MithrilJS","download_url":"https://codeload.github.com/MithrilJS/mithril.d.ts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252488957,"owners_count":21756241,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T11:54:03.125Z","updated_at":"2025-05-05T11:31:02.887Z","avatar_url":"https://github.com/MithrilJS.png","language":"TypeScript","readme":"# Typescript Definitions for [Mithril 2.x](https://github.com/lhorie/mithril.js)\n\nTypes are maintained at [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped). Submit PRs there but you can submit issues, questions or suggestions here.\n\n## Install\n\nRequires TypeScript 3.2 or later.\n\nInstall types for the current version of Mithril from npm with:\n\n    npm install -D @types/mithril\n\nFor pre-release versions of Mithril, the `next` branch on this repo will align with the `next` branch of Mithril. You can install these types with:\n\n    npm install -D MithrilJS/mithril.d.ts#next\n\nIt's not recommended to install any other branches, including master, from this repo. Use npm/DefinitelyTyped for official releases.\n\n### Promise support in ES5\n\nPlease note that while Mithril polyfills Promise support, this type definition does not include a type declaration for Promises. You may see an error like:\n\n```\n'Promise' only refers to a type, but is being used as a value here.\n```\n\nTo use promises, you should add the `\"es2015.promise\"` library option to your compiler options. In `tsconfig.json`:\n\n```JSON\n{\n  \"compilerOptions\": {\n    \"target\": \"es5\",\n    \"lib\": [\n      \"es2015.promise\",\n      ...\n    ]\n  }\n}\n```\n\n### ES Module Interop\n\nIn order to import Mithril's commonjs export in the form:\n\n```typescript\nimport m from 'mithril';\n```\n\nyou may need to set the `\"esModuleInterop\"` option in your `tsconfig.json`.\n\n```JSON\n{\n  \"compilerOptions\": {\n    \"esModuleInterop\": true,\n    ...\n  }\n}\n```\n\nFor **Rollup**, instead you should enable `\"allowSyntheticDefaultImports\"`:\n\n```JSON\n{\n  \"compilerOptions\": {\n    \"allowSyntheticDefaultImports\": true,\n    ...\n  }\n}\n```\nThese settings may depend on the bundler you're using.\n\n---\n\n## The Gist:\n\n### Component examples\n\n#### Simple, stateless POJO Component with attrs types\n\n```typescript\nimport m from 'mithril';\n\ninterface Attrs {\n  name: string;\n  count: number;\n}\n\nconst MyComp: m.Component\u003cAttrs\u003e = {\n  view (vnode) {\n    return m('span', `name: ${vnode.attrs.name}, count: ${vnode.attrs.count}`);\n  }\n};\n```\n\nIf you prefer the convenience of destructuring, you could rewrite `MyComp` like:\n\n```typescript\nconst MyComp: m.Component\u003cAttrs\u003e = {\n  view ({attrs: {name, count}}) {\n    return m('span', `name: ${name}, count: ${count}`);\n  }\n};\n```\n#### ClosureComponent (AKA FactoryComponent)\n\nThe easiest way to annotate a stateful component and to make best use of inference is by holding state in a closure:\n\n```typescript\nimport m from 'mithril';\n\ninterface Attrs {\n  name: string;\n  initialValue: number;\n}\n\nfunction Counter(): m.Component\u003cAttrs\u003e {\n  let count = 0;\n  function increment() {\n    count++;\n  }\n  function decrement() {\n    count--;\n  }\n  return {\n    oninit ({attrs}) {\n      count = attrs.initialValue;\n    },\n    view ({attrs}) {\n      return m('.counter',\n        m('span', `name: ${attrs.name}, count: ${count}`),\n        m('button', {onclick: increment}, '+'),\n        m('button', {onclick: decrement}, '-')\n      );\n    }\n  };\n}\n```\nIn the above example, local state types can usually be inferred at declaration time and you don't need to worry about how `this` may be bound since you never need to write `this`.\n\nIn the following example, we want to use the initial `Vnode`. Here we annotate the whole function rather than just its return type, and the initial vnode type is inferred.\n\n```typescript\ninterface Attrs {\n  name: string;\n  initialValue: number;\n}\n\nconst Counter: m.ClosureComponent\u003cAttrs\u003e = vnode =\u003e {\n  let count = vnode.attrs.initialValue\n  function increment() {\n    count++;\n  }\n  function decrement() {\n    count--;\n  }\n  return {\n    view ({attrs}) {\n      return m('.counter',\n        m('span', `name: ${attrs.name}, count: ${count}`),\n        m('button', {onclick: increment}, '+'),\n        m('button', {onclick: decrement}, '-')\n      );\n    }\n  };\n};\n```\n\n#### ClassComponent\n\nNote that Typescript cannot infer types for class methods. When using classes you must annotate the incoming `Vnode` type for component hook methods.\n\n```typescript\nimport m from 'mithril';\n\ninterface Attrs {\n  name: string;\n  initialValue: number;\n}\n\nclass Counter implements m.ClassComponent\u003cAttrs\u003e {\n  count = 0;\n  // Use arrow functions so `this` is bound as expected\n  increment = () =\u003e {\n    this.count++;\n  };\n  decrement = () =\u003e {\n    this.count--;\n  };\n  // The constructor can be used in place of oninit\n  constructor({attrs}: m.CVnode\u003cAttrs\u003e) {\n    this.count = attrs.initialValue;\n  }\n  // Note that class methods cannot infer parameter types\n  view ({attrs}: m.CVnode\u003cAttrs\u003e) {\n    return m('.counter',\n      m('span', `name: ${attrs.name}, count: ${this.count}`),\n      m('button', {onclick: this.increment}, '+'),\n      m('button', {onclick: this.decrement}, '-')\n    );\n  }\n}\n```\n\n#### Stateful POJO Component\n\nAnother way to hold state is in `vnode.state`.\n\n```typescript\nimport m from 'mithril';\n\ninterface Attrs {\n  name: string;\n  initialValue: number;\n}\n\ninterface State {\n  count: number;\n  increment(): void;\n  decrement(): void;\n}\n\nconst Counter: m.Component\u003cAttrs, State\u003e = {\n  oninit ({state}) {\n    state.count = 0;\n    state.increment = () =\u003e {state.count++};\n    state.decrement = () =\u003e {state.count--};\n  },\n  view ({attrs, state}) {\n    return m('.counter',\n      m('span', `name: ${attrs.name}, count: ${state.count}`),\n      m('button', {onclick: state.increment}, '+'),\n      m('button', {onclick: state.decrement}, '-')\n    );\n  }\n};\n```\n\n#### POJO Comp type\n\nIn a POJO component hook, `this` is a reference to `vnode.state`. To have `this` inferred correctly, use the `m.Comp` type.\n\n```typescript\nimport m from 'mithril';\n\ninterface Attrs {\n  name: string;\n  initialValue: number;\n}\n\ninterface State {\n  count: number;\n  increment(): void;\n  decrement(): void;\n}\n\nconst Counter: m.Comp\u003cAttrs, State\u003e = {\n  count: 0,\n  increment() {\n    this.count++;\n  },\n  decrement() {\n    this.count--;\n  },\n  oninit ({attrs}) {\n    this.count = attrs.initialValue;\n  },\n  view ({attrs}) {\n    return m('.counter',\n      m('span', `name: ${attrs.name}, count: ${this.count}`),\n      m('button', {onclick: () =\u003e {this.increment()}}, '+'),\n      m('button', {onclick: () =\u003e {this.decrement()}}, '-')\n    );\n  }\n};\n```\n\n#### Plain view functions\n\nSometimes you can just as easily use functions in place of components. Usually the return type will be inferred as being compatible with `m.Children`, or you can annotate it specifically if you prefer:\n\n```typescript\nfunction titleView(title: string): m.Children {\n  return m('h1', title);\n}\n```\n\n### Stream example:\n\n```typescript\nimport Stream from 'mithril/stream';\n\nconst num = Stream(1);\nconst text = Stream\u003cstring\u003e();\nlet s: Stream\u003cFoo\u003e;\ns = Stream(new Foo());\n```\n\n## JSX/TSX\n\nLibrary support is required for full TSX support and cannot be accomplished with types alone. See the NPM package [mithril-tsx-component](https://www.npmjs.com/package/mithril-tsx-component).\n\n## Script/Global Usage\n\nIf you are adding mithril to your page as a separate script, then you can install the [global version](https://github.com/spacejack/mithril-global.d.ts) of these types.\n\n---\n\nFor more example usage see the `test` folder.\n\n**NOTE** This repo is not guaranteed to be in sync with DefinitelyTyped. Please use the DT types for your applications. This repo is maintained primarily for documentation and issues.\n\n## Install this repo\n\n    npm install\n\n### Test lint\n\n    npm run lint\n\nYou can also try compiling with `npm test` (which runs tsc) however there are intentional errors in the tests to ensure type checks will catch those errors.\n","funding_links":["https://opencollective.com/mithriljs"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmithriljs%2Fmithril.d.ts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmithriljs%2Fmithril.d.ts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmithriljs%2Fmithril.d.ts/lists"}