Skip to main content

2 posts tagged with "typescript"

View All Tags

· 2 min read
Marcus Koh

Problem

There are times where you want to create your own custom hooks to be shared within your teammates or across projects. Usually there are 2 ways to write your custom hook. You either return an object or a tuple.

  1. Returning as an object
const useFirstName = () => {
const [firstName, setFirstName] = useState("");

return {
firstName,
setFirstName
}
}

Considering if you are returning as an object, you do not need to type it already because the object is inferred.

  1. Returning as an array
const useFirstName = () => {
const [firstName, setFirstName] = useState("");

return [firstName,setFirstName]
}

There will be some typescript issue with this because the array now becomes type of const useFirstName: () => (string | React.Dispatch<React.SetStateAction<string>>)[] .

So when you attempt to use the hook, you will realise that the type is string | React.Dispatch<React.SetStateAction<string>>, which isn't what you want.

Solution

as const to the rescue again!

const useFirstName = () => {
const [firstName, setFirstName] = useState("");

return [firstName,setFirstName] as const
}

This will return the correct type for your useFirstName where specifically item 0 (your firstName) is of type string and item 1 will be your setter function.

· 3 min read
Marcus Koh

I personally have not used enums much in my professional experience because I find them difficult to understand and I can't clearly visualise their data structure during development of mobile apps.

Recently, I have stumbled upon this particular youtube video that has piqued my interest in understanding enums vs as consts in Typescript.