🌸Top 20 Essential Typescript Concepts for Beginners🌸
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)
All rights reserved