io-types
v1.0.0-alpha.1io-types for Angular 2 Components
Run Time Type Checking for Inputs/Outputs
Please note that io-types is currently proof-of-concept.
Like React's propTypes, io-types let you describe expected input and output for your Angular 2 components. Assertions are run in development mode letting you easily catch bad bindings.
To use, install the dependency using npm:
npm install io-types
Then write assertions for your component's inputs:
import {Compnent, Input} from 'angular2/core';
import {CheckInput, check} from 'io-types';
@Component({
selector: 'my-component',
template: `...`
})
class MyComponent{
@Input() @CheckInput(check.isBoolean) active;
}
Now passing non-boolean values to active
results in an error. For example:
<my-component [active]="123"></my-component>
Would throw:
Invalid value for 'MyComponent.active':
↳ Expected '123' to be of type 'boolean'
Similarly, you can use the same assertions to check function arguments. This helps you make assertions about event handler callbacks:
import {Component} from 'angular2/core';
import {CheckArgs, check} from 'io-types';
@Component({
selector: 'my-component',
template: `
<input (change)="handleChange($event.value)">
`
})
class MyComponent{
@CheckArgs(check.isString) handleChange(value: string){ }
}
To Do
Right now io-types is basically a proof-of-concept. Future iterations may include an API similar to React's propTypes in addition to using Reflection for simple assertions.