DEV Community: Jeferson Eiji

Understanding Decorators in TypeScript: A Clear and Practical Guide

Jeferson Eiji — Mon, 13 Apr 2026 14:04:18 +0000

What Are Decorators in TypeScript?

Decorators are a special kind of declaration in TypeScript that can be attached to classes, methods, accessors, properties, or parameters. They allow you to add annotations or meta-programming syntax for class declarations and members.

Think of decorators as functions that wrap or modify pieces of your code.

How Decorators Work

A decorator is a function applied to the thing it decorates (class, method, property, etc).
Decorators receive information about the decorated element, such as the target, key, and descriptor.
You can use them to alter behavior, add metadata, or even replace functionality.

Note: Decorators are an experimental feature and require "experimentalDecorators": true in tsconfig.json.

Types of Decorators

Class Decorators
Property Decorators
Method Decorators
Parameter Decorators

Example: Class and Method Decorators

// A simple class decorator
function Logger(constructor: Function) {
  console.log(`New instance created: ${constructor.name}`);
}

@Logger
class ExampleClass {
  sayHello() {
    console.log('Hello!');
  }
}

What happens: When an instance of ExampleClass is created, the Logger function logs the class name.

Method Decorator Example:

function LogMethod(target: Object, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`Called ${propertyKey} with`, args);
    return originalMethod.apply(this, args);
  };
}

class Calculator {
  @LogMethod
  add(a: number, b: number) {
    return a + b;
  }
}
// When you call new Calculator().add(1,2), it logs: "Called add with [1,2]"

Summary

Decorators are a powerful way to modify or annotate code in TypeScript.
They help with logging, validation, dependency injection, and more.
Always enable experimentalDecorators in your configuration file to use them.

Mastering Classes and Access Modifiers in TypeScript: Public, Private, Protected Explained

Jeferson Eiji — Wed, 08 Apr 2026 14:10:23 +0000

TypeScript offers robust support for object-oriented programming with classes, interfaces, and access modifiers. Understanding how to define and secure your class properties is key to writing maintainable and safe code.

Access Modifiers in TypeScript

public (default): Property or method can be accessed from anywhere.
private: Access is limited to within the class itself.
protected: Accessible in the class and its subclasses, but not from outside.

Example: Defining a Class with Access Modifiers

class Animal {
    public name: string;      // Accessible anywhere
    private age: number;      // Only inside Animal
    protected type: string;   // Animal and subclasses

    constructor(name: string, age: number, type: string) {
        this.name = name;
        this.age = age;
        this.type = type;
    }

    public getName() {
        return this.name;
    }

    private getAge() {
        return this.age;
    }
}

class Dog extends Animal {
    constructor(name: string, age: number) {
        super(name, age, "Dog");
    }

    public describeDog(): string {
        // Can use this.type (protected), not this.age (private)
        return `${this.name} is a ${this.type}`;
    }
}

const myDog = new Dog("Buster", 5);
console.log(myDog.name);          // Accessible (public)
// console.log(myDog.age);       // Error! age is private
// console.log(myDog.type);      // Error! type is protected
console.log(myDog.describeDog()); // Buster is a Dog

Key Takeaways

Use private for sensitive data.
Use protected if subclasses need access.
Use public for properties/methods that can be exposed.

Remember: Clearly marking your class fields helps enforce intended usage and prevents bugs!

What Are Declaration Files (.d.ts), and Why Are They Important in TypeScript?

Jeferson Eiji — Mon, 06 Apr 2026 14:10:25 +0000

What Are Declaration Files (.d.ts)?

In TypeScript, declaration files are files with the extension .d.ts. They provide type information about JavaScript code so that TypeScript can understand how existing JavaScript libraries or modules should be typed.

Why Are They Important?

Type Safety for JavaScript Libraries: Many popular JavaScript libraries do not come with TypeScript type definitions by default. Declaration files bridge this gap by describing the shape of modules, functions, classes, and variables in those libraries.
IntelliSense & Editor Support: Declaration files allow editors (like VS Code) to provide features such as code completion, parameter hints, and documentation popups even for plain JavaScript libraries.
Documentation: They serve as a form of live documentation for code, making it clearer how to use APIs, functions, or objects properly.
Compilation Checks: With accurate declaration files, TypeScript's compiler can catch errors early, before your code even runs.

How Are Declaration Files Used?

For libraries:
- TypeScript looks for a @types package (like @types/lodash) or a local .d.ts file.
- These files might be included with the library, but they are often installed separately for popular libraries.
For your own code:
- Create .d.ts files to describe global variables, extend existing modules, or share type information without exposing implementation details.

Example

Suppose you have a JavaScript module, math-utils.js:

// math-utils.js
function add(a, b) { return a + b; }
module.exports = { add };

You can write a corresponding declaration file:

// math-utils.d.ts
declare module "math-utils" {
  export function add(a: number, b: number): number;
}

Now, when you import math-utils in TypeScript, you get full type support.

Summary: Declaration files are critical for bringing static type checking and developer tooling to JavaScript libraries and codebases when using TypeScript. They ensure safer, more reliable, and more productive development.

How TypeScript Handles Type Compatibility

Jeferson Eiji — Mon, 30 Mar 2026 14:01:29 +0000

TypeScript uses a structural type system to check type compatibility, which means it focuses on the shape and structure of data, rather than explicit declarations. Here’s how it works:

Key Points:

Structural vs Nominal Typing: Unlike nominally typed languages (like Java or C#), TypeScript cares about what members an object has, not its name.
Compatibility Rules:
- If an object has at least the required properties and their types, it is considered compatible.
- Extra properties do not cause errors when assigning objects (known as ‘duck typing’).

Example: Object Compatibility

interface Point { x: number; y: number; }
let p: Point = { x: 1, y: 2 };
let q = { x: 1, y: 2, z: 3 };
p = q; // OK: q has at least the properties of Point (x, y)

Function Compatibility Example:

let a = (x: number) => 1;
let b = (x: number, y: string) => 1;
a = b; // Error: parameter count mismatch
b = a; // OK: extra parameters in b are ignored

Assignment Compatibility:

Functions: Can assign a function with fewer parameters to one expecting more (optional/extra parameters are allowed on the right side).
Classes: Instance members are checked, but private/protected members can restrict assignment.

Summary Table
| Feature | TypeScript compatibility rule |
|------------|--------------------------------------------------|
| Object | Shape-based (members must match) |
| Functions | Parameter count and types; extra params ignored |
| Classes | Instance members checked (private/protected count) |

Practically, TypeScript makes working with types flexible by looking at data structure rather than requiring strict inheritance or declarations.

Mastering unknown vs never Types in TypeScript: Differences and Use Cases

Jeferson Eiji — Wed, 25 Mar 2026 14:07:24 +0000

unknown Type

Represents any value, but is safer than any—you cannot use its value directly without type-checking or type assertion
Use when you want to accept any type but enforce type-safety downstream

Example:

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

Key Points:

Forces you to perform a type check before using the value
Useful in libraries for handling user input, JSON parsing, etc.

never Type

Represents values that never occur
Used as the return type for functions that never return (e.g., throw exceptions or have infinite loops)

Example:

function fail(message: string): never {
  throw new Error(message);
}

Key Points:

Helpful for exhaustive checks (e.g., switch statements)
Informs TypeScript that code after a never function is unreachable

When to Use Which?

Use unknown for any value you want type-checked later
Use never for impossible states or functions never meant to return

Understanding Generics in TypeScript for Improved Code Reusability

Jeferson Eiji — Mon, 23 Mar 2026 14:05:17 +0000

What Are Generics in TypeScript?

Generics are a feature in TypeScript that allow you to create reusable components that work with a variety of data types, rather than a single one. They enable you to write functions, interfaces, and classes that can operate with different data types while still maintaining type safety.

Why Use Generics?

Code Reusability: Write a function or a class once and use it for any data type.
Type Safety: TypeScript keeps track of the types used, avoiding runtime errors.
Flexibility: Functions and classes become more flexible and adaptable to changing requirements.

Example: Generic Function

Suppose you want a function to return the same argument passed to it:

function identity<T>(arg: T): T {
  return arg;
}

const num = identity(5);        // num is of type number
const str = identity("hello"); // str is of type string

In this example, the type T is a placeholder that will be replaced with the actual type when the function is used. This means you can use identity with any data type.

Example: Generic Interface

interface Box<T> {
  value: T;
}

const numberBox: Box<number> = { value: 123 };
const stringBox: Box<string> = { value: "TypeScript" };

Summary

Generics make your code more reusable, safer, and adaptable. They are especially useful in utility libraries, data structures, and APIs where flexibility across multiple data types is needed.

Mastering Union and Intersection Types in TypeScript: Quick Guide with Examples

Jeferson Eiji — Wed, 18 Mar 2026 14:08:25 +0000

Union Types:

Use union types when a variable or parameter can hold values of multiple types.
Syntax: typeA | typeB
Example:

let value: string | number;
value = "hello"; // valid
value = 42;      // valid
value = true;    // invalid

Intersection Types:

Use intersection types to combine multiple types into one.
The resulting type has all properties from each type.
Syntax: typeA & typeB
Example:

type A = { a: number };
type B = { b: string };
let obj: A & B = { a: 1, b: "hello" };

Key Differences:

Union (|): Accepts values that match any member type.
Intersection (&): Requires values to satisfy all member types.

Practical Example:
Suppose you have user types:

type Admin = { name: string; admin: true };
type User = { name: string; admin?: false };

type AnyUser = Admin | User;
// Can be either Admin or User

function greet(user: AnyUser) {
  console.log(`Hello, ${user.name}`);
}

When to Use Them:

Use unions when data can be of different shapes.
Use intersections to combine multiple requirements into a single type.

Understanding the Difference Between Interface and Type in TypeScript: When to Use Each

Jeferson Eiji — Mon, 16 Mar 2026 14:14:25 +0000

When working with TypeScript, developers often encounter two ways to define shapes for objects: interface and type. While they can look similar, there are important differences and best-use cases.

Key Differences

Extensibility:
- interface can be extended multiple times by declaration merging or by using the extends keyword.
- type is closed after its definition. You can't merge or reopen a type, but you can create new types by intersecting them.
Declaration:
- Use interface for defining the shape of objects, especially when you expect the structure to grow.
- Use type for composing types, unions, primitives, and tuples.
Implements:
- Classes can implement both interfaces and types, but interfaces work more naturally with class implementation.
Union and Intersection:
- Only type can create union types (type AorB = A | B) and intersection types (type AB = A & B).

Examples

Interface Example

interface User {
  name: string;
  age: number;
}

interface User {
  email: string;
}

// Merged into:
// { name: string; age: number; email: string }

Type Example

type User = {
  name: string;
  age: number;
};
// type User = { email: string } // Error: Cannot redeclare 'User'

type StringOrNumber = string | number;

When to Use Each

Use interface when:
- You want to model the shape of objects and classes
- You expect extensions (from libraries or other code)
- Declaration merging is desirable
Use type when:
- You need to use unions or intersections
- You want to alias primitives or tuples (e.g., type Name = string or type Point = [number, number])
- Complex type composition is required

Summary Table

Feature	`interface`	`type`
Extensible/mergeable	Yes	No
Supports unions	No	Yes
Suitable for objects	Yes	Yes
Use with primitives	No	Yes
Best for classes	Yes	Yes (but `interface` best)

In practice: Use interface for data shapes and type for type transformations and combinations.

How to Define Functions with Specific Argument and Return Types in TypeScript

Jeferson Eiji — Wed, 11 Mar 2026 14:04:26 +0000

TypeScript allows you to define functions with explicit argument and return types. This ensures type safety and helps catch errors at compile time.

Defining Argument and Return Types

You can annotate each parameter with its type and the return type after the function's parentheses.

Syntax:

function functionName(param1: Type1, param2: Type2): ReturnType {
  // function body
}

Example 1: Simple Addition

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

a and b are both required to be numbers.
The function returns a number.

Example 2: String Formatter

function greet(name: string): string {
  return `Hello, ${name}!`;
}

The parameter name must be a string.
The function returns a string.

Using Arrow Functions

You can also define typed arguments and return types in arrow functions.

const multiply = (x: number, y: number): number => x * y;

Benefits

Prevents passing or returning incorrect types
Improves code documentation and readability

Tip

If a function doesn’t return anything, use void as the return type:

function logMessage(msg: string): void {
  console.log(msg);
}

Understanding the Purpose of tsconfig.json in TypeScript Projects

Jeferson Eiji — Mon, 09 Mar 2026 14:58:24 +0000

What is tsconfig.json?

tsconfig.json is the configuration file used by TypeScript projects to specify compiler options, file inclusion/exclusion, and more. It guides the TypeScript compiler (tsc) on how to process and generate JavaScript from TypeScript code.

Main Purposes

Project Configuration: Defines which files are part of the TypeScript project and how they should be compiled.
Compiler Options: Controls transpilation aspects such as target ECMAScript version, module type, strictness, JSX handling, and more.
Includes/Excludes Management: Specifies which files/directories are included or excluded during compilation.
Type Checking Control: Can turn strict type checking options on or off globally or selectively.
Project References: Supports monorepos and large codebases through project references, improving build speed and modularity.

Example

A typical tsconfig.json structure:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "outDir": "dist"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

compilerOptions: Settings for the TypeScript compiler
include: Files to include
exclude: Files/directories to skip

In Summary

tsconfig.json centralizes project settings, ensuring consistent builds, better maintainability, and enabling advanced TypeScript features.

Understanding Enums in TypeScript: What They Are and How to Use Them

Jeferson Eiji — Wed, 04 Mar 2026 14:11:21 +0000

What Are Enums in TypeScript?

Enums, short for "enumerations," are a special feature in TypeScript used for defining sets of named constants. They make your code easier to read and maintain by grouping related values together and giving each one a descriptive name.

Why Use Enums?

Prevent magic numbers or strings in your code
Make code easier to understand and maintain
Catch errors at compile-time

How to Define and Use Enums

Numeric Enums (Default)

enum Direction {
  Up,
  Down,
  Left,
  Right
}

let move: Direction = Direction.Up;
console.log(move); // Output: 0

String Enums

enum Response {
  Yes = "YES",
  No = "NO"
}

function reply(answer: Response) {
  console.log(answer);
}
reply(Response.Yes); // Output: YES

Example Use Case

Suppose you build a navigation menu:

enum Menu {
  Home,
  About,
  Contact
}

function navigate(page: Menu) {
  if (page === Menu.Home) {
    // Navigate to home page
  }
}

Summary:

Enums organize sets of related constants
Use them for cleaner, safer TypeScript code
Both numeric and string enums are available

Tip: Always use enums to avoid hard-coding values when possible.

How to Define Arrays and Tuples in TypeScript

Jeferson Eiji — Mon, 02 Mar 2026 14:10:25 +0000

Arrays and tuples are key data structures in TypeScript for storing sets of values. Understanding how to define and use them is fundamental for type safety and clarity in your code.

Defining Arrays

Arrays hold multiple values of the same type. You can define arrays using either the type[] notation or the Array<type> generic form.

Example:

// Using type[]
const numbers: number[] = [1, 2, 3];

// Using Array<type>
const fruits: Array<string> = ["apple", "banana", "mango"];

Defining Tuples

Tuples allow you to store a fixed number of elements where each element may be of a different type.

Example:

// Tuple - [string, number]
const user: [string, number] = ["Alice", 25];

// Tuple with more elements
const point: [number, number, number] = [3, 4, 5];

Key Differences

Arrays: All elements are of the same type.
Tuples: Each position has a specific type and length is fixed.

When to Use Which?

Use arrays when you have a collection of items of the same type.
Use tuples when you have a fixed structure with known types per position.

Defining arrays and tuples properly helps TypeScript catch errors early and keeps your data structures clear and predictable.