Skip to content

JS TS Upgrade Recommendations

Faris Durrani edited this page Mar 22, 2023 · 1 revision
  1. Remove all PropTypes. TS already does this job for us
  2. Use interfaces when possible, not types. See https://stackoverflow.com/a/65948871/11031425
  3. Abstract types for simplicity.
// don't do this if the type is too complex
const MyComponent = (props: {
					 propA: string, 
					 propB: string, 
					 propC: string,
					 propD: string
					}) {return </>}

// instead do this
interface MyComponentProps {
	propA: string, 
	propB: string, 
	propC: string,
	propD: string
}
const MyComponent = (props: MyComponentProps) {return </>}
  1. Use lint. Install the ESLint extension and follow its recommendations
  2. Avoid any if possible. For objects, try { [key: string]: any } instead of just any. Or use typeunknown
  3. Finding the type of e is hard. Try to not. Instead, pass in the value from e you want, like e.target.value in onClick={(e) => handleClick(e.target.value)}
Clone this wiki locally