diff --git a/types/mithril/index.d.ts b/types/mithril/index.d.ts
index be2b03f298..83de8c9825 100644
--- a/types/mithril/index.d.ts
+++ b/types/mithril/index.d.ts
@@ -244,6 +244,13 @@ declare namespace Mithril {
*/
type FactoryComponent = (vnode: Vnode) => Component;
+ /**
+ * Components are a mechanism to encapsulate parts of a view to make code easier to organize and/or reuse.
+ * Any function that returns an object with a view method can be used as a Mithril component.
+ * Components can be consumed via the m() utility.
+ */
+ type ClosureComponent = FactoryComponent;
+
/**
* Components are a mechanism to encapsulate parts of a view to make code easier to organize and/or reuse.
* Any Javascript object that has a view method is a Mithril component. Components can be consumed via the m() utility.
diff --git a/types/mithril/test/test-factory-component.ts b/types/mithril/test/test-factory-component.ts
index 6d0102fe38..b0d8f3b265 100644
--- a/types/mithril/test/test-factory-component.ts
+++ b/types/mithril/test/test-factory-component.ts
@@ -1,5 +1,5 @@
-import m = require('mithril');
-import { Component, FactoryComponent, Vnode } from 'mithril';
+import * as m from 'mithril';
+import { Component, ClosureComponent, FactoryComponent } from 'mithril';
///////////////////////////////////////////////////////////
// 0.
@@ -50,6 +50,13 @@ const comp2: FactoryComponent = vnode => ({ // vnode is inferred
}
});
+// 2a. Test ClosureComponent type alias
+const comp2a: ClosureComponent = vnode => ({ // vnode is inferred
+ view({attrs: {title, description}}) { // Comp2Attrs type is inferred
+ return [m('h2', title), m('p', description)];
+ }
+});
+
///////////////////////////////////////////////////////////
// 3.
// Declares attrs type inline.
@@ -80,6 +87,31 @@ const comp3: FactoryComponent<{pageHead: string}> = () => ({
}
});
+// 3.a Test ClosureComponent type alias
+const comp3a: ClosureComponent<{pageHead: string}> = () => ({
+ oncreate({dom}) {
+ // Can do stuff with dom
+ },
+ view({attrs}) {
+ return m('.page',
+ m('h1', attrs.pageHead),
+ m(comp2,
+ {
+ // attrs is type checked - nice!
+ title: "A Title",
+ description: "Some descriptive text.",
+ onremove(vnode) {
+ console.log("comp2 was removed");
+ },
+ }
+ ),
+ // Test other hyperscript parameter variations
+ m(comp1, m(comp1)),
+ m('br')
+ );
+ }
+});
+
///////////////////////////////////////////////////////////
// 4.
// Stateful component using closure method & var
@@ -152,7 +184,9 @@ m.route(document.body, '/', {
'/comp0': comp0,
'/comp1': comp1,
'/comp2': comp2,
+ '/comp2a': comp2a,
'/comp3': comp3,
+ '/comp3a': comp3a,
'/comp4': comp4,
'/comp5': comp5
});