Although the props today offer strict rules, Type allows them to be complemented with a direct definition of the types to accept, example:

import { Props } from "atomico";

function component(){
    return <host/>
}

component.props = {
    value: String as Type<"A"|"B"|"C">
}

The above is equivalent to using value as a function, example:

import { Props } from "atomico";

function component(){
    return <host/>
}

component.props = {
    value: {
        type: String,
        value: ():"A"|"B"|"C"=>"A"
    }
}

This is also valid for the null type that in Atomic translates as Any, example:

component.props = {
    src: null as Type<string | Promise<any>>
}

Meta-types allow you to define properties not covered by Atomico's Automatic support, such as:

1. Type declaration

2. Event declaration

3. Method declaration

Atomico supports through the use of the Host type, the declaration of events and , this is useful for associating meta-types to the customElement instance when using JSX or TSX.

Host to declare events

Host will be useful for you to declare your event using JSX or TSX regardless of its origin, example:

The use of Host allows that when using JSX or TSX your event is validated through Typescript, this also applies when using @atomico/react, example:

Note event.currentTarget accesses the CustomElement, example properties and more.

That has another benefit, capturing the event as a type to be used in an external handler, example:

Atomico allows the definition of methods from the host tag, this in order to share the scope with the methods (Functions) of the component, but this escapes the definition of types, to patch this we must use the Host type, this will allow us to validate the method from the JSX, TSX and the component instance.

Host to method declaration

The Props type allows you to infer the types of props already declared in the props object, example:

The main difference with the Component type is that Props does not generate stricture rules for the component, it only infers the props object to be used as an argument.

At the Typescript Props level, it does evaluate the structure of the component, in order to correctly infer the props, so if the component has a writing error, a warning about this type will be displayed.

useState

useState infers the type according to its initial state, if you don't define that state you can define the type manually, example:

The above statement will define that:

1. message is of type string.

2. setMessage only accepts values of type string or functions that return a string.

useProp

useProp will not infer the type from the prop, you must define it, example:

Let's remember that useProp has a return api similar to useState, so the previous declaration will define that:

1. message is of type string.

2. setMessage only accepts values of type string or functions that return a string.

useMemo and useCallback

both useMemo vs useCallback infer its type based on the callback that builds the memo state, but for certain conditions you may need to force the type return, example:

Although useMemo infers that its type is string, you can change the return rules via the first type parameter.

The above statement will define that:

1. message is of type string.

This applies equally to useCallback.

useEvent

useEvent allows defining the detail structure through the type parameter, example:

The above statement will define that:

1. The dispatch callback expects an object of type {id: string} as a parameter.

useRef

useRef allows to define through the type parameter the expected value of current in the reference.

The above statement defines:

1. refForm?.current is of the type HTMLFormElement.

useHost

useHost defines that current always exists, so the optional selector is not necessary, the type parameter of useHost allows to define the source Element, example:

All hooks in Atomico have Type declarations, explore them when importing each hook as a documentation source.

The declaration const myComponent: Component<Props, MetaProps> defines at the Typescript level the types of props and other options with which the component should be structured.

This process is strict but makes autocompletion and error detection easier in the component declaration.

Some warnings that this type can create are:

1. The declaration of the prop in myComponents.props does not match the type declared in Props.

2. A props declaration is missing.

3. Props has invalid metadata, example reflect has been defined for a Promise type.

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.

Construct the props parameter of your functional component.

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.

From the component: Build the props from the component, internally Atomico captures the property component.props.

From another customElement component: It's unusal, but when you extend another component you can infer the props from its constructor.

Check the correct declaration of your component.

Typescript checks the structure of your component by using the c function on it, thus validating which props and styles have been attached.

The return of c is a CustomElement with the types of the associated props, example:

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.

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.