DEV Community: Noriuki

TypeScript Survival Guide (Part 2): Start Thinking in TypeScript

Noriuki — Tue, 28 Apr 2026 21:21:37 +0000

In Part 1, we covered the most common mistakes.

Now it’s time to shift how you think.

Because TypeScript is not just about adding types —
it’s about designing your code better.

1. Stop thinking in variables — think in models

Beginners often focus on typing variables:

let name: string = "John"

But real TypeScript starts when you model your data:

type User = {
  name: string
  age: number
}

Now you're not just typing values —
you're defining structures.

This makes your code easier to understand and reuse.

2. Model states, not just data

One of the biggest mindset shifts is modeling possibilities.

type Status = "loading" | "success" | "error"

This is powerful because:

it limits what can happen
it documents your logic
it prevents invalid states

Instead of asking:
“what values can this have?”

You already know the answer.

3. Let types guide your code

In JavaScript, you write code first and figure things out later.

In TypeScript, types help guide your implementation.

function createUser(user: User) {
  // your code here
}

Before writing logic, you already know:

what you receive
what shape it has
what is allowed

Types become a form of design.

4. Reduce ambiguity as early as possible

Good TypeScript is not about adding more types.

It’s about removing uncertainty.

Bad:

function process(data: any) {
  // unclear
}

Better:

function process(user: User) {
  // clear and predictable
}

The earlier you define structure,
the fewer problems you have later.

5. Think in constraints, not freedom

JavaScript gives you freedom.

TypeScript gives you boundaries.

And that’s a good thing.

Constraints:

prevent invalid states
guide other developers
make refactoring safer

The goal is not to allow everything —
it’s to allow only what makes sense.

Final thoughts

Once you start thinking in types:

You stop guessing.
You stop overchecking.
You start building with intention.

And that’s when TypeScript really clicks.

TypeScript Survival Guide (Part 1): Stop Making These Mistakes

Noriuki — Tue, 28 Apr 2026 21:19:30 +0000

If you're coming from JavaScript, TypeScript can feel overwhelming at first.

Suddenly, you have types, errors, and things that didn’t exist before.

This is a simple survival guide to help you avoid the most common mistakes.

1. Avoid using `any`

When I first started using TypeScript, I used any everywhere.

let value: any = "hello"

It works — but it defeats the whole purpose of TypeScript.

You're basically going back to plain JavaScript.

👉 Use any only when you really have no other option.

2. Prefer `unknown` over `any`

If you don’t know the type yet, use unknown.

let value: unknown = "hello"

The difference is:

any lets you do anything (no safety)
unknown forces you to check the type first

Example:

function print(value: unknown) {
  if (typeof value === "string") {
    console.log(value.toUpperCase())
  }
}

This makes your code safer and more predictable.

3. Always type your functions

JavaScript:

function sum(a, b) {
  return a + b
}

TypeScript:

function sum(a: number, b: number): number {
  return a + b
}

Now it's clear:

what the function expects
what it returns

4. Types are not just rules — they are documentation

Good types make your code easier to read.

type User = {
  name: string
  age: number
}

Now anyone can understand your data structure instantly.

5. Learn type narrowing (this is more important than it looks)

TypeScript can "narrow" types based on checks you write.

Example:

function print(value: string | number) {
  if (typeof value === "string") {
    console.log(value.toUpperCase())
  } else {
    console.log(value.toFixed(2))
  }
}

Even though value can be multiple types,

TypeScript understands what it is inside each block.

This is called type narrowing.

👉 This is what makes TypeScript actually smart — not just strict.

Final thoughts

TypeScript is not just about avoiding errors.

It's about writing clearer, more predictable code.

At first, it might feel slower.

But once you get used to it, it becomes hard to go back to JavaScript without types.

5 Simple Practices That Help Me Write Cleaner Code

Noriuki — Mon, 09 Mar 2026 22:44:04 +0000

When I first started coding, my main goal was simple: make the program work.

If it ran without errors, I considered the job done. But as projects grew in size and complexity, I realized something important — working code isn't always easy to read or maintain.

Sometimes I would revisit code I wrote weeks earlier and think: "Why did I write it like this?"

Because of that, I started paying more attention to small habits that make code easier to understand and maintain over time.

Here are five simple practices I use to keep my code cleaner in day-to-day development.

1. Comment Strategically: Add Value, Don't Just Explain

Comments can be helpful, but I try to avoid adding them everywhere.

Most of the time, clear naming and well-structured code already explain what the code is doing. Instead, I prefer to add comments when the logic is complex or when there's a business rule that isn't obvious.

For example, a comment like this usually doesn't add much value:

// check if the user is active
if (user.isActive) {
  sendNotification(user);
}

The code already explains what is happening.

However, comments can be very useful when they provide context:

// Users created before 2022 don't have the "isActive" field,
// so we assume they are active by default
const isActiveUser = user.isActive ?? true;

In this case, the comment explains why the code exists, not just what it does.

2. Group Imports Logically

Another small habit that improves readability is organizing import statements.

Instead of keeping all imports in a single block, I like grouping them by type. For example: external libraries, internal components, and utility functions.

// external libraries
import React from "react";

// components
import Button from "@/components/Button";
import Card from "@/components/Card";

// utilities
import formatDate from "@/utils/formatDate";

This makes it easier to understand where things are coming from and keeps the file structure cleaner.

3. Use Early Returns to Simplify Logic

A pattern I often use is early return.

Instead of wrapping the entire logic inside nested if statements, I prefer checking invalid conditions first and returning early.

Without early return:

if (user) {
  if (user.isActive) {
    showDashboard();
  }
}

With early return:

if (!user || !user.isActive) {
  return;
}

showDashboard();

This helps avoid deep nesting and makes the main flow of the function easier to read.

4. Use Clear and Descriptive Names

Naming is one of the most important aspects of writing clean code.

Variables and functions should clearly describe their purpose.

For example:

// not very clear
const d = new Date();

// clearer
const currentDate = new Date();

Good names make code easier to read and reduce the need for additional comments.

5. Keep Functions Focused on One Responsibility

I try to keep functions focused on a single responsibility.

When a function starts doing too many things, it becomes harder to read, test, and maintain.

Breaking logic into smaller functions often makes the code more modular and easier to understand.

Final Thoughts

Clean code isn't about writing perfect code. It's about writing code that other developers — and your future self — can easily understand.

Small habits like writing meaningful comments, organizing imports, using early returns, and choosing better names can make a big difference over time.

They may seem like small improvements, but they help keep codebases more readable and maintainable.

Authentication vs Authorization

Noriuki — Mon, 09 Mar 2026 22:40:00 +0000

When you're developing web applications, you'll frequently encounter the terms authentication and authorization. They often appear together, and sometimes they're even used interchangeably.

However, they represent different concepts that are essential for building secure applications.

Let's break them down.

What Is Authentication?

At its core, authentication is about confirming a user's identity.

It's the process the system uses to verify that you are who you claim to be.

A common example is logging into an application. When you enter your email and password, the system checks whether those credentials match what it has stored. If they do, you are authenticated.

Some common authentication methods include:

passwords
one-time codes (OTP)
biometrics like fingerprints or facial recognition
signing in with providers like Google or GitHub

At the end of the process, the system knows who the user is.

What Is Authorization?

Authorization happens after authentication.

Once the system knows who the user is, it needs to determine what that user is allowed to do.

For example, imagine an admin dashboard:

regular users can view their own data
moderators can edit content
administrators can manage users

Even though all of them are authenticated, they have different permissions.

Authorization is what controls those access levels.

A Simple Example

Imagine a web application with two types of users:

regular users
administrators

Authentication answers the question:

"Is this person really Alice?"

Authorization answers a different question:

"What is Alice allowed to do?"

For example:

Alice logs in → authentication
The system checks if Alice is an admin → authorization

Why the Difference Matters

Separating authentication and authorization helps make systems more secure and easier to manage.

It allows developers to:

verify user identities
control access to specific features
implement role-based permissions
protect sensitive data

Most modern applications rely on both processes working together.

Final Thoughts

Authentication and authorization are closely related, but they serve different purposes.

Authentication verifies who the user is
Authorization determines what the user can do

Understanding this distinction is an important step when building secure and scalable applications.

Understanding APIs in Simple Terms

Noriuki — Mon, 09 Mar 2026 21:56:38 +0000

If you're diving into web development, you've likely encountered the term API quite a bit. While APIs are fundamental to how modern software operates, they can seem a bit daunting for newcomers.

Let's break down what they are in straightforward terms.

What is an API?

API stands for Application Programming Interface.

Essentially, an API acts as a bridge that allows different software systems to communicate with each other. Instead of directly accessing a system's internal logic or its database, applications interact with it through a defined interface — the API.

A Simple Analogy

One way to understand an API is to think about a restaurant.

You are the customer
The kitchen represents the system
The waiter represents the API

You don't walk into the kitchen and cook your own meal. Instead, you tell the waiter what you want. The waiter brings your request to the kitchen, the kitchen prepares the food, and the waiter brings it back to your table.

The process is simple:

You make a request
The waiter takes it to the kitchen
The kitchen prepares the response
The waiter delivers it back to you

An API works in a very similar way. Your application sends a request to the API, the system processes it, and the API returns the response.

APIs on the Web

On the web, APIs commonly use HTTP requests.

Some common request types include:

GET – retrieve data
POST – send new data
PUT / PATCH – update existing data
DELETE – remove data

These requests are sent to specific endpoints, which are URLs that represent particular resources or actions.

For example:

GET /users
GET /users/10
POST /users

Each endpoint represents a resource or an action that the API can handle.

Why APIs Matter

APIs are essential to modern software development.

They allow applications to:

communicate with other systems
reuse existing services
integrate with external platforms
build scalable applications

Many well-known platforms provide APIs so developers can build on top of their services, including Google, Stripe, and GitHub.

Final Thoughts

APIs are one of the core building blocks of modern development.

Once you understand how they work, many parts of web development start to make a lot more sense.

If you're learning programming, experimenting with public APIs is a great way to understand how applications communicate and exchange data.

DEV Community: Noriuki

TypeScript Survival Guide (Part 2): Start Thinking in TypeScript

1. Stop thinking in variables — think in models

2. Model states, not just data

3. Let types guide your code

4. Reduce ambiguity as early as possible

5. Think in constraints, not freedom

Final thoughts

TypeScript Survival Guide (Part 1): Stop Making These Mistakes

1. Avoid using any

2. Prefer unknown over any

3. Always type your functions

4. Types are not just rules — they are documentation

5. Learn type narrowing (this is more important than it looks)

Final thoughts

5 Simple Practices That Help Me Write Cleaner Code

1. Comment Strategically: Add Value, Don't Just Explain

2. Group Imports Logically

3. Use Early Returns to Simplify Logic

4. Use Clear and Descriptive Names

5. Keep Functions Focused on One Responsibility

Final Thoughts

Authentication vs Authorization

What Is Authentication?

What Is Authorization?

A Simple Example

Why the Difference Matters

Final Thoughts

Understanding APIs in Simple Terms

What is an API?

A Simple Analogy

APIs on the Web

Why APIs Matter

Final Thoughts

1. Avoid using `any`

2. Prefer `unknown` over `any`