Introduction to Typescript

Typescript is a programming language that is used to create websites and applications. It is a superset of JavaScript, meaning that it has all the features of JavaScript, plus some additional features. Typescript is a great language to learn, as it is easy to understand and use. In this article, we will look at 20 important concepts in Typescript that devs should know.

1. Variables

A variable is a way of storing information in a program. Variables can store numbers, strings (text), and other types of data. In Typescript, variables are declared using the let const var keyword. For example, if we wanted to store the number 5 in a variable called myNumber, we would write the following code:

let myNumber = 5;
const myNumber2 = 5;
var myNumber3 = 5;

2. Data Types

Data types are the different types of data that can be stored in a variable. In Typescript, there are several different data types, including numbers, strings, booleans, and objects. For example, if we wanted to store the string "Hello World" in a variable called myString, we would write the following code:

let myString = "Hello World";

3. Operators

Operators are symbols that are used to perform operations on variables. In Typescript, there are several different operators, including arithmetic operators (+, -, *, /), comparison operators (==, !=, >, <, ===), and logical operators (&&, ||, !). For example, if we wanted to add the numbers 5 and 10 and store the result in a variable called myResult, we would write the following code:

let myResult = 5 + 10;

4. Functions

Functions are blocks of code that can be used to perform a specific task. In Typescript, functions are declared using the function keyword. For example, if we wanted to create a function called sayHello that prints the string "Hello World" to the console, we would write the following code:

function sayHello() {
  console.log("Hello World");
}

5. Classes

Classes are templates for objects. In Typescript, classes are declared using the class keyword. For example, if we wanted to create a class called Person that has two properties (name and age), we would write the following code:

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

6. Interfaces

Interfaces are used to define the structure of an object. In Typescript, interfaces are declared using the interface keyword. For example, if we wanted to create an interface called Person that has two properties (name and age), we would write the following code:

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

7. Arrays

Arrays are used to store a list of values. In Typescript, arrays are declared using the [] syntax. For example, if we wanted to create an array called myArray that contains the numbers 1, 2, and 3, we would write the following code:

let myArray = [1, 2, 3];

8. Loops

Loops are used to repeat a block of code multiple times. In Typescript, there are several different types of loops, including for loops, while loops, and do-while loops. For example, if we wanted to use a for loop to print the numbers 1 to 10 to the console, we would write the following code:

for (let i = 1; i <= 10; i++) {
  console.log(i);
}

9. Conditionals

Conditionals are used to check if a certain condition is true or false. In Typescript, conditionals are declared using the if keyword. For example, if we wanted to check if the number 5 is greater than 10, we would write the following code:

if (5 > 10) {
  console.log("5 is greater than 10");
}

10. Modules

Modules are used to organize code into separate files. In Typescript, modules are declared using the import and export keywords. For example, if we wanted to create a module called myModule that contains a function called sayHello, we would write the following code:

// myModule.ts
export function sayHello() {
  console.log("Hello World");
}

// main.ts
import { sayHello } from "./myModule";

sayHello();

11. Promises

Promises are used to handle asynchronous operations. In Typescript, promises are declared using the Promise constructor. For example, if we wanted to create a promise that resolves after one second, we would write the following code:

let myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Hello World");
  }, 1000);
});

12. Generics

Generics are used to create reusable code. In Typescript, generics are declared using the <T> syntax. For example, if we wanted to create a generic function called log that can log any type of value to the console, we would write the following code:

function log<T>(value: T) {
  console.log(value);
}

13. Enums

Enums are used to create a set of related constants. In Typescript, enums are declared using the enum keyword. For example, if we wanted to create an enum called Colors that contains the colors red, green, and blue, we would write the following code:

enum Colors {
  Red,
  Green,
  Blue
}

14. Tuples

Tuples are used to store a fixed number of values of different types. In Typescript, tuples are declared using the [T1, T2, ...] syntax. For example, if we wanted to create a tuple called myTuple that contains a string and a number, we would write the following code:

let myTuple: [string, number] = ["Hello World", 5];

15. Type Aliases

Type aliases are used to create a new name for an existing type. In Typescript, type aliases are declared using the type keyword. For example, if we wanted to create a type alias called Person for an object with two properties (name and age), we would write the following code:

type Person = {
  name: string;
  age: number;
};

16. Namespaces

Namespaces are used to organize code into separate modules. In Typescript, namespaces are declared using the namespace keyword. For example, if we wanted to create a namespace called MyNamespace that contains a function called sayHello, we would write the following code:

namespace MyNamespace {
  export function sayHello() {
    console.log("Hello World");
  }
}

17. Decorators

Decorators are used to add additional functionality to classes, methods, and properties. In Typescript, decorators are declared using the @ symbol. For example, if we wanted to create a decorator called log that logs the value of a property when it is accessed, we would write the following code:

function log(target: any, key: string) {
  let value = target[key];

  Object.defineProperty(target, key, {
    get: () => {
      console.log(value);
      return value;
    },
    set: (newValue) => {
      console.log(newValue);
      value = newValue;
    }
  });
}

18. Mixins

Mixins are used to combine multiple classes into a single class. For example, if we wanted to create a mixin called Logger that adds logging functionality to a class, we would write the following code:

function Logger(base: any) {
  return class extends base {
    log(message: string) {
      console.log(message);
    }
  };
}

19. Async/Await

Async/await is used to write asynchronous code in a synchronous style. In Typescript, async/await is declared using the async and await keywords. For example, if we wanted to create an asynchronous function called sayHello that prints the string "Hello World" to the console, we would write the following code:

async function sayHello() {
  await new Promise((resolve) => {
    setTimeout(() => {
      console.log("Hello World");
      resolve();
    }, 1000);
  });
}

20. TypeScript Compiler

The TypeScript compiler is used to compile TypeScript code into JavaScript code. The TypeScript compiler can be used from the command line, or it can be integrated into an IDE such as Visual Studio Code.

Conclusion

In this article, we quickly looked at 20 important concepts in TypeScript. Typescript is a great language to learn, as it is easy to understand and use. With the help of these concepts, you can start creating their own websites and applications with Typescript.

Mình hy vọng bạn thích bài viết này và học thêm được điều gì đó mới.

Donate mình một ly cafe hoặc 1 cây bút bi để mình có thêm động lực cho ra nhiều bài viết hay và chất lượng hơn trong tương lai nhé. À mà nếu bạn có bất kỳ câu hỏi nào thì đừng ngại comment hoặc liên hệ mình qua: Zalo - 0374226770 hoặc Facebook. Mình xin cảm ơn.

Momo: NGUYỄN ANH TUẤN - 0374226770

TPBank: NGUYỄN ANH TUẤN - 0374226770 (hoặc 01681423001)