The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Basic TypeScript Syntax

Next ►
►

In this section, we will explore the fundamental syntax of TypeScript, which is a superset of JavaScript that adds static typing to the language. Understanding these basics will help you write more robust and error-free code. Let's dive into the key concepts of TypeScript syntax.

Key Concepts

  1. Type Annotations

    • TypeScript allows you to specify types for variables, function parameters, and return values.
    • Syntax: let variableName: type = value;

  2. Basic Types

    • TypeScript supports several basic types, including:
      • number: Represents both integer and floating-point numbers.
      • string: Represents text data.
      • boolean: Represents true/false values.
      • any: A type that can hold any value, used when you want to opt-out of type checking.
      • void: Used for functions that do not return a value.
      • null and undefined: Represent absence of value.

  3. Arrays

    • Arrays can be typed using the element type followed by [].
    • Syntax: let arrayName: type[] = [value1, value2, ...];

  4. Tuples

    • Tuples allow you to express an array with a fixed number of elements whose types are known.
    • Syntax: let tupleName: [type1, type2] = [value1, value2];

  5. Enums

    • Enums allow you to define a set of named constants.
    • Syntax: 
      enum EnumName {
  Constant1,
  Constant2,
  ...
}

  6. Functions

    • Functions can have typed parameters and return types.
    • Syntax: 
      function functionName(param1: type1, param2: type2): returnType {
  // function body
}

  7. Interfaces

    • Interfaces define the shape of an object, specifying what properties it should have.
    • Syntax: 
      interface InterfaceName {
  property1: type1;
  property2: type2;
}

Practical Examples

Example 1: Type Annotations

let age: number = 25;
let name: string = "Alice";
let isStudent: boolean = true;

Explanation:

  • age is a number, name is a string, and isStudent is a boolean. Type annotations help catch errors at compile time.

Example 2: Arrays and Tuples

let numbers: number[] = [1, 2, 3, 4];
let user: [string, number] = ["Alice", 25];

Explanation:

  • numbers is an array of numbers, and user is a tuple containing a string and a number.

Example 3: Enums

enum Color {
  Red,
  Green,
  Blue
}

let favoriteColor: Color = Color.Green;

Explanation:

  • Color is an enum with three constants. favoriteColor is assigned the Green constant.

Example 4: Functions

function greet(name: string): string {
  return "Hello, " + name;
}

console.log(greet("Alice"));

Explanation:

  • greet is a function that takes a string parameter and returns a string. The function concatenates "Hello, " with the provided name.

Example 5: Interfaces

interface Person {
  name: string;
  age: number;
}

let person: Person = {
  name: "Alice",
  age: 25
};

Explanation:

  • Person is an interface with two properties. The person object adheres to this interface.

Exercises

Exercise 1: Type Annotations

Task: Declare a variable height with a type annotation of number and assign it a value of 180.

Solution:

let height: number = 180;

Exercise 2: Arrays

Task: Create an array fruits that contains the strings "apple", "banana", and "cherry".

Solution:

let fruits: string[] = ["apple", "banana", "cherry"];

Exercise 3: Functions

Task: Write a function add that takes two parameters of type number and returns their sum.

Solution:

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

console.log(add(5, 10)); // Output: 15

Feedback on Common Mistakes:

  • Ensure that you use the correct type annotations for variables and function parameters.
  • Remember that TypeScript is case-sensitive, so number and Number are different.

Conclusion

In this section, we covered the basic syntax of TypeScript, including type annotations, basic types, arrays, tuples, enums, functions, and interfaces. These concepts form the foundation of TypeScript programming and will be essential as you progress through the course. In the next module, we will start applying these concepts to work with Playwright, a powerful tool for browser automation.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved