DEV Community: Noah

Learn how to streamline UI implementation from Figma using Cursor + MCP Server. If you're tired of pixel-pushing manually, this guide is for you!

Noah — Tue, 20 May 2025 19:22:23 +0000

Noah

May 20 '25

Streamlining UI Coding from Figma with Cursor & MCP Server

Comments

6 min read

Streamlining UI Coding from Figma with Cursor & MCP Server

Noah — Tue, 20 May 2025 19:20:37 +0000

Hello there!

I’ve been working as a frontend engineer for 4 years, and I still feel that reproducing Figma designs pixel-perfectly can be a time-consuming and tough job sometimes.

I always thought… if we could build perfect UI components or sections directly from Figma using AI, we could spend more time on creative and meaningful tasks. So, I decided to explore MCP Server + Cursor, which has been trending recently, and share the whole experiment with you all.

By the way, I just started using Cursor and building things this way — so I’m still learning and exploring. Please feel free to share your feedback or ideas in the comments!

🔧 Tech Stack

Design-to-Code Tools

Figma MCP Server (https://github.com/GLips/Figma-Context-MCP)
Cursor (claude-3.7-sonnet)

Frontend Stack

Next.js
React
TypeScript
Tailwind CSS
shadcn/ui

!Note:

This time, I experimented with using Figma-Context-MCP, but if I were to use it in a production environment, I would likely build my own MCP server for the following reasons:

Since MCP is essentially an unofficial protocol, relying on an external, individually maintained implementation like GLips/Figma-Context-MCP introduces risk and is difficult to recommend for professional use.
It appears that GLips/Figma-Context-MCP trims down the response from the Figma API—probably to reduce token usage—which led to missing information. For example, critical data such as componentProperties wasn't included, making it hard to leverage the design system effectively during implementation.

🛠️ Setup

To set up the MCP Server, please refer to the following official resources:

Cursor Official Docs (Model Context Protocol):
https://docs.cursor.com/context/model-context-protocol
Figma MCP Server GitHub Repository:
https://github.com/GLips/Figma-Context-MCP

🧪 Initial Test (Figma ↔ MCP Server ↔ Cursor)

The Figma design I used is this beautiful SaaS Landing Page.
Thanks to Al Razi Siam for sharing this amazing work!

It’s a clean and simple landing page — perfect for trying AI-powered section-based coding.
In today’s article, we’ll focus on implementing just the Header and Hero sections from this page.

To test if MCP Server works properly, I pasted the Figma link into the Cursor chat. And... it worked! Cursor was able to fetch the design through MCP Server.

⚙️ Project Setup

Since this article focuses on MCP Server, I’ll skip the full app setup, but here’s what I did briefly:

Created a new Next.js project (https://nextjs.org/docs/app/getting-started/installation)
Installed shadcn/ui (https://ui.shadcn.com/docs/installation/next)
Cleaned up the initial project (removed unnecessary styles and assets)

Final clean state:

🧪 First Prompt Trial

I just gave Cursor this prompt, no additional context:

Prompt

Please implement the design from the Figma file (https://www.figma.com/design/OaWdNdbUeSNzj1lgYOmByC/Whitepace---SaaS-Landing-Page--Community-?node-id=9-6480&t=VKF4bLziXgKdQaaL-4) using React, Next.js, Tailwind CSS, and ShadcnUI.

And here is what it gave me (I trimmed everything except the header and hero sections):

Figma reference:

Well, not perfect, but okay as a first try. Felt similar to what I got back when v0 came out 😅

🧱 Let’s Build Section by Section

Header Section

Prompt

I used a “Copy link to selection” for just the header:

Please implement the header section only from the following Figma file using React, Next.js, Tailwind CSS, and ShadcnUI:

https://www.figma.com/design/OaWdNdbUeSNzj1lgYOmByC/Whitepace---SaaS-Landing-Page--Community-?node-id=9-7575&t=89b3o0KWCyQKxRlw-4

Better! But...

Minor Issues:

Logos and icons weren’t quite right
Spacing between text and icon was off

Figma reference:

🎯 Icon & Spacing Challenges

Sometimes it doesn't reuse the same icon across components
If an icon or logo is made of multiple layers, it often downloads them as separate SVGs

So I added manual notes in the prompt:

Prompt

Please implement the header section only from the following Figma file using React, Next.js, Tailwind CSS, and ShadcnUI:

https://www.figma.com/design/OaWdNdbUeSNzj1lgYOmByC/Whitepace---SaaS-Landing-Page--Community-?node-id=9-7575&t=89b3o0KWCyQKxRlw-4

Additional Notes

Use Tailwind CSS utility classes to match spacing, font sizes, colors, and layout precisely.

For icons, use ones in /public/icons, not raw SVGs or third-party libraries.

For images, use assets in /public/images.

Prefer shadcn/ui components. Install with: npx shadcn@latest add [component-name]

I also manually downloaded image assets into /public/images.

And finally…

Figma reference:

It looks good but there's still a problem.

In the Figma file, spacing between menu text and icon was 10px.

But Tailwind’s gap-2 = 8px. So the spacing was slightly off:

I adjusted the prompt as below to solve the issue mentioned above.

Prompt

Please implement the header section only from the following Figma file using React, Next.js, Tailwind CSS, and ShadcnUI:

https://www.figma.com/design/OaWdNdbUeSNzj1lgYOmByC/Whitepace---SaaS-Landing-Page--Community-?node-id=9-7575&t=89b3o0KWCyQKxRlw-4

Additional Notes

Use Tailwind CSS utility classes to match spacing, font sizes, colors, and layout as closely as possible to the Figma design. Prefer predefined utility classes (e.g., p-2, mt-4) when available. If an exact match isn't available, use Tailwind's arbitrary value syntax (e.g., p-[10px], gap-[18px]) to follow the Figma design precisely.

For icons, please use the ones provided in the /public/icons directory. Avoid using raw SVGs or third-party icon libraries.

For images, use assets located in the /public/images directory.

When implementing UI elements, prioritize using ShadcnUI components. If a component is not found in /components/ui, install it using the command: npx shadcn@latest add [component-name]

Finally, the Figma design was faithfully reproduced.

Figma design again:

I checked it using Chrome DevTools, and the spacing, line height, and colors were all implemented exactly as in the original design.

Also, necessary components like button and dropdown-menu were properly imported from shadcn/ui, and with just a little bit of refactoring, the code looked good enough to be used in a real-world project.

If you're curious, feel free to check out the repository: https://github.com/noah-00/coding-by-mcp

💥 Hero Section

Prompt was same, just the node-id changed:

Prompt

Please implement the Hero-section only from the following Figma file using React, Next.js, Tailwind CSS, and ShadcnUI:

https://www.figma.com/design/OaWdNdbUeSNzj1lgYOmByC/Whitepace---SaaS-Landing-Page--Community-?node-id=9-6481&t=lZSdRVDVqKLJHy0M-4

Additional Notes

Use Tailwind CSS utility classes to match spacing, font sizes, colors, and layout as closely as possible to the Figma design. Prefer predefined utility classes (e.g., p-2, mt-4) when available. If an exact match isn't available, use Tailwind's arbitrary value syntax (e.g., p-[10px], gap-[18px]) to follow the Figma design precisely.

For icons, please use the ones provided in the /public/icons directory. Avoid using raw SVGs or third-party icon libraries.

For images, use assets located in the /public/images directory.

When implementing UI elements, prioritize using ShadcnUI components. If a component is not found in /components/ui, install it using the command: npx shadcn@latest add [component-name]

Everything looked perfect — except for the background image.

It seems that recognizing and placing images correctly is still a bit challenging.
If anyone has more insights or tips on this, I’d really appreciate it if you could share!

Output:

↓ Background image didn’t render properly. I fixed it manually 😅

Figma reference:

💡 Conclusion

I didn’t implement the full page, but just with good prompts, I was able to build a section in under 5 minutes (for example, the Hero section).

There are still issues:

When I asked it to make the layout responsive, sometimes it broke already working parts.
It's decent at 0→1, but hard to do precise edits without breaking other things.

That said, for simple sections or components, Cursor + MCP Server gives very solid results — especially with thoughtful prompt engineering.

At the company I work for, we also saw an improvement in the quality of AI-generated code by defining basic rules under the .cursor/rules directory.

Thanks for reading!

As I said, I’m still a beginner in prompt engineering, so any tips or feedback are super welcome. Let’s learn and improve together.

Source code: https://github.com/noah-00/coding-by-mcp

Happy coding☀️

🙌 I'm still learning prompt engineering, so feedback and suggestions are very welcome!

Noah — Sat, 17 May 2025 19:03:36 +0000

Noah

May 17 '25

Streamlining UI Coding from Figma with Cursor & MCP Server

#react #nextjs #vibecoding #frontend

Comments

6 min read

Streamlining UI Coding from Figma with Cursor & MCP Server

Noah — Sat, 17 May 2025 18:53:16 +0000

Hello there!

I’ve been working as a frontend engineer for 4 years, and I still feel that reproducing Figma designs pixel-perfectly can be a time-consuming and tough job sometimes.

By the way, I just started using Cursor and building things this way — so I’m still learning and exploring. Please feel free to share your feedback or ideas in the comments!

🔧 Tech Stack

Design-to-Code Tools

Figma MCP Server (https://github.com/GLips/Figma-Context-MCP)
Cursor (claude-3.7-sonnet)

Frontend Stack

Next.js
React
TypeScript
Tailwind CSS
shadcn/ui

!Note:

This time, I experimented with using Figma-Context-MCP, but if I were to use it in a production environment, I would likely build my own MCP server for the following reasons:

Since MCP is essentially an unofficial protocol, relying on an external, individually maintained implementation like GLips/Figma-Context-MCP introduces risk and is difficult to recommend for professional use.
It appears that GLips/Figma-Context-MCP trims down the response from the Figma API—probably to reduce token usage—which led to missing information. For example, critical data such as componentProperties wasn't included, making it hard to leverage the design system effectively during implementation.

🛠️ Setup

To set up the MCP Server, please refer to the following official resources:

Cursor Official Docs (Model Context Protocol):
https://docs.cursor.com/context/model-context-protocol
Figma MCP Server GitHub Repository:
https://github.com/GLips/Figma-Context-MCP

🧪 Initial Test (Figma ↔ MCP Server ↔ Cursor)

The Figma design I used is this beautiful SaaS Landing Page.
Thanks to Al Razi Siam for sharing this amazing work!

It’s a clean and simple landing page — perfect for trying AI-powered section-based coding.
In today’s article, we’ll focus on implementing just the Header and Hero sections from this page.

To test if MCP Server works properly, I pasted the Figma link into the Cursor chat. And... it worked! Cursor was able to fetch the design through MCP Server.

⚙️ Project Setup

Since this article focuses on MCP Server, I’ll skip the full app setup, but here’s what I did briefly:

Created a new Next.js project (https://nextjs.org/docs/app/getting-started/installation)
Installed shadcn/ui (https://ui.shadcn.com/docs/installation/next)
Cleaned up the initial project (removed unnecessary styles and assets)

Final clean state:

🧪 First Prompt Trial

I just gave Cursor this prompt, no additional context:

Prompt

Please implement the design from the Figma file (https://www.figma.com/design/OaWdNdbUeSNzj1lgYOmByC/Whitepace---SaaS-Landing-Page--Community-?node-id=9-6480&t=VKF4bLziXgKdQaaL-4) using React, Next.js, Tailwind CSS, and ShadcnUI.

And here is what it gave me (I trimmed everything except the header and hero sections):

Figma reference:

Well, not perfect, but okay as a first try. Felt similar to what I got back when v0 came out 😅

🧱 Let’s Build Section by Section

Header Section

Prompt

I used a “Copy link to selection” for just the header:

Please implement the header section only from the following Figma file using React, Next.js, Tailwind CSS, and ShadcnUI:

https://www.figma.com/design/OaWdNdbUeSNzj1lgYOmByC/Whitepace---SaaS-Landing-Page--Community-?node-id=9-7575&t=89b3o0KWCyQKxRlw-4

Better! But...

Minor Issues:

Logos and icons weren’t quite right
Spacing between text and icon was off

Figma reference:

🎯 Icon & Spacing Challenges

Sometimes it doesn't reuse the same icon across components
If an icon or logo is made of multiple layers, it often downloads them as separate SVGs

So I added manual notes in the prompt:

Prompt

Please implement the header section only from the following Figma file using React, Next.js, Tailwind CSS, and ShadcnUI:

https://www.figma.com/design/OaWdNdbUeSNzj1lgYOmByC/Whitepace---SaaS-Landing-Page--Community-?node-id=9-7575&t=89b3o0KWCyQKxRlw-4

Additional Notes

Use Tailwind CSS utility classes to match spacing, font sizes, colors, and layout precisely.

For icons, use ones in /public/icons, not raw SVGs or third-party libraries.

For images, use assets in /public/images.

Prefer shadcn/ui components. Install with: npx shadcn@latest add [component-name]

I also manually downloaded image assets into /public/images.

And finally…

Figma reference:

It looks good but there's still a problem.

In the Figma file, spacing between menu text and icon was 10px.

But Tailwind’s gap-2 = 8px. So the spacing was slightly off:

I adjusted the prompt as below to solve the issue mentioned above.

Prompt

Please implement the header section only from the following Figma file using React, Next.js, Tailwind CSS, and ShadcnUI:

https://www.figma.com/design/OaWdNdbUeSNzj1lgYOmByC/Whitepace---SaaS-Landing-Page--Community-?node-id=9-7575&t=89b3o0KWCyQKxRlw-4

Additional Notes

Use Tailwind CSS utility classes to match spacing, font sizes, colors, and layout as closely as possible to the Figma design. Prefer predefined utility classes (e.g., p-2, mt-4) when available. If an exact match isn't available, use Tailwind's arbitrary value syntax (e.g., p-[10px], gap-[18px]) to follow the Figma design precisely.

For icons, please use the ones provided in the /public/icons directory. Avoid using raw SVGs or third-party icon libraries.

For images, use assets located in the /public/images directory.

When implementing UI elements, prioritize using ShadcnUI components. If a component is not found in /components/ui, install it using the command: npx shadcn@latest add [component-name]

Finally, the Figma design was faithfully reproduced.

Figma design again:

I checked it using Chrome DevTools, and the spacing, line height, and colors were all implemented exactly as in the original design.

If you're curious, feel free to check out the repository: https://github.com/noah-00/coding-by-mcp

💥 Hero Section

Prompt was same, just the node-id changed:

Prompt

Please implement the Hero-section only from the following Figma file using React, Next.js, Tailwind CSS, and ShadcnUI:

https://www.figma.com/design/OaWdNdbUeSNzj1lgYOmByC/Whitepace---SaaS-Landing-Page--Community-?node-id=9-6481&t=lZSdRVDVqKLJHy0M-4

Additional Notes

Use Tailwind CSS utility classes to match spacing, font sizes, colors, and layout as closely as possible to the Figma design. Prefer predefined utility classes (e.g., p-2, mt-4) when available. If an exact match isn't available, use Tailwind's arbitrary value syntax (e.g., p-[10px], gap-[18px]) to follow the Figma design precisely.

For icons, please use the ones provided in the /public/icons directory. Avoid using raw SVGs or third-party icon libraries.

For images, use assets located in the /public/images directory.

When implementing UI elements, prioritize using ShadcnUI components. If a component is not found in /components/ui, install it using the command: npx shadcn@latest add [component-name]

Everything looked perfect — except for the background image.

It seems that recognizing and placing images correctly is still a bit challenging.
If anyone has more insights or tips on this, I’d really appreciate it if you could share!

Output:

↓ Background image didn’t render properly. I fixed it manually 😅

Figma reference:

💡 Conclusion

I didn’t implement the full page, but just with good prompts, I was able to build a section in under 5 minutes (for example, the Hero section).

There are still issues:

When I asked it to make the layout responsive, sometimes it broke already working parts.
It's decent at 0→1, but hard to do precise edits without breaking other things.

That said, for simple sections or components, Cursor + MCP Server gives very solid results — especially with thoughtful prompt engineering.

At the company I work for, we also saw an improvement in the quality of AI-generated code by defining basic rules under the .cursor/rules directory.

Thanks for reading!

As I said, I’m still a beginner in prompt engineering, so any tips or feedback are super welcome. Let’s learn and improve together.

Source code: https://github.com/noah-00/coding-by-mcp

Happy coding☀️

Difference between router.push, and in Next.js

Noah — Sat, 07 Dec 2024 23:41:26 +0000

Here’s a brief overview of the differences in behavior among the three.

router.push

router.push doesn't generate <a> tags, so its behavior is similar to window.location. This means that if you're concerned about SEO, your links might not be detected by crawlers.

router.push is mostly used in an event handler (onClick here). This is an action. So let's say you click on the button, then you do some task, and based on the result you take the user to another page. Then you'd want to use router.push

`<Link>`

On the other hand, <Link> generate <a> tags. which means your links will be detected when crawlers scrape your site.
End users can still navigate without reloading the page, just like in a Single Page App.

The <Link> component also includes prefetching.
This means all pages linked to by any <Link> in the viewport or hovered on are loaded in advance, ready to be displayed when clicked on.

`<a>`

<a> tag without using next/link's <Link> creates a standard hyperlink which directs end user to the url as a new page. (standard behavior).

Conclusion

router.push:

Used for programmatic navigation, similar to window.location, and doesn't generate <a> tags, so it might not be SEO-friendly.

<Link>:

Generates <a> tags, making it SEO-friendly and supports prefetching for better performance in Single Page Applications.

<a>:

Standard HTML hyperlink, reloads the page entirely and doesn't leverage Next.js routing optimizations.

You should use <Link> throughout your website.
However, if you need to redirect users to another page based on the result of a process, you can use router.push.

Happy Coding☀️

No more Try/Catch: a better way to handle errors in TypeScript

Noah — Mon, 04 Nov 2024 23:46:22 +0000

Hello everyone.

Have you ever felt that Try/Catch is a bit inconvenient when developing an application in TypeScript?

I found an intersting video on YouTube that describes how to handle errors in TypeScript in a simple way.
I'm sharing insights from the video as a review.

If you have any other good alternatives to try/catch, I would love to hear them!

Defining the getUser function for error handling

First of all, I defined a simple getUser function to illustrate error handling.
It returns a new user with the given id.

const wait = (duration: number) => {
  return new Promise((resolve) => {
    setTimeout(resolve, duration);
  });
};

const getUser = async (id: number) => {
  await wait(1000);

  if (id === 2) {
    throw new Error("404 - User does not exist");
  }

  return { id, name: "Noah" };
};

const user = await getUser(1);

console.log(user); // { id: 1, name: "Noah" }

Error Handling using try/catch

Rewriting the previous code using try/catch, it looks like this.

const wait = (duration: number) => {
  ...
};

const getUser = async (id: number) => {
　...
};

try {
  const user = await getUser(1);
  console.log(user); // { id: 1, name: "Noah" }
} catch (error) {
  console.log("There was an error");
}

Problem with try/catch ①: It handles every error that occurs within the try block

The code below is not ideal.
Even though it's just a typo, "There was an error" is displayed in the console. I only want to handle errors that occur specifically in getUser within this try/catch block.

const wait = (duration: number) => {
  ...
};

const getUser = async (id: number) => {
　...
};

try {
  const user = await getUser(1);
  console.log(usr);              　// ← There was an error
  // ... (a lot of code)
} catch (error) {
  console.log("There was an error");
}

Problem with try/catch ②: The Pitfall of Using let

Okay then, let's try to solve it using let.

const wait = (duration: number) => {
  ...
};

const getUser = async (id: number) => {
　...
};

let user;

try {
  user = await getUser(1);
  // ... (a lot of code)
} catch (error) {
  console.log("There was an error");
}

console.log(usr); // ← ReferenceError: Can't find variable: usr

I got an actual error from the typo, but this code is still not ideal because I can accidentally redefine the user object, like below.

const wait = (duration: number) => {
  ...
};

const getUser = async (id: number) => {
　...
};

let user;

try {
  user = await getUser(1);
  // ... (a lot of code)
} catch (error) {
  console.log("There was an error");
}

user = 1 // ← ❌ It might lead to a bug.

Solution

It's much simpler and more readable, don't you think?
Furthermore, the user variable is immutable and won't lead to unexpected errors.

const wait = (duration: number) => {
  ...
};

const getUser = async (id: number) => {
　...
};

const catchError = async <T>(promise: Promise<T>): Promise<[undefined, T] | [Error]> => {
  return promise
    .then((data) => {
      return [undefined, data] as [undefined, T];
    })
    .catch((error) => {
      return [error];
    });
};

const [error, user] = await catchError(getUser(1));

if (error) {
  console.log(error);
}

console.log(user);

Please take a look at the video, which we have referenced. He explains it very carefully.

I have never actually used this pattern in actual work.I just wanted to hear your opinion on how practical it is.Because it was discussed in his Yotube comments and I wanted to know the answer. I’ll be exploring best practices based on the comments.👍

Happy Coding☀️

TypeScript Adventures with type-challenges – Day 1: Pick

Noah — Wed, 09 Oct 2024 18:08:49 +0000

Hello everyone.
I'm working through type-challenges to dive deeper into TypeScript.

Today, I’d like to share what I learned about the Pick.

- The challenge -

interface Todo {
  title: string
  description: string
  completed: boolean
}

type TodoPreview = MyPick<Todo, 'title' | 'completed'>

const todo: TodoPreview = {
    title: 'Clean room',
    completed: false,
}

Implement the built-in Pick generic without using it.
Constructs a type by picking the set of properties K from T.

- Description -

The challenge is to create your own version of the Pick utility type, which TypeScript provide as a standard utility.

- My solution -

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}

type MyPick<T, U extends keyof T> = {
  [k in U]: T[k];
};

type TodoPreview = MyPick<Todo, "title" | "completed">;

const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
};

- Explanation -

Let me explain, line by line.

On the first line, MyPick receives two arguments: T and U extends keyof T.

T：The base type that includes all properties.
U extends keyof T：Specifies the properties to include in the output type.

About keyof
About extends

On the second line,
It creates a new type which extracts only the specified properties from the given argument.

About Mapped Types such as [k in U]

As you can see below, a new type that excludes description from Todo is created by providing only title and completed to MyPick.

Happy Coding☀️

The difference between readonly and const in Type Script

Noah — Thu, 22 Aug 2024 02:44:44 +0000

These two features are similar in that they are both non-assignable.

Can you explain exactly it?

In this article, I will share the differences between them.

const prevents reassignment to a variable.

In this case, hisName is a variable that cannot be reassigned.

const hisName = 'Michael Scofield'

hisName = 'Lincoln Burrows'
// → ❌ Cannot assign to 'hisName' because it is a constant.

However, you can reassign to property.

const hisFamily = {
  brother: 'Lincoln Burrows'
}

hisFamily.brother = ''
// → ⭕️

hisFamily = {
  mother: 'Christina Rose Scofield'
}
// → ❌ Cannot assign to 'hisFamily' because it is a constant.

readonly prevents reassignment to a property.

For example, if you try to assign a value to brother with readonly, a compilation error will occur.

let hisFamily: { readonly brother: string } = {
  brother: 'Lincoln Burrows'
}

hisFamily.brother = ''
// → ❌ Cannot assign to 'brother' because it is a read-only property.

On the other hand, assigning to the variable itself is allowed.

let hisFamily: { readonly brother: string } = {
  brother: 'Lincoln Burrows'
}

hisFamily = {
  brother: ''
}
// → ⭕️

Conclusion

const makes the variable itself non-assignable, while readonly makes the property non-assignable.

By combining const and readonly, you can create an object where both the variable itself and the object's properties are immutable.

const hisFamily: { readonly brother: string } = {
  brother: 'Lincoln Burrows'
}

hisFamily.brother = ''
// ❌ Cannot assign to 'brother' because it is a read-only property.

hisFamily = {
  brother: ''
}
// ❌ Cannot assign to 'hisFamily' because it is a constant.

Happy Coding☀️

Cautions When Using readonly in TypeScript

Noah — Sat, 10 Aug 2024 12:56:16 +0000

The basic of readonly property

In Type Script, you can make the object of the properties of an object read-only.

const person: { readonly name: string  } = { name: 'Mike' }

person.name = 21;
// → Cannot assign to 'name' because it is a read-only property.

⚠️① readonly is only at compile-time

In the compiled JavaScript code, the readonly declaration is removed, so it will not be detected as an error at runtime.

⚠️② readonly is not recursive.

const person: {
  readonly name: string;
  readonly academicBackground: {
    primarySchool: string
  }
} = {
  name: 'Mike',
  academicBackground: {
    primarySchool: 'School A'
  }
}

person.academicBackground.primarySchool = 'School B'
// You can change `person.academicBackground.primarySchool`

If you want to make it read-only, also you need to put readonly to primarySchool.

const person: {
  readonly name: string;
  readonly academicBackground: {
    readonly primarySchool: string
  }
} = {
  name: 'Mike',
  academicBackground: {
    primarySchool: 'School A'
  }
}

person.academicBackground.primarySchool = 'School B'
// → Cannot assign to 'primarySchool' because it is a read-only property.

Readonly

When the number of properties increases, adding readonly to each one becomes cumbersome and increases the amount of code.
You can refactor by using Readonly.

const obj: {
  readonly a : string;
  readonly b: string;
  readonly c: string;
  readonly d: string;
} = {
  a: 'a',
  b: 'b',
  c: 'c',
  d: 'd'
}

// ↓

const obj: Readonly<{
  a : string;
  b: string;
  c: string;
  d: string;
}> = {
  a: 'a',
  b: 'b',
  c: 'c',
  d: 'd'
}

Happy Coding☀️

What is different between undefined and null in Java Script

Noah — Wed, 10 Jul 2024 11:47:56 +0000

I introduce that what is different between undefined and null because it is difficult to describe it exactly.

Understanding the Difference between undefined and null

In many programming languages, there is usually one way to represent "no value," such as null.
However, in JavaScript, there are two ways to represent "no value": null and undefined. This can be surprising and confusing for people coming to JavaScript from other languages.

💡Basics

null

null doesn't occur unless programmer Intentionally uses it.

undefined

On the other hand, undefined occurs naturally, even if you don't use it explicitly.

For example, if you declare a variable and it has no initial value, JavaScript will assign undefined to it.

let test;
console.log(test);
// → undefined

When accessing the property that doesn't exist in a object or the element that is not in array, it will automatically became undefined.

const object = {};
console.log(object.foo);
// → undefined

const array = [];
console.log(array[0]);
// → undefined

🔍JSON

undefined

When you use undefined for the value of an object's property and then convert that object to JSON using JSON.stringify, the property is removed from the JSON output.

console.log(JSON.stringify({ name: undefined }));
// → {}

null

On the other hand, when the value of property is null, it will retained .

console.log(JSON.stringify({ name: null }));
// → {"name": null}

👀Conclusion

It is easier to unify with undefined because undefined occurs naturally everywhere.

Happy Coding☀️