TypeScript React function component

interface AppProps {
  // define props and types
}

const App = (props: AppProps) => {
  // use props and render UI
}

I) Props must be listed

interface AppProps {
  message: string
}

const App = (props: AppProps) => {
  if (props.loading) {
    return <span>Loading...</span>
  }

  return <div>{props.message}</div>
}

Property 'loading' does not exist on type 'AppProps'

I) Props must be listed

<App message="hi" count={5} />

Property 'count' does not exist on type
'IntrinsicAttributes & AppProps'

II) Props are required by default

interface AppProps {
  names: string[]
  count: number
}

<App
  names={['Bron', 'Jokic', 'Embiid', 'Luka', 'Giannis']}
/>

Property 'count' is missing in type '{ names: string[]; }'
but required in type 'AppProps'

II) Props are required by default

interface AppProps {
  names: string[]
  count?: number
}

const App = ({ names, count = 2 }: AppProps) => {
  const topPlayers = names.slice(0, count)

  // render topPlayers in UI
}

III) Prop refactors are caught

<App
  id="2"
  names={['Bron', 'Jokic', 'Embiid', 'Luka', 'Giannis']}
/>

Property 'names' does not exist on type
'IntrinsicAttributes & AppProps'.

IV) Can't avoid defining complex objects

interface Address { /* city, isPrimary, etc */ }

interface User {
  name: string
  addresses: {
    shipping: Address
    billing?: Address
  }
}

interface AppProps {
  user: User
}

IV) Can't avoid defining complex objects

<App
  user={{
    user: { id: '1234', name: 'Ben', addresses: { } }
  }}
/>

Property 'id' does not exist on type
'IntrinsicAttributes & User'.

V) Function props have explicit signature

const Input = ({ name, value, onChange }) => {
  // do input-y stuff & call onChange
}

Input.propTypes = {
  variant: PropTypes.enum(['filled', 'outlined']).isRequired,
  value: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
}

V) Function props have explicit signature

interface Props {
  variant: 'filled' | 'outlined'
  value: string
  onChange: (newValue: string) => void
}

const Input = ({ name, value, onChange }: Props) => {
  // do input-y stuff & call onChange
}

VI) VS Code integration 🔥

I) useState

const App = () => {
  const [count, setCount] = useState(0)

  const add = () => {
    setCount(
      (prevCount) => prevCount + 1
    )
  }

  return <button onClick={add}>Add</button>
}

I) useState

const App = () => {
  const [user, setUser] = useState<User | null>(null)

  useEffect(() => {
    getUserApi().then((data) => {
      setUser(data.user)
    })
  }, [])
}

return user ? <User user={user} /> : null

What are TypeScript Generics? ⏯️

II) useEffect

const App = () => {
  const [user, setUser] = useState<User | null>(null)

  useEffect(() => (
    getUserApi().then((data) => {
      setUser(data.user)
    })
  ), [])
}

Type 'Promise<void>' provides no match for the
signature '(): void | undefined'.

IV) Custom hooks

const useUser = (initUsername?: string) => {
  const [username, setUsername] = useState(initUsername)
  const [user, setUser] = useState<User | null>(null)

  useEffect(() => {
    getUser(username).then(setUser)
  }, [username])

  return [user, setUsername] as const
  // want tuple: [User, (username: string) => void]
  // not array: (User | (username: string) => void)[]
}

const assertions

I) One with the other

Valid configurations

<Text>not truncated<Text>
<Text truncate>truncated<Text>
<Text truncate showExpand>truncated w/ expand<Text>

Invalid configurations

<Text truncate={false} showExpand>not truncated<Text>
<Text showExpand>only expand<Text>

Property 'truncate' is missing in type
'{ children: Element; showExpanded: true; }' but required in type
'{ truncate: true; showExpanded?: boolean | undefined; }'.

I) One with the other

interface CommonProps {
  children: React.ReactNode,
  // other props...
}
type TruncateProps =
  | { truncate?: false, showExpanded: undefined }
  | { truncate: true, showExpanded?: boolean }
type TextProps = CommonProps & TruncateProps

const Text = (props: TextProps) => {
  // props.truncate = boolean | undefined
  // props.showExpanded = boolean | undefined
}

Discriminating Unions

II) Extending HTML components

<Button
  variant="primary"
  size="large"

  type="button"
  onClick={() => { /* ... */ }}
  disabled
  id="main_btn"
>
  Go
</Button>

II) Extending HTML components

interface ExtraProps {
  variant: 'primary' | 'secondary'
  size: 'default' | 'small' | 'large'
}

type Props = ExtraProps
  & Omit<React.ComponentProps<"button">, keyof ExtraProps>

const Button = ({ variant, size, ...buttonProps }: Props) => {
  // do stuff with variant & size
  return <button {...buttonProps} />
}

Utility types

Do I have to switch over all at once?

Waller Goble

Typescript Deep Dive

10:00a (Room ABE)