🛡
Atomico with Typescript
Atomico with Typescript will improve the scalability of your project thanks to a really productive type system when creating, distributing and maintaining webcomponents
With Atomico and Typescript you will be able to:
📌 If you are a Typescript user I recommend using TSX vs the template-string, as you will benefit from:
- 1.JSX runtime, Typescript will automatically import Atomico upon detecting the use of TSX.
- 2.Autocompletion and validation of attributes, properties and events of tags and webcomponents.
- 3.Webcomponent instance validation using constructors.
Your component as a function does not infer the props, to help infer the props you should use the Props type, example:
From an object: Construct props directly from the declaring object.
import { Props } from "atomico";
const props = {
value: { type: Number, value: 0 },
};
function myComponent({ value }: Props<typeof props>) {
return <host>{value * 10}</host>;
}
myComponent.props = props;
From the component: Build the props from the component, internally Atomico captures the property
component.props.import { Props } from "atomico";
function myComponent({ value }: Props<typeof myComponent>) {
return <host>{value * 10}</host>;
}
myComponent.props = {
value: { type: Number, value: 0 },
};
From another customElement component: It's unusal, but when you extend another component you can infer the props from its constructor.
import { Props, c } from "atomico";
import { MyOtherComponent } from "./my-other-component";
function myComponent({ value }: Props<typeof MyOtherComponent>) {
return <host>{value * 10}</host>;
}
export const MyComponent = c(myComponent, MyOtherComponent);
Typescript checks the structure of your component by using the
c function on it, thus validating which props and styles have been attached.import { Props, c, css } from "atomico";
function component(props: Props<typeof component>) {
return <host>{props.value}</host>;
}
component.props = {
value: Number,
};
component.styles = css`
:host {
color: tomato;
}
`;
const MyComponent = c(component);
customElements.define("my-component", MyComponent);
The return of
c is a CustomElement with the types of the associated props, example:const myComponent = new MyComponent();
myComponent.value = "abc";
It will report an error to Typescript since this component's props define that value is of type
number, this validation also applies when instantiating your CustromElement in JSX or TSX.<MyComponent value="abc"></MyComponent>
Both TSX or JSX will help you to build better applications since it verifies the types according to the definition of its component, this verification is Free, it does not need plugins, only a
tsconfig.json file and Typescript to automate the revision.Last modified 3mo ago