carlrip

import React from "react";

type Character = {
  name: string;
};

interface PromiseWithCancel<T> extends Promise<T> {
  cancel: () => void;
}
function getCharacter(id: number) {

carlrip

import React from "react";
import { useQuery, useMutation } from "react-query";

type Person = {
  id: number;
  firstName: string;
  lastName: string;
};

async function getPerson({ queryKey }: { queryKey: [string, { id: number }] }) {

carlrip

interface Props {
  data: string[];
  renderItem?: (item: string) => JSX.Element;
  renderHeader?: () => JSX.Element;
}
export const List: FC<Props> = ({ data, renderItem, renderHeader }) => (
  <div className="list">
    <div className="list-header">{renderHeader && renderHeader()}</div>
    <ul>
      {data.map(item => (

carlrip

type Person = {
  id: number;
  name: string;
  mobile: string;
  email: string;
  age: number;
}

// PersonWithoutContactDetails automatically becomes { id: number; name: string; age: number;}

carlrip

type PersonWithoutContactDetails = Omit<Person, "mobile" | "email">  // { id: number; name: string; }

carlrip

type Person = {
  id: number;
  name: string;
  mobile: string;
  email: string;
}

carlrip

function getPersonScore(id: number): number {
  const person: Person = getPerson(id);
  return person.score ?? 0; 
}

carlrip

type Person = {
  id: number;
  name: string;
  score?: number;
}

function getPersonScore(id: number): number {
  const person: Person = getPerson(id);
  return person.score; // 💥 - Type error - Type 'number | undefined' is not assignable to type 'number'
}

carlrip

function getPersonPostcode(id: number) {
  const person: Person = getPerson(id);
  return person.address?.zipcode; // returns `undefined` if `address` is `undefined`
}

carlrip

type Person = {
  id: number;
  name: string;
  address?: Address;
}
type Address = {
  line1: string;
  line2: string;
  line3: string;
  zipcode: string;