📜
Typescript & JSDOC
Types for functional webcomponents created with Atomico + Typescript.

Component

Props<typeof component.props>

Allows you to retrieve the types of the props object associated with the function.
Typescript
JSDOC
1
import { Props, c } from "atomico";
2
3
function component(props: Props<typeof component.props>) {
4
return <host shadowDom>
5
Atomico + Typescript
6
</host>
7
}
8
9
component.props = {
10
propString: String,
11
propObject: {
12
type: Object,
13
value: (): { prop?: number } => ({}),
14
},
15
};
16
17
customElements.define("my-component", c(component));
Copied!
1
import { c } from "atomico";
2
/**
3
* @param {import("atomico").Props<component.props>} props
4
*/
5
function component(props) {
6
return <host shadowDom>
7
Atomico + Typescript
8
</host>
9
}
10
11
component.props = {
12
propString: String,
13
propObject: {
14
type: Object,
15
value: (): { prop?: number } => ({}),
16
},
17
};
18
19
customElements.define("my-component", c(component));
Copied!

Component<props>

Create a strict contract that facilitates and checks the correct construction of props
Typescript
JSDOC
1
import { c, Component } from "atomico";
2
3
const component: Component<{ value: string }> = (props) => {
4
return <host shadowDom></host>;
5
};
6
7
component.props = {
8
value: String,
9
}
Copied!
1
import { c } from "atomico";
2
/**
3
* @type {import("atomico").Component<{ value: string }>}
4
*/
5
const component = (props) => {
6
return <host shadowDom></host>;
7
};
8
9
component.props = {
10
value: String,
11
};
Copied!

Hooks

Most hooks infer the types, but others require a declaration to improve the typing experience, example:

useProp

1
const [value, setValue] = useProp<number>("value");
Copied!
Forces the type number for value and setValue, according to the example value can only be of type number.

useState

useState infers the type in most cases, but not using an initial state prevents strict typing, I was able to correct this as follows:
1
const [value, setValue] = useState<number>();
Copied!
Forces the type number for value and setValue, according to the example value can only be of type number.

useRef

1
const ref = useRef < HTMLInputElement > useRef();
Copied!
Forces ref.current to be HTMLInputElement.
Last modified 2mo ago