clash.js

// How do you avoid name clashes between functions, variables, components, and types?

// OK
const crocodiles = getCrocodiles({ color: 'green' })

// ??? 
const isCrocodile = isCrocodile(crocodiles[0])

// OK
const user: User = { name: 'Chuck Norris' }

// ???
function User(props: { user: User }) => <p>{props.user.name}</p>

My suggestions:

// add "action" to function name, general pattern when storing variable from getter function: const xxx = getXxx()
const isCrocodile = getIsCrocodile(crocodiles[0]);

// name types / interfaces with "I":
const user: IUser = { name: 'Chuck Norris' }
function User(props: { user: IUser }) => <p>{props.user.name}</p>