What cheatsheet is this about? (if applicable)

Basic cheatsheet

--

In the current example, we have a type definition for Props but do not make use of it for defaultProps. This can lead to a mismatch between the actual fields in defaultProps and what the Props type defines.

Adding an explicit Partial<Props> type to defaultProps seems like good example code.

good eye! thanks very much!

@sw-yx Actually, I just checked, and the caveat that is stated under "Typescript 2.9 and earlier" still applies - defaultProps should not be typed as Partial<Props>, because that causes all component props to be considered optional in JSX (tested with typescript: 3.4.1 and @types/react: 16.8.12).

Another approach would be to use:

static defaultProps: Pick<Props, 'name'> = { name: 'world' }`

What do you think?

A good way of working with defaultProps is to actually reverse the props definition so that it uses the defaultProps type and adds additional types:

type Props = typeof MyComponent.defaultProps & {
  age: number
}

class MyComponent extends Component<Props> {
  static defaultProps = {
    name: 'world'
  }
}

o shit lets do that instead! much nicer.

I ran into a case where the typeof MyComponent.defaultProps pattern did not provide good ergonomics:

// in a separate file
interface ModelValues = {
  title: string
  description?: string
}

// in a custom formik form
type Props = {
  onSubmit: (values: ModelValues, actions: FormikActions<ModelValues>) => void
  initialValues: ModelValues
}

class ModelForm extends React.Component<Props> {
  static defaultProps: Pick<Props, 'initialValues'> = {
    initialValues: {
      title: ''
      description: ''
    }
  }
  render() { ...}
}

The reason I want to have a type definition directly on static defaultProps is that it protects me from omitting some value from the defaults, especially when dealing with more complicated props. Also, when there are type errors, they will directly show up in this file, instead of in the call sites.

This has been merged, so not sure if y'all will see this, but:

This seems to now be possible if you make use of an interface for props:

export type IconSize = 'small' | 'regular' | 'medium' | 'large';

interface IconPropsInterface {
  icon: string;
  size?: IconSize;
}

export class Icon extends Component<IconPropsInterface> {
  static defaultProps: IconPropsInterface = {
    icon: '',
    size: 'regularrr',   <-- Throws: Type '"regularrr"' is not assignable to type '"small" | "regular" | "medium" | "large" | undefined'.ts(2322)
  }
} 

i see you @RiaanWest. wanna PR something?

This will break LibraryManagedAttributes inference for that component. It will cause all of its props to be optional when creating JSX elements of that component.

export type IconSize = 'small' | 'regular' | 'medium' | 'large';

interface IconPropsInterface {
  icon: string;
  size?: IconSize;
}

export class Icon extends Component<IconPropsInterface> {
  static defaultProps: IconPropsInterface = {
    icon: '',
    size: 'regularrr',   <-- Throws: Type '"regularrr"' is not assignable to type '"small" | "regular" | "medium" | "large" | undefined'.ts(2322)
  }
}

const myIcon = <Icon /> // this will not throw an error even though `icon` is required,

Thanks for pointing this out @ferdaber - great point. I wasn't aware of that!