dioxmio

type Point = {
    x: number,
    y: number
};

const origin = {
    x: 0,
    y: 0,
    // ❌ Type '{ x: number; y: number; z: number; }' does not satisfy the expected type 'Point'
    z: 0

dioxmio

const foo = {
    a: 255,
    b: 255,
    c: 255,
    // ❌ We get the error Type 'string' is not assignable to type 'number'
    d: 'bar'
} satisfies Record<string, number>;

// ✅ We are not loosing any type inferance information
// typeof foo is 

dioxmio

type Keys = 'a' | 'b' | 'c';
const foo: Record<Keys, number> = {
    a: 255,
    b: 255,
    c: 255
};

// typeof foo is 
// const foo: Record<Keys, number>

dioxmio

const foo: Record<string, number> = {
    a: 255,
    b: 255,
    c: 255
};

// typeof foo is 
// const foo: Record<string, number>

dioxmio

const foo = {
    a: 255,
    b: 255,
    c: 255
};

// typeof foo is 
// const foo: {
//    a: number;
//    b: number;

dioxmio

const data = Promise.resolve(true);

async function fetchData() { return data }

// ✅ result is false even though the underlying promise is the same
fetchData() === fetchData()

dioxmio

async function Note({id, isEditing}) {
  const note = await db.posts.get(id);

  return (
    <div>
      <h1>{note.title}</h1>
      <section>{note.body}</section>
      {isEditing ? <NoteEditor note={note} /> : null}
    </div>
  );

dioxmio

// simulates a fetch
function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({foo: 'bar'});
    }, 500)
  });
}

// component wrapped with a parent <Suspense />

dioxmio

// ✅ Creating multiple composable Components
function Dialog(props: DialogProps) {
  ...
}

function DialogTitle(props: DialogTitleProps) {
  ...
}

function DialogContent(props: DialogTitleProps) {

dioxmio

interface Props {
    children: React.ReactNode;
    content: React.ReactNode;
    footer?: string;
    isOpen: boolean;
    onClose?: () => void;
    title?: string;
}

// ❌ Wide multi purpose Component