
Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
How do I remove the blur effect from my CSS?
I removed but the blur is still there. Any ideas?
filter: blur(5px);
Does work for removing blur from modals?
backdrop-filter: none;
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
So far we've made a silly little app in typescript and you've learned how to use Typescript with useState, Event handlers, API response data, and Functional Component Props.
Let's get a little more advanced. I've created a mock API here
It has two endpoints: and You can check out the responses in the browser to see the structure of each response. Just like before- you can turn those into types or interfaces. I've gone ahead and done that here- but expanded on the concepts a bit:
interface BaseDB {
id: number;
createdAt: Date;
}
interface StoreItem extends BaseDB {
tag: "store";
name: string;
price: number;
description: string;
}
interface VehicleItem extends BaseDB {
tag: "car";
model: string;
color: string;
make: string;
type: VehicleType;
}
export type VehicleType =
| "Sedan"
| "SUV"
| "Coupe"
| "Convertible"
| "Hatchback";
Here I've used the 'extends' keyword. If you're familiar with classes, this immediately makes sense. If not- then don't worry. It's a simple concept. extends BaseDB, which means has all the types inside of PLUS everything we've outlined inside of itself. I did this because our responses have overlap. Both of our endpoints have a 'createdAt' and 'id' column. So instead of writing it twice- you can just 'extend' another interface.
You'll see we have a which is a 'union type' that can only be "Sedan", "Suv", "Coupe", "Convertible", or "Hatchback". If we know the available options ahead of time- it can be useful and nice for autocomplete to fill these types of union types out. It can prevent you from inserting invalid data- or searching for values that don't exist.
You'll also see a key in each Item type. This will let us create a 'tagged union'. The 'tag' is a harcoded value that you can use inside your functions when dealing with these types. This should be used sparingly- but can be useful.
Here's how we can use this 'tagged union' and 'tag' key in a function:
// Create the tagged union
export type Item = StoreItem | VehicleItem;
export async function getItemById<T extends Item>(
endpoint: T["tag"],
id: number
): Promise<T> {
const baseUrl = "https://64dc6aade64a8525a0f6740e.mockapi.io/api/v1/";
const url = `${baseUrl}${endpoint}/${id}`;
const response = await fetch(url);
const item = await response.json();
return item;
}
This creates a 'Generic' function that we can use for both the and type. This gives us autocomplete for the endpoint:
And if we properly type the Generic, typescript can give us autocomplete for the return value, too:
That's an interesting feature- but we could also do it a better way with overloads instead of 'tags':
async function getItem( endpoint:"store",id:number): Promise<StoreItem>;
async function getItem( endpoint:"car",id:number): Promise<VehicleItem>;
async function getItem(endpoint: any,id:number) {
const baseUrl = "https://64dc6aade64a8525a0f6740e.mockapi.io/api/v1/";
const url = `${baseUrl}${endpoint}/${id}`;
const response = await fetch(url);
const item = await response.json();
return item;
}
Overloads let us describe different ways a function can take shape. The first way we described was with an 'endpoint' argument of and a return value of Promise<StoreItem>. The second was was with an endpoint of and a return value of Promise<VehicleItem>.
Then we write the actual function. Now whenever that function is used, Typescript will know based on the 'endpoint' argument, what type of return type to expect.
Overloading functions is a feature of vanilla Javascript- but becomes even more powerful with typescript.
Now we don't even need to be explicit with the Generic type when we call the function- but we still get all the benefits:
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.