Part 2: TypeScript Basics

#typescript #javascript #tutorial #beginners

Section 2: TypeScript Basics

In this section, we will delve into the basics of TypeScript. We will explore data types, variables, functions, and objects, and understand how to leverage TypeScript's type system to write safer and more maintainable code.

Data Types

TypeScript introduces several built-in data types that allow us to specify the kind of values a variable can hold. Here are some commonly used data types:

number: Represents numeric values, such as 5 or 3.14.
string: Represents textual data enclosed in single quotes ('') or double quotes ("").
boolean: Represents a logical value, either true or false.
array: Represents an ordered collection of elements of the same type.
tuple: Represents an array with fixed-length and specific types for each element.
enum: Represents a set of named constant values.
any: Represents any type, allowing flexibility but losing type safety.

let age: number = 30;
let name: string = 'John Doe';
let isStudent: boolean = true;
let numbers: number[] = [1, 2, 3, 4, 5];
let coordinates: [number, number] = [10, 20];
enum Color { Red, Green, Blue };
let favoriteColor: Color = Color.Blue;
let anyValue: any = 'Hello World';

Variables and Constants

In TypeScript, we can declare variables using the let keyword and constants using the const keyword. Variables declared with let can be reassigned, whereas constants declared with const are read-only and cannot be reassigned.

let age: number = 30;
const PI: number = 3.14;

Functions and Arrow Functions

TypeScript allows us to define the types of function parameters and return values. This provides clarity and helps prevent errors during development.

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

const multiply = (a: number, b: number): number => {
  return a * b;
};

Objects and Interfaces

In TypeScript, we can define the shape of an object using interfaces. Interfaces provide a way to enforce a contract and ensure that objects have specific properties and methods.

interface Person {
  name: string;
  age: number;
  greet: () => void;
}

const john: Person = {
  name: 'John Doe',
  age: 30,
  greet: () => {
    console.log(`Hello, my name is ${john.name} and I'm ${john.age} years old.`);
  }
};

john.greet();

Type Inference

TypeScript has a powerful type inference system that can automatically deduce the types of variables based on their initial values. This reduces the need for explicit type annotations in many cases.

let message = 'Hello, TypeScript!'; // TypeScript infers the type as string
let count = 5; // TypeScript infers the type as number

Type inference allows us to write concise code while maintaining type safety.

In the next section, we will dive deeper into TypeScript by exploring advanced concepts such as union and intersection types, type inference, generics, and type guards.