DEV Community: joyonto kumar roy

The number type in TypeScript.

joyonto kumar roy — Sun, 29 Jun 2025 07:41:07 +0000

In TypeScript, number is a primitive type that can hold all kinds of numbers including integers, floats, hexadecimal, binary, octal, and scientific notation.

let age: number = 25;
let price: number = 99.99;

Usage in TypeScript with type annotation:

let score: number = 90;
let height: number = 5.9;
let hex: number = 0xff;

Useful Number Methods:
toFixed()
Rounds the number to a fixed number of decimal places:

let pi = 3.14159;
console.log(pi.toFixed(2)); // "3.14"

toExponential():
Converts to scientific notation:

let big = 123456;
console.log(big.toExponential()); // "1.23456e+5"

toString(radix):
Converts number to string in specified base:

let num = 255;
console.log(num.toString(16)); // "ff"
console.log(num.toString(2));  // "11111111"

Type Guarding:
Ensure type safety when using number | string:

function double(x: number | string) {
  if (typeof x === "number") {
    return x * 2;
  }
  return parseFloat(x) * 2;
}

Special Numeric Values:

let a = 1 / 0;          // Infinity
let b = -1 / 0;         // -Infinity
let c = parseInt("abc"); // NaN (Not a Number)

You should always check for isNaN() when doing conversions.

Math Library Functions:

Math.round(3.6);   // 4
Math.floor(3.9);   // 3
Math.ceil(3.1);    // 4
Math.abs(-10);     // 10
Math.pow(2, 3);    // 8
Math.sqrt(16);     // 4
Math.random();     // Random number between 0 and 1

Using Enums with Numbers:

enum Size {
  Small = 1,
  Medium = 2,
  Large = 3
}

let selected: Size = Size.Medium;

Enums are great when you need readable numeric identifiers.

Custom Type Guard:

function isNumber(val: unknown): val is number {
  return typeof val === "number" && !isNaN(val);
}

Number() constructor বা wrapper:
In JavaScript/TypeScript, the Number() function is used to convert other types (like strings or booleans) to a number. It can also be used as a wrapper object, though this is less common and generally discouraged.

let n = new Number(5);  // object wrapper (not primitive)
typeof n; // "object"

isNaN() vs Number.isNaN()
New developers often don't know the difference between the global isNaN() function and Number.isNaN(). It would be good to mention this.

isNaN("abc"):; // true (coerces to NaN)
Number.isNaN("abc"); // false (doesn't coerce)

Number parsing functions:
Mentioning the Number() function alongside parseInt() and parseFloat() increases completeness.

Number("123.45"); // 123.45

Type narrowing with isFinite():
When dealing with scientific or dynamic values, isFinite() becomes helpful.

Number.isFinite(Infinity); // false

The string type in TypeScript.

joyonto kumar roy — Sat, 28 Jun 2025 14:37:04 +0000

The string type is a primitive type that holds a text value.
In TypeScript, the string type is a type that can only hold text values (such as "Hello", 'World', or template strings).

let name: string = "Joyonto";

Here, the variable name can only accept string values.

With the string type, you can use text formatting, string methods (like length, toUpperCase(), etc.), and template literals.

Additionally, in TypeScript, you can define more specific and safer types using literal strings, union strings, and template literal types.

The two main ways to use the string type.

1. Declaring the type normally:

let city: string = "Dhaka";

2. Type inference (TypeScript automatically infers the type):
let country = "Bangladesh";

There are different ways to write strings.

Double Quotes:
let name: string = "Joyonto";
Single Quotes:
let message: string = 'Hello';
Backticks (Template Literals — Very Important)
`let name = "Joyonto";

let greeting = Hello, ${name}!;`

All JavaScript built-in string methods work with the string type in TypeScript:

let text: string = "Hello World";

text.length;            // 11
text.toUpperCase();     // "HELLO WORLD"
text.toLowerCase();     // "hello world"
text.includes("Hello"); // true
text.split(" ");        // ["Hello", "World"]
text.replace("World", "TypeScript"); // "Hello TypeScript"

- Literal Types in String:
In TypeScript, you can use literal value types with strings:

let status: "success" | "error" | "pending";

status = "success"; // valid
status = "loading"; // Error: "loading" is not assignable

- Union of String Types

type Role = "admin" | "user" | "guest";

let myRole: Role;

myRole = "admin";  // ✅
myRole = "manager"; // ❌

- String Enums

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT"
}

let dir: Direction = Direction.Left;

- String type parameter in a function

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

greet("Joyonto"); // "Hello, Joyonto!"

- Optional, Default, and Nullable String

function printMessage(msg?: string) {
  console.log(msg ?? "No message");
}

let username: string | null = null;

- Utility Types + String

type Person = { name: string; age: number };
type Keys = keyof Person; // "name" | "age"

- String Literal Types with Functions (Narrowing)

type NotificationType = "success" | "error";

function showNotification(type: NotificationType) {
  if (type === "success") {
    console.log("🎉 Success!");
  } else {
    console.log("❌ Error!");
  }
}

Here, TypeScript uses type narrowing to understand that if the type is "success", then the other branch must be "error".

- as const with string literals:

const role = "admin" as const;

This creates an immutable string literal type, where role cannot be any other string.

- Type Guards for String

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

When the type is unknown, it is checked using typeof like this to handle the string.

- Utility Type — Record with string

type LangText = Record<string, string>;

const texts: LangText = {
  title: "Hello",
  description: "Here is the description",
};

With Record, you can create any key-value pair type where both the key and value are strings.

Some real-life examples:

type Gender = "male" | "female" | "other";
function handleGenderChange(g: Gender) {
  // do something
}

type Status = "success" | "error";

function showToast(status: Status) {
  if (status === "success") {
    alert("Submitted successfully!");
  }
}

Using TypeScript’s string type in a React.js project: Hello.tsx (a component that accepts string type props).

import React from "react";

type HelloProps = {
  name: string; 
};

const Hello: React.FC<HelloProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Hello;

App.tsx

import React from "react";
import Hello from "./Hello";

const App: React.FC = () => {
  const userName: string = "Joyonto";
  return (
    <div>
      <Hello name={userName} />
    </div>
  );
};

export default App;

TypeScript Types — Everything at a Glance

joyonto kumar roy — Sat, 28 Jun 2025 14:15:39 +0000

TypeScript is a layer on top of JavaScript that brings type safety to our code. This helps catch errors early and makes the code easier to read and maintain.

In today’s article, we’ll dive into all the important types in TypeScript. We’ll provide examples based on real-life scenarios so that both beginners and experienced developers can benefit.

We will divide the types into three main categories:

Primitive Types
Special Types
Complex Types

Primitive Types:

✅ string holds text or string values.
let username: string = "Sadia";
Use cases: user name, messages, titles, etc.

✅ number holds whole numbers or decimal values.
let price: number = 299.99;
let age: number = 25;
Use cases: age, price, quantity, etc.

✅ boolean holds a true or false value.
let isLoggedIn: boolean = true;
Use cases: login status, condition checks, etc.

✅ bigint is used to store very large numbers.
let population: bigint = 9007199254740991n;
Use cases: large data like bank account numbers.

✅ symbol is always unique. Used as unique keys in objects.
let id: symbol = Symbol("id");
Use cases: unique properties or secret keys.

✅ undefined means a variable has been declared but not assigned any value.
let result: number | undefined;
Use cases: variable is declared but still holds no value.

✅ null is used to intentionally indicate "no value".
let selectedUser: string | null = null;
Use cases: when you want to explicitly say "no value".

Special Types:

✅ any can hold values of any type and turns off type checking.
let data: any = "Hello";
data = 123;
Use case: When the type is unknown, but should be used with caution.

✅ unknown can hold any type like any, but you must check the type before using it.
let input: unknown = "Text";
if (typeof input === "string") {
  console.log(input.toUpperCase());
}
Use case: A safer alternative to any when handling unknown data.

✅ void is used when a function doesn’t return anything.
function logMessage(message: string): void {
  console.log(message);
}
Use case: For functions that perform an action but don’t return a value.

✅ never is used when a function never returns (e.g., throws an error or has an infinite loop).
function throwError(): never {
  throw new Error("Something went wrong!");
}
Use case: For functions that never finish or always fail.

Complex Types:

✅ array stores multiple values of the same type.
let numbers: number[] = [1, 2, 3];
let fruits: string[] = ["apple", "banana"];

✅ tuple stores a fixed number of values of different types.
let user: [string, number] = ["Alice", 30];
Use case: When you need to store mixed-type values in a fixed order.

✅ object stores data as key-value pairs.
let person: { name: string; age: number } = {
  name: "Tanvir",
  age: 27,
};

✅ function can have defined parameter and return types.
function add(a: number, b: number): number {
  return a + b;
}

✅ union allows a variable to be one of multiple types.
let value: string | number = "Hello";
value = 42;

✅ intersection combines multiple types into one, requiring all their properties.
type Admin = { role: string };
type User = { name: string };
type AdminUser = Admin & User;

const admin: AdminUser = {
  role: "superadmin",
  name: "Karim",
};

✅ literal allows a variable to have specific, fixed values.
let status: "success" | "error" = "success";

✅ enum creates a named set of constant values.
enum Direction {
  Up,
  Down,
  Left,
  Right,
}

let move: Direction = Direction.Up;

In the next part, we will dive deep into all the important TypeScript types that will help you learn TypeScript more thoroughly. We will explore the usage of Primitive, Union, Intersection, Tuple, Enum, Interface, Generics, and Utility Types with real-world examples and detailed explanations.

What is TypeScript? Explain with a simple real-life example.

joyonto kumar roy — Sat, 28 Jun 2025 12:43:20 +0000

When people hear “TypeScript,” many assume that you need to know programming to understand it.
But that’s not true. Today, we’ll understand TypeScript in real-life terms — without writing any code.

Whether you’re a complete beginner or even a programmer who struggles to understand TypeScript — this post is for you.

TypeScript is a programming language built on top of JavaScript that helps prevent mistakes by warning you in advance.

JavaScript quietly accepts whatever we write — whether it’s right or wrong.

TypeScript says:

“Hold on — there’s a mistake here. Fix it first, then I’ll run it.”

It’s a language that catches your mistakes while you’re writing code.
As a result, the software becomes much more reliable and secure.

🎯 Real-Life Example 1: Online Form

Imagine you’re entering your date of birth in a field on a government website.

✅ Scenario 1: Like TypeScript

If you accidentally type “Rahim” in the date of birth field, the form immediately says —

❌ "Please enter a valid date"
👉 TypeScript works exactly like this — it immediately stops you when you give the wrong input.
❌ Scenario 2: Like JavaScript

You type whatever you want in the date of birth field — “abc”, “Rahim”, “123” — and the form accepts it.
But later, the wrong date gets saved on the server, which causes issues in the system.

👉 JavaScript works like this — it doesn’t say anything even if you enter wrong input.

🏪 Real-Life Example 2: Shopkeeper vs. Customer
Imagine you work in a shop.

With JavaScript:

A customer comes to buy something. You give them the product without asking.
Later you realize — they didn’t pay!

With TypeScript:

If the customer hasn’t paid, you don’t give the product under any circumstances.
You make sure the payment is complete before handing over the product.

👉 TypeScript checks first: Is everything okay?
🛠️ When / Why to Use TypeScript

✅ When working on large projects:

When an app has many features, many pages, and many developers — maintaining code with JavaScript becomes difficult.
TypeScript warns you in advance about where mistakes are happening.

🔍 Example: E-commerce sites (Daraz, Amazon), banking apps, large SaaS products

✅ When working in a team:

If you work alone, it’s easier to spot mistakes. But in a team, everyone works on different files — making it harder to find errors.
TypeScript clearly shows who expects what type of data.

🔗 Benefits:

The input/output types of functions are clear New developers can easily understand the code

✅ When using API data

When you receive data from a REST API or GraphQL API, TypeScript can check whether the data format is correct.

📦 Example:
If the API says there is user.name, but you mistakenly write user.fullName — TypeScript will immediately warn you.

✅ When using a library or framework (React, Angular, etc.)

Frameworks like React, Angular, Next.js work very well with TypeScript.
Using TypeScript allows better control over the props and types of components.

✅ When creating reusable functions/components

If you write functions that will be used in many places, defining types with TypeScript reduces the chances of mistakes.

🔁 Reusability increases
🔍 Bugs decrease

✅ If you want future-proof code

When you write code with TypeScript, it becomes easy for others—or even yourself—to understand it in the future.
This makes refactoring, debugging, and documentation much easier.

Complete TypeScript Setup Guideline

joyonto kumar roy — Fri, 27 Jun 2025 14:22:30 +0000

1. Install Node.js and npm

To run TypeScript, you must have Node.js and its package manager npm installed. Download: Go to https://nodejs.org and download the LTS version.Verify Installation:

Open your terminal and run:

node -v npm -v

You should see the version numbers of Node.js and npm if everything is installed correctly.

2. Create a New Project Folder

Create a folder where you'll set up your TypeScript project:
mkdir my-ts-project cd my-ts-project

3. Initialize Your Project with npm

Run the following command to generate a package.json file:

npm init -y
The -y flag automatically accepts all default values.

4. Install TypeScript

Install TypeScript as a development dependency:

npm install typescript --save-dev

5. Create TypeScript Configuration File

Generate the tsconfig.json file, which stores the configuration settings for the TypeScript compiler:

npx tsc --init
This will create a default config file. You can later customize it based on your project's needs.

6. Create Your First TypeScript File
Create a folder named src and add a file named index.ts inside it:

mkdir src touch src/index.ts

Now, add the following code inside src/index.ts:

function greet(name: string): string { returnHello, ${name}!; } console.log(greet("Joyonto"));

7. Compile TypeScript into JavaScript

To compile your TypeScript code, run:
npx tsc

This will compile your .ts file into a .js file. By default, it will create the compiled file in the same folder unless you specify an outDir in tsconfig.json.

Example:
src/index.ts → src/index.js

8. Run the Compiled JavaScript File

Now run your JavaScript file with Node.js:
node src/index.js

You should see the output:
Hello, Joyonto!

9. (Optional) Add Scripts to package.json

To simplify your workflow, you can add scripts to your package.json like this:

"scripts": { "build": "tsc", "start": "node src/index.js" }

Now you can run:

npm run build # Compiles the TypeScript code npm start # Runs the compiled JavaScript