🧱 TypeScript – Basic Syntax Explained with Examples (2025 Guide)

🧲 Introduction – Understanding TypeScript Syntax

TypeScript adds a powerful type system to JavaScript, allowing you to catch errors early and write more maintainable code. This guide introduces you to TypeScript’s basic syntax, complete with examples and explanations to help you understand how each part works.

🎯 In this guide, you’ll learn:

• How to declare variables with types
• How to annotate functions and arrays
• How TypeScript infers types automatically
• How to use unions, tuples, enums, and aliases

🧩 1. Variable Declarations with Type Annotations

let name: string = "TypeScript";
const age: number = 25;
var isAdmin: boolean = true;

🔍 Explanation:

• name: string → Declares a variable of type string.
• age: number → Holds numeric data.
• isAdmin: boolean → Stores a boolean value (true or false).
• let and const are preferred over var for modern usage.

🔁 2. Arrays and Tuples

🔹 Arrays

let fruits: string[] = ["apple", "banana"];
let scores: number[] = [90, 85, 100];

🔍 Explanation:

• string[] → An array that can only contain strings.
• number[] → An array restricted to numbers only.

🔹 Tuples

let user: [string, number] = ["Alice", 30];

🔍 Explanation:

• [string, number] → A tuple with a fixed order: first a string, then a number.
• Tuples allow multiple types and preserve the sequence of values.

🧮 3. Function Type Annotations

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

🔍 Explanation:

• name: string → Enforces that the argument must be a string.
• : string after the parenthesis → The function must return a string.
• If any other type is used, TypeScript will throw a compile-time error.

🧱 4. Object Types

let person: { name: string; age: number } = {
  name: "Bob",
  age: 40
};

🔍 Explanation:

• { name: string; age: number } defines the shape of the object.
• The person object must include name (as a string) and age (as a number).

🧠 5. Type Inference

let city = "London"; // Inferred as string

🔍 Explanation:

• TypeScript automatically infers city as a string based on the initial value.
• You don’t need to explicitly declare the type unless required for clarity or tooling.

🔄 6. Union and Literal Types

let status: "success" | "error" = "success";
let id: number | string = 101;

🔍 Explanation:

• "success" | "error" → The status variable must be either "success" or "error".
• number | string → Allows either a number or a string for id.
• This makes code safer and clearer when specific values are expected.

🧱 7. Type Aliases

type User = {
  name: string;
  isActive: boolean;
};

let admin: User = {
  name: "Eve",
  isActive: true
};

🔍 Explanation:

• type User creates a reusable alias for an object structure.
• You can now use User anywhere instead of rewriting the object type every time.

🔐 8. Enums

enum Role {
  User,
  Admin,
  SuperAdmin
}

let role: Role = Role.Admin;

🔍 Explanation:

• enum Role defines a set of named constants.
• Role.Admin → The variable role is assigned the enum member Admin.
• Internally, TypeScript assigns numeric values starting from 0 unless specified otherwise.

🧰 9. Interfaces (Preview)

interface Product {
  title: string;
  price: number;
}

const item: Product = {
  title: "Book",
  price: 499
};

🔍 Explanation:

• interface Product defines a structure that must include title and price.
• Interfaces are used like type aliases but are better suited for object contracts and extension.

📚 Summary – Recap & Next Steps

TypeScript enhances JavaScript with strict types, safer functions, and structured objects. Understanding its basic syntax helps prevent bugs and ensures cleaner code as your projects scale.

🔍 Key Takeaways:

• Use : to annotate types for variables, functions, and objects.
• TypeScript offers union types, tuples, and enums for advanced typing.
• Type inference works automatically but explicit annotations help with documentation.
• Type aliases and interfaces keep code reusable and maintainable.

⚙️ Real-World Relevance:
These syntax rules are foundational across modern tools like Angular, React, and Node.js. You’ll use them daily in any TypeScript-powered project.

❓ FAQs – TypeScript Basic Syntax

❓ Can I write JavaScript syntax in a TypeScript file?
✅ Yes. All valid JavaScript is also valid TypeScript.

❓ Are type annotations required in every variable or function?
✅ No. TypeScript can infer types, but annotations help prevent unexpected behaviors.

❓ Can I use custom types in basic syntax?
✅ Yes. Use type and interface to define custom types for reuse.

❓ What happens if I assign the wrong type?
✅ The TypeScript compiler (tsc) will throw an error and prevent compilation.