CODEWITHSUNDEEP
typescriptreact-nativeuse-state
Keselme
Keselme

Reputation: 4249

Using useState hook with TypeScript

I wanted to know if I it's possible to use inheritance while setting the useState type. What I mean is if have an interface like that:

interface PackageItem {
    id: number,
    name: string,
    address: string
}

And another interface like that

interface Selectable {
    selected: boolean
}

Now I want to create a state where I will have an array of selectable packages, so I tried something like this:

const [selectablePackages, setSelectablePackages] = useState<(PackageItem extends Selectable)[]>();

But I keep getting an error, which highlights the extends word, saying:

Parsing error: Unexpected token, expected ","

I'm not setting the state type correctly, how can I achieve this?

Upvotes: 0

Views: 172

Answers (1)

Ruan Mendes
Ruan Mendes

Reputation: 92274

You meant to create an inline type which can be done using &, the intersection operator

const [selectablePackages, setSelectablePackages] = 
    useState<(PackageItem & Selectable)[]>();

Consider using a type or interface if you need to use it in multiple places.

type SelectablePackageItem = PackageItem & Selectable

// Or interface
interface SelectablePackageItem extends PackageItem, Selectable {}

const [selectablePackages, setSelectablePackages] = 
    useState<SelectablePackageItem[]>();

Upvotes: 1

Related Questions