LogoLogo
GithubTwitterDiscordPlayground
English
English
  • 👋Atomico
  • 🚀Getting started with Atomico
  • ⚛️Getting started with Atomico for React users
  • 💡What can you do with Atomico?
    • You can create amazing webcomponents
    • You can create design systems
    • You can create websites
    • You can create mobile applications
    • You can create web applications
  • API
    • 🧬Props(Properties)
      • Value cycle as prop
      • Is it advisable to declare events using the props API?
    • 🧩VirtualDOM
      • Advanced
    • 🎣Hooks
      • useProp
      • useEvent
      • useRef
      • useHost
      • useState
      • useReducer
      • useEffect, useLayoutEffect and useInsertionEffect
      • useMemo and useCallback
      • useUpdate
      • useId
      • useContext
        • useProvider
      • usePromise
      • useAsync and useSuspense
      • useAbortController
    • 🔬Testing
      • Render cycle
      • atomico/test-hooks
      • atomico/test-dom
  • Guides
    • 🤔Frequent questions
      • Is it advisable to declare events using the props API?
      • How to declare events for your component at the type level for TSX?
      • When and why to use shadowDom?
      • Can I use Atomico in browsers without ESM support?
    • 🤩Component
      • Naming
      • CSS Styles with Shadow DOM
    • 🛡️Atomico with Typescript
      • Props
      • Component
      • Meta-types
        • Type
        • Event declaration
        • Method declaration
      • Check the correct use of hooks
    • 🤝Atomico and React
      • Integrating Atomico in React
      • From React to Atomico
        • Rendering Differences
        • VirtualDOM api differences
    • ⏳Atomico and Asynchrony
    • 🧠Atomico design patterns
      • ♻️Webcomponents with hybrid rendering
      • 🔗Slot as templates
      • 🔀Slot
    • 📖Atomico and Storybook
      • Frequent questions
    • 💧SSR / SSG
    • 🗃️Archives
      • Class inheritance
      • Forms and shadowDOM
      • Tips
      • Design systems
      • Atomico style guide
        • File structure
          • Monorepo
          • Design systems
  • packages
    • @atomico/hooks
      • useCurrentValue
      • use-intersection-observer
      • use-ref-values
      • use-script
      • use-attributes
      • use-prop-proxy
      • use-click-press
      • use-dollars
      • use-reflect-event
      • use-keyboar
      • use-click-coordinates
      • use-copy
      • use-debounce-state
      • use-form
      • use-listener
      • use-disabled
      • use-css
      • use-channel
      • use-promise
      • use-responsive-state
      • use-parent
      • use-resize-observer
      • use-slot
        • useSlot
        • useProxySlot
      • use-render
      • use-mutation-observer
      • use-css-light-dom
      • use-controller
      • use-router
      • use-async-effect
      • use-child-nodes
      • use-force-render
    • @atomico/store
      • Store
    • @atomico/storybook
    • @atomico/router
    • @atomico/vite
      • ⚙️Process CSS tag template blocks with PostCSS.
      • 🏗️Compile your code to be distributed optimally as a package.
      • 📕Use the JSX/TSX syntax of Atomico when using Storybook.
      • 🤖Automatically create customElements.define
      • ☑️Support for Vitest for Atomico.
      • 🧙‍♂️Server actions
    • @atomico/exports
      • 🚩CLI and Flags
      • 🤖Wrapper for React
    • @atomico/components
      • @atomico/keen-slider
      • @atomico/modal
      • @atomico/lottie
      • @atomico/table
    • @atomico/react
    • @atomico/postcss-tokens
      • Example with @atomico/vite
    • @atomico/wrapper
    • 🚫Deprecated
      • @atomico/magic-form
        • MagicFormProvider | <magic-form-provider>
        • MagicForm | <magic-form>
        • MagicForm Hooks
        • MagicForm in React and Preact
        • MagicForm in Microfrontend
        • MagicForm Patterns
      • @atomico/design-tokens
        • @atomico/design-tokens api
  • Support
    • Discord
    • Github
    • Twitter
Powered by GitBook
On this page
  • Construct the props parameter of your functional component.
  • Check the correct declaration of your component.

Was this helpful?

Edit on GitHub
Export as PDF
  1. Guides

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

PreviousCSS Styles with Shadow DOMNextProps

Last updated 1 year ago

Was this helpful?

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.

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);

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.

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.

🛡️
Check the correct use of hooks.
Declare meta-types to the component.
Construct the props parameter of your functional component.
Check the correct declaration of your component.