📘
NavDoc by Bash School
GithubContact
📘
NavDoc by Bash School
  • 🎓Introduction
  • 🐢Getting Started
  • ⚡Changelog
  • 👨‍🚀Maintainers
  • 🛣️Roadmap
  • Fundamentals
    • The Internet
      • Introduction
      • What is a URL
      • What is a port
      • The DNS protocol
      • The TCP protocol
      • The UDP protocol
      • The Web
      • The HTTP protocol
      • Hyperlinks
      • What is a Web browser
      • What is a Web server
    • HTML
      • Your first HTML page
      • Text tags
      • Attributes
      • Links
      • Images
      • Lists
      • Head Tags
      • Container tags
    • CSS
      • Introduction
      • Colors
      • selectors
      • Cascade
      • Specificity
      • Units
      • Advanced selectors
      • Typography
      • The box model
      • The display property
      • Responsive design
  • JavaScript
    • Basics
      • Introduction
      • Literals , Identifiers, Variables
      • Comments
      • The difference between let, const and var
      • Types
      • Operators and expressions
      • Arithmetic operators
      • The assignment operator
      • Operators precedence
      • Strings
      • Numbers
      • Semicolons, white space and sensitivity
      • Arrays
      • Conditionals
      • Loops
      • Functions
      • Objects
      • Arrays + functions
      • OOPS
      • Asynchronous
      • Scope, hoisting, event loop
      • ES Modules
      • Errors and exceptions
      • Built-in objects
        • The global object
        • Object properties
        • Number
        • String
        • Math
        • JSON
        • Date
        • Intl
        • Set and Map
      • More operators
    • Nodejs
      • Getting Started
      • Installation
      • Hello World in Node
      • Modules
      • Packages
      • File Handling
      • HTTP Request
      • Processing Files
      • HTTP
    • Express.js
      • Getting Started
      • Middleware
      • Serve Static Assets
      • How to Send Files to the Client
      • Sessions
      • Validate Input
      • Sanitizing Data
      • Forms
      • File Uploads
    • React
      • Setting up a React project with Vite
      • React Components
      • Introduction to JSX
      • Using JSX to compose UI
      • The difference between JSX and HTML
      • Embedding JavaScript in JSX
      • Handling user events
      • Managing state
      • Component props
      • Data flow
      • Lifecycle events
      • Managing forms in React
      • Install the React Developer Tools
      • Installing Tailwind CSS in a React app
      • Build a counter in React
    • TypeScript
      • Key Benefits
      • Types of Languages
      • The Need for TypeScript
      • What is TypeScript?
      • The tsc Compiler
      • Basic Types in TypeScript
      • tsconfig
      • Interfaces
      • Types
      • Arrays in TypeScript
      • Enums
      • Exporting and importing
    • MongoDB
      • SQL vs. NoSQL Databases
      • Installing MongoDB
      • MongoDB Databases and Collections
      • Working with Documents
      • MongoDB Operators
      • Sorting, Indexing & Searching
      • Built-in Methods
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub
  1. JavaScript
  2. TypeScript

Types

Types in TypeScript allow you to define custom data structures and enforce specific constraints on the data. They are similar to interfaces but offer additional features.

Example Type:

type User = {
    firstName: string;
    lastName: string;
    age: number;
};

1. Unions

Unions allow you to specify that a value can be one of several types. This is useful when a variable or parameter can accept multiple data types.

Example:

type StringOrNumber = string | number;

function printId(id: StringOrNumber) {
    console.log(`ID: ${id}`);
}

printId(101);     // Output: ID: 101
printId("202");   // Output: ID: 202

2. Intersection

Intersection types combine multiple types into one. This allows you to create a type that has all properties of the individual types.

Example:

type Employee = {
    name: string;
    startDate: Date;
};

type Manager = {
    name: string;
    department: string;
};

type TeamLead = Employee & Manager;

const teamLead: TeamLead = {
    name: "harkirat",
    startDate: new Date(),
    department: "Software developer"
};

In this example, TeamLead is an intersection of Employee and Manager, meaning it must have all properties defined in both types.

3. Type Aliases

Type aliases allow you to create custom names for types, making your code more readable and maintainable.

Example:

type Point = {
    x: number;
    y: number;
};

type Rectangle = {
    topLeft: Point;
    bottomRight: Point;
};

const rect: Rectangle = {
    topLeft: { x: 0, y: 0 },
    bottomRight: { x: 10, y: 10 }
};

4. Literal Types

Literal types allow you to specify exact values that a variable can have.

Example:

type Color = "red" | "green" | "blue";

function printColor(color: Color) {
    console.log(`Selected color: ${color}`);
}

printColor("red");   // Output: Selected color: red

Summary

  • Types in TypeScript allow you to define custom data structures and enforce specific constraints on the data.

  • Unions and intersections provide flexibility in specifying variable types and combining multiple types.

  • Type aliases improve code readability by creating custom names for complex types.

  • Literal types allow you to specify exact values that variables can have, enhancing type safety and expressiveness in your code.

PreviousInterfacesNextArrays in TypeScript

Last updated 12 months ago

Was this helpful?