TypeScript - Cú pháp cơ bản

Xin chào các nhà pháp sư TypeScript tương lai! ? Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình thú vị này vào thế giới của TypeScript. Là một người đã dạy lập trình trong nhiều năm, tôi có thể告诉 bạn rằng TypeScript giống như một phiên bản siêu năng lượng của JavaScript, và nó sẽ làm cho cuộc sống lập trình của bạn trở nên dễ dàng hơn. Hãy cùng lặn sâu vào!

TypeScript - Basic Syntax

Bài mã TypeScript đầu tiên của bạn

Được rồi, hãy tưởng tượng bạn sắp viết dòng đầu tiên trong một ngôn ngữ mới..exciting, phải không? Hãy bắt đầu với chương trình "Hello, World!" kinh điển trong TypeScript.

console.log("Hello, World!");

Bây giờ, bạn có thể đang nghĩ, "Đợi đã, cái này trông giống hệt JavaScript!" Và bạn đã đúng! TypeScript là một tập hợp của JavaScript, điều này có nghĩa là tất cả các mã JavaScript hợp lệ cũng là mã TypeScript hợp lệ. Nhưng đừng lo lắng, chúng ta sẽ sớm đến phần hay ho đặc trưng của TypeScript.

Hãy thử cái này có vẻ hơn nữa TypeScript-y:

let message: string = "Hello, TypeScript!";
console.log(message);

Đây là những gì đang xảy ra:

Chúng ta đang声明 một biến叫做 message
Phần : string cho TypeScript biết rằng biến này chỉ nên giữ các giá trị chuỗi
Chúng ta đang gán chuỗi "Hello, TypeScript!" cho biến này
Cuối cùng, chúng ta in nó ra console

Đây chỉ là một phần nhỏ của hệ thống kiểu của TypeScript, một trong những tính năng mạnh mẽ nhất của nó. Nó giống như có một trợ lý robot thân thiện bắt lỗi của bạn trước khi bạn thậm chí chạy mã của bạn!

Biên dịch và Thực thi một Chương trình TypeScript

Bây giờ chúng ta đã viết một số mã TypeScript, làm thế nào để chúng ta thực sự chạy nó? Well, các trình duyệt và Node.js không hiểu TypeScript trực tiếp, vì vậy chúng ta cần biên dịch nó thành JavaScript trước. Điều này giống như dịch từ TypeScript sang một ngôn ngữ mà máy tính đã biết.

Dưới đây là cách bạn làm:

Lưu mã TypeScript của bạn trong một tệp với phần mở rộng .ts, giả sử là hello.ts
Mở terminal hoặc command prompt
Điều hướng đến thư mục chứa tệp của bạn
Chạy bộ biên dịch TypeScript:

tsc hello.ts

Điều này sẽ tạo ra một tệp mới叫做 hello.js trong cùng thư mục. Đó là mã TypeScript của bạn được dịch thành JavaScript!

Để chạy nó, bạn có thể sử dụng Node.js:

node hello.js

Và voilà! Bạn nên thấy tin nhắn của bạn được in ra console.

Cờ Biên dịch

Bộ biên dịch TypeScript rất thông minh, nhưng đôi khi bạn muốn đưa ra các hướng dẫn cụ thể. Đó là khi các cờ biên dịch được sử dụng. Chúng giống như các lệnh đặc biệt bạn có thể đưa ra cho bộ biên dịch để thay đổi cách nó hoạt động.

Dưới đây là bảng một số cờ biên dịch phổ biến:

Cờ	Mô tả
--outDir	Chỉ định thư mục đầu ra cho tất cả các tệp được phát hành
--target	Chỉ định phiên bản ECMAScript mục tiêu
--watch	Theo dõi các tệp đầu vào
--strict	Bật tất cả các tùy chọn kiểm tra kiểu chặt chẽ

Ví dụ, nếu bạn muốn biên dịch TypeScript của bạn thành một phiên bản cũ hơn của JavaScript vì lý do tương thích, bạn có thể sử dụng:

tsc --target ES5 hello.ts

Điều này cho biết bộ biên dịch tạo ra JavaScript hoạt động với ECMAScript 5, được hỗ trợ bởi các trình duyệt cũ hơn.

Tên trong TypeScript

Trong lập trình, chúng ta sử dụng tên để đặt tên cho các thứ như biến, hàm và lớp. Hãy nghĩ của chúng như là các nhãn cho các phần khác nhau của mã của bạn. Trong TypeScript, có một số quy tắc cho các tên này:

Chúng có thể chứa chữ cái, số, dấu gạch dưới và dấu dollar
Chúng phải bắt đầu bằng một chữ cái, dấu gạch dưới hoặc dấu dollar
Chúng phân biệt chữ hoa và chữ thường (nên myVariable và MyVariable khác nhau)
Chúng không thể là từ khóa được保留 (chúng ta sẽ thảo luận về những từ khóa này tiếp theo!)

Dưới đây là một số tên hợp lệ:

let firstName: string = "John";
let _count: number = 5;
let $price: number = 9.99;
let camelCaseIsCommon: boolean = true;

Và một số tên không hợp lệ:

let 123abc: string = "Invalid"; // Không thể bắt đầu bằng số
let my-variable: number = 10; // Không thể sử dụng dấu gạch ngang
let class: string = "Reserved keyword"; // Không thể sử dụng từ khóa được保留

TypeScript ─ Từ khóa

Từ khóa là những từ có ý nghĩa đặc biệt trong TypeScript. Chúng giống như từ vựng của ngôn ngữ. Bạn không thể sử dụng chúng làm tên vì TypeScript đã giao cho chúng một công việc cụ thể.

Dưới đây là bảng một số từ khóa phổ biến:

Từ khóa	Mô tả
let	Khai báo một biến có phạm vi khối
const	Khai báo một hằng số có phạm vi khối
if	Bắt đầu một câu lệnh if
for	Bắt đầu một vòng lặp for
function	Khai báo một hàm
class	Khai báo một lớp
interface	Khai báo một giao diện
type	Khai báo một别名 kiểu

Ví dụ:

let x: number = 5;
const PI: number = 3.14159;

if (x > 0) {
    console.log("x is positive");
}

for (let i = 0; i < 5; i++) {
    console.log(i);
}

function greet(name: string): void {
    console.log(`Hello, ${name}!`);
}

class Person {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
}

interface Shape {
    area(): number;
}

type Point = {
    x: number;
    y: number;
};

Mỗi từ khóa này có một mục đích cụ thể trong việc cấu trúc và định nghĩa mã của bạn.

Bình luận trong TypeScript

Bình luận là những ghi chú nhỏ bạn để lại cho mình (hoặc các nhà phát triển khác) trong mã của bạn. Chúng bị bỏ qua bởi bộ biên dịch, vì vậy bạn có thể sử dụng chúng để giải thích mã của bạn mà không ảnh hưởng đến cách nó chạy.

TypeScript hỗ trợ ba loại bình luận:

Bình luận dòng đơn:

// This is a single-line comment
let x: number = 5; // You can also put them at the end of a line

Bình luận đa dòng:

/* This is a multi-line comment
It can span several lines
Useful for longer explanations */
let y: number = 10;

Bình luận tài liệu:
```
/**
```

This is a documentation comment
It's often used to generate documentation for functions or classes
@param name The name to greet
@returns A greeting message */ function greet(name: string): string { return Hello, ${name}!; }

Nhớ rằng, bình luận tốt giải thích tại sao bạn đang làm điều gì đó, không chỉ là bạn đang làm gì. Mã itself should be clear enough to show what's happening.

TypeScript và Hướng đối tượng

Một trong những điều tuyệt vời về TypeScript là sự hỗ trợ của nó cho lập trình hướng đối tượng (OOP). Nếu bạn là người mới bắt đầu lập trình, hãy nghĩ về OOP như một cách tổ chức mã của bạn xung quanh "đối tượng" có các thuộc tính và hành vi.

Hãy tạo một lớp Car đơn giản để minh họa:

class Car {
    // Properties
    make: string;
    model: string;
    year: number;

    // Constructor
    constructor(make: string, model: string, year: number) {
        this.make = make;
        this.model = model;
        this.year = year;
    }

    // Method
    describe(): string {
        return `This is a ${this.year} ${this.make} ${this.model}.`;
    }
}

// Creating an instance of Car
let myCar = new Car("Toyota", "Corolla", 2022);

console.log(myCar.describe()); // Outputs: This is a 2022 Toyota Corolla.

Hãy phân tích điều này:

Chúng ta định nghĩa một lớp Car với các thuộc tính make, model, và year
constructor là một phương thức đặc biệt được gọi khi chúng ta tạo một Car mới
Phương thức describe trả về một chuỗi mô tả xe
Chúng ta tạo một đối tượng Car và gọi phương thức describe của nó

Hệ thống kiểu của TypeScript thực sự tỏa sáng trong OOP. Nó có thể bắt lỗi như cố gắng gán một chuỗi vào thuộc tính year, hoặc gọi một phương thức không tồn tại.

Và thế là bạn đã bước những bước đầu tiên vào thế giới của TypeScript. Nhớ rằng, học lập trình là một hành trình, không phải là đích đến. Đừng lo lắng nếu mọi thứ không ngay lập tức clicked - tiếp tục thực hành, tiếp tục thử nghiệm và quan trọng nhất, tiếp tục vui vẻ! Trước khi bạn biết, bạn sẽ viết các ứng dụng TypeScript phức tạp và tự hỏi làm thế nào bạn từng sống mà không có gỡ lỗi tĩnh. Chúc bạn may mắn! ?

Credits: Image by storyset

Hướng Dẫn Trước:

TypeScript - Thiết lập Môi trường

Hướng Dẫn Tiếp Theo:

TypeScript vs. JavaScript