1. Giới thiệu về TypeScript
TypeScript là một ngôn ngữ lập trình mã nguồn mở được phát triển bởi Microsoft. Nó là một tập hợp mở rộng của JavaScript, cung cấp thêm các tính năng như kiểu tĩnh, lớp, và module.
2. Cài đặt TypeScript
- Node.js và npm: Đầu tiên, cài đặt Node.js và npm (Node Package Manager) nếu bạn chưa có.
Cài đặt TypeScript: Sử dụng lệnh sau để cài đặt TypeScript qua npm:
npm install -g typescript
Kiểm tra phiên bản: Kiểm tra xem bạn đã cài đặt TypeScript thành công chưa:
tsc --version
3. Kiểu Dữ Liệu (Types)
TypeScript thêm kiểu tĩnh vào JavaScript. Dưới đây là một số kiểu dữ liệu cơ bản:
- Number: let num: number = 5;
- String: let str: string = “Hello”;
- Boolean: let isTrue: boolean = true;
- Array: let numArray: number[] = [1, 2, 3];
- Tuple: let tuple: [string, number] = [“Hello”, 5];
- Enum: enum Color {Red, Green, Blue}; let c: Color = Color.Green;
- Any: let anything: any = 5; anything = “Hello”;
4. Khai báo Biến
Biến cục bộ: let và const tương tự như trong ES6.
let age: number = 25;
const pi: number = 3.14;
5. Hàm (Functions)
TypeScript cho phép bạn định nghĩa kiểu cho tham số và kiểu trả về của hàm:
function add(x: number, y: number): number {
return x + y;
}
Tham số tùy chọn và mặc định:
function greet(name: string, greeting: string = "Hello"): string {
return `${greeting}, ${name}!`;
}
6. Giao diện (Interfaces)
Giao diện định nghĩa cấu trúc của một đối tượng:
interface Person {
firstName: string;
lastName: string;
age?: number; // Optional
}
let user: Person = {
firstName: "John",
lastName: "Doe"
};
7. Lớp (Classes)
TypeScript hỗ trợ lập trình hướng đối tượng với các lớp:
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
move(distance: number = 0) {
console.log(`${this.name} moved ${distance} meters.`);
}
}
let cat = new Animal("Cat");
cat.move(10);
Kế thừa:
typescript
Copy code
class Dog extends Animal {
bark() {
console.log("Woof! Woof!");
}
}
let dog = new Dog("Dog");
dog.bark();
dog.move(5);
8. Modules
TypeScript sử dụng các module để tổ chức mã nguồn:
Export – Xuất:
export class Car {
// ...
}
Import – Nhập:
import { Car } from './CarModule';
9. Biên dịch TypeScript
Để biên dịch tệp .ts sang .js, sử dụng lệnh:
tsc filename.ts
Tạo tệp cấu hình tsconfig.json để cấu hình dự án TypeScript:
tsc -- init
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true
}
}
Kết luận
TypeScript mở rộng JavaScript với các tính năng mạnh mẽ như kiểu tĩnh, lớp, và module, giúp mã nguồn trở nên rõ ràng và dễ bảo trì hơn. Bắt đầu với các khái niệm cơ bản này sẽ giúp bạn nhanh chóng làm quen và sử dụng TypeScript hiệu quả.