DEV Community

Varun D
Varun D

Posted on • Edited on

Notes on React Typescript

Creating a simple component in a new file, Component.tsx being called from App.tsx with props passed to it:

App.tsx

//standard imports
import {Component} from "./Component"

// Some state example. Array of objects - most common.
const ArrayofObj = [
  {
    id: 1
    name: "Lovelace",
    age: 32,
    cool: true
}]

export function default App(){
return (
  <>
    <Component mystuff={ArrayofObj}/>
  </>
)}
Enter fullscreen mode Exit fullscreen mode

Component.tsx

// Define type of props I get here.
// Any name that makes sense. Notice the [] at the end.
type propTypes = {
  ArrayofObj: { id: number; name: string; age: number; cool: bool }[];
// Specify it's an array using [] at the end!
};

// Accept prop with propTypes we defined above
export default function Component({ mystuff }: propTypes) {
// Create the lil pieces to put together later
  const mystuff_li = mystuff.map((item) => (
    <li key={item.id}/>{item.name} is {item.age} years old.</li>
  ));

// Return the stuffs
  return <ul>{friends_li}</ul>;
}
Enter fullscreen mode Exit fullscreen mode

Some other common ones...
Callbacks with mouse events can be found by hovering over your own function.

For example, a button with onClick={handleCancel} received from parent, the prop type in this case will be:
handleCancel: React.MouseEventHandler<HTMLButtonElement>;

Good resource for TypeScript cheatsheets.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up