Some newb questions about organization and naming conflicts

[steady hemlock]

Hey all.

How do you all handle naming conflicts when you're working with components and types of the same name? For instance, a lot of the API objects I'm grabbing have the same name as components, like fetching a "game" in a <Game/> component. Is there a convention around this?

Also, when defining custom types for stuff like this, what do you generally do in terms of ... type? Do you use interface or type? I'm leaning on the latter, since I don't plan to implement these; they're just for type checking.

I currently have a common folder where I define them, and import as needed. But I can't really find much about conventions or best practices for this online.

[tardy tide]

Having a models folder which contains a file for each core type of your application (stuff like User, Game, etc, not helper/utility types) can be a good idea.

Also I generally lean towards using type as well unless I need a feature only available with interface (pretty rare). You can still "extend" types by just using & like:

type User = {
    name: string
    age: string
}
type UserWithPassword = User & {
    password: string
}

And for naming conflicts, try aliasing your imports like these (depending on the situation):

// for a file with multiple things you want to import from it
import * as gameApi from "./api/game"
// for a file with a single export you want from it
import { Game as GameModel } from "./models/Game"
// for a file with a single default export (like a react component)
import GameComponent from "./components/Game"