DEV Community

Cover image for Part 2: TypeScript Basics
Bobby Hall Jr
Bobby Hall Jr

Posted on • Updated on

Part 2: TypeScript Basics

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';
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
};
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.


Subscribe to my newsletter where you will get tips, tricks and challenges to keep your skills sharp. Subscribe to newsletter



Buy Me A Coffee

Top comments (2)

Collapse
 
xkeshav profile image
Keshav Mohta

Nice work.
Query: Why do we add es6 concepts like let const, arrow function as typescript feature

Collapse
 
bobbyhalljr profile image
Bobby Hall Jr • Edited

Good point! Those Es6 concepts are not a TypeScript feature but i wanted the person who read the blog post to have updated (Es6) code to learn from.