TypeScript Core Concepts Explained for Absolute Beginners

ymir

Amir H. Moayeri

Posted on February 13, 2024

TypeScript Core Concepts Explained for Absolute Beginners

TypeScript, a superset of JavaScript, has taken the development world by storm with its focus on static typing. While similar to JavaScript, it adds an extra layer of type annotations, empowering developers to write more robust and maintainable code. But what are the core concepts that make TypeScript tick? Let's dive in and explore them with examples!

1. Type Annotations: The heart of TypeScript lies in explicitly defining the data types of variables, functions, and other constructs. This means no more guessing what type a variable holds, leading to fewer runtime errors and better code understanding.

Example:

let name: string = "John Doe"; // name must be a string
let age: number = 30;           // age must be a number
Enter fullscreen mode Exit fullscreen mode

2. Primitive Types: TypeScript provides fundamental building blocks like string, number, boolean, and more. These represent basic data types used throughout your code.

Example:

let isDone: boolean = true;  // isDone can be true or false
let price: number = 19.99;    // price is a floating-point number
let name: string = "John" // name is a string
Enter fullscreen mode Exit fullscreen mode

3. Arrays and Objects: Similar to JavaScript, TypeScript allows working with arrays and objects. However, you can define the types of elements within an array or the properties of an object, ensuring data consistency.

Example:

let numbers: number[] = [1, 2, 3]; // numbers must be an array of numbers
let person: { name: string, age: number } = { name: "Jane", age: 25 };
// person must have properties name (string) and age (number)
Enter fullscreen mode Exit fullscreen mode

4. Functions: Define clear expectations for function inputs and outputs using type annotations. This enhances code clarity and avoids unexpected behavior.

Example:

function add(x: number, y: number): number {
  return x + y;
}

const result = add(5, 10); // result will be a number (15)
Enter fullscreen mode Exit fullscreen mode

5. Interfaces: Create blueprints for objects, outlining the properties and their types. This ensures objects adhere to a specific structure, promoting consistency and reusability.

Example:

interface Product {
  id: number;
  name: string;
  price: number;
}

const product: Product = { id: 1, name: "T-shirt", price: 15.0 };
// product must have properties id (number), name (string), and price (number)
Enter fullscreen mode Exit fullscreen mode

6. Classes: Encapsulate data and behavior using classes. Similar to interfaces, you can define the types of properties and methods, leading to well-structured and maintainable code.

Example:

class User {
  name: string;
  age: number;

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

  greet() {
    console.log(`Hello, my name is ${this.name}!`);
  }
}

const user = new User("Alice", 35);
user.greet(); // Output: Hello, my name is Alice!
Enter fullscreen mode Exit fullscreen mode

7. Generics: Write flexible code that can work with different data types using generics. This reduces code duplication and promotes maintainability.

Example:

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

const number = identity(5); // number will be of type number
const string = identity("hello"); // string will be of type string
Enter fullscreen mode Exit fullscreen mode

Remember, this is just a glimpse into the vast world of TypeScript! Explore these concepts further and leverage them to create robust, type-safe applications that stand the test of time. Happy coding!

💖 💪 🙅 🚩
ymir
Amir H. Moayeri

Posted on February 13, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

! and ? in Typescript.
webdev ! and ? in Typescript.

October 17, 2024

Apa itu TypeScript?
webdev Apa itu TypeScript?

November 21, 2023

Coding Concepts - Generics
webdev Coding Concepts - Generics

June 21, 2018