# TypeScript - Ambients: Hướng dẫn cho người mới bắt đầu

Xin chào bạn, ngôi sao lập trình tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của TypeScript Ambients. Đừng lo lắng nếu bạn chưa từng viết một dòng mã trước đây - tôi sẽ là người hướng dẫn thân thiện của bạn, và chúng ta sẽ cùng khám phá chủ đề này từng bước một. Nào, hãy chuẩn bị hành trang ảo của bạn, và chúng ta cùng bắt đầu!

## Ambients là gì trong TypeScript?

Trước khi chúng ta nhảy vào phần sâu hơn, hãy bắt đầu từ những điều cơ bản. Hãy tưởng tượng bạn đang học một ngôn ngữ mới, và ai đó cho bạn một cuốn từ điển. Cuốn từ điển này giúp bạn hiểu những từ bạn có thể gặp phải, ngay cả khi bạn chưa biết cách sử dụng chúng trong câu. Trong thế giới TypeScript, ambients đóng vai trò tương tự.

Ambients trong TypeScript là các khai báo mô tả hình dạng và cấu trúc của mã JavaScript hiện có đối với TypeScript, mà không thực sự triển khai mã đó. Chúng giống như một bản đồ chỉ cho TypeScript biết, "Ồ, đoạn mã này tồn tại ở đâu đó, và đây là hình dạng của nó!"

### Tại sao chúng ta cần Ambients?

Bạn có thể tự hỏi, "Tại sao lại phiền phức như vậy?" Hãy để tôi kể cho bạn một câu chuyện ngắn.

Ngày xửa ngày xưa, trong một vùng đất của JavaScript, có một nhà phát triển tên là Alice. Alice rất thích sử dụng các thư viện hay trong các dự án của mình. Nhưng khi cô chuyển sang TypeScript, cô phát hiện ra rằng TypeScript không biết gì về các thư viện này! Poor Alice bị mắc kẹt - cô không thể sử dụng các công cụ yêu thích của mình mà không gặp lỗi từ TypeScript. Đó là khi cô phát hiện ra phép màu của ambients, giúp cô dạy TypeScript về các thư viện bên ngoài.

## Định nghĩa Ambients

Bây giờ chúng ta đã hiểu tại sao ambients lại quan trọng, hãy học cách định nghĩa chúng. Có một vài cách để làm điều này, hãy cùng phân tích chúng:

### 1. khai báo Ambients với 'declare'

Cách phổ biến nhất để tạo một khai báo ambient là sử dụng từ khóa `declare`. Điều này告诉 TypeScript, " tin tưởng tôi, thứ này tồn tại ở đâu đó trong thế giới JavaScript."

Hãy xem một ví dụ:

```typescript
declare var myGlobalVariable: number;

console.log(myGlobalVariable); // TypeScript bây giờ biết điều này tồn tại!

Trong ví dụ này, chúng ta đang告诉 TypeScript rằng có một biến toàn cục名叫 myGlobalVariable loại number. TypeScript sẽ cho phép chúng ta sử dụng biến này mà không phàn nàn, ngay cả khi chúng ta không định nghĩa nó trong mã TypeScript của mình.

TypeScript - Ambients

2. Ambients Modules

Đôi khi, chúng ta muốn mô tả cả một module. Chúng ta có thể làm điều này bằng cách sử dụng ambients modules. Dưới đây là cách nó trông như thế nào:

declare module 'my-cool-library' {
    export function doSomethingAwesome(): void;
    export const magicNumber: number;
}

Bây giờ, chúng ta có thể sử dụng thư viện này trong mã TypeScript của mình:

import { doSomethingAwesome, magicNumber } from 'my-cool-library';

doSomethingAwesome();
console.log(magicNumber);

TypeScript bây giờ hiểu cấu trúc của my-cool-library, ngay cả khi nó không có quyền truy cập vào việc triển khai thực tế của nó.

3. Ambients Namespaces

Namespaces là một cách đặc trưng của TypeScript để tổ chức mã. Chúng ta cũng có thể khai báo các namespaces ambient:

declare namespace MyNamespace {
    function myFunction(): void;
    const myConstant: string;
}

MyNamespace.myFunction();
console.log(MyNamespace.myConstant);

Điều này告诉 TypeScript về cấu trúc của MyNamespace, cho phép chúng ta sử dụng các thành viên của nó mà không gặp lỗi.

Kỹ thuật Ambients Nâng cao

Bây giờ chúng ta đã bao gồm các kỹ thuật cơ bản, hãy xem xét một số kỹ thuật nâng cao. Đừng lo lắng nếu chúng có vẻ phức tạp lúc đầu - với sự gyak, chúng sẽ trở thành bản năng thứ hai của bạn!

Kết hợp Khai báo

TypeScript cho phép chúng ta thêm vào các khai báo hiện có. Điều này được gọi là declaration merging:

// Khai báo hiện có
declare namespace MyNamespace {
    const x: number;
}

// Kết hợp với khai báo hiện có
declare namespace MyNamespace {
    const y: string;
}

// Bây giờ MyNamespace có cả x và y
console.log(MyNamespace.x, MyNamespace.y);

Enums Ambients

Enums là một cách để đưa tên thân thiện hơn cho các bộ giá trị số. Chúng ta cũng có thể khai báo các enums ambient:

declare enum Color {
    Red,
    Green,
    Blue
}

let myFavoriteColor: Color = Color.Blue;

Khai báo Wildcard Module

Đôi khi, chúng ta muốn khai báo cả một nhóm modules. Chúng ta có thể sử dụng ký tự wildcard cho điều này:

declare module "mylib/*" {
    export function doSomething(): void;
}

import { doSomething } from "mylib/something";
doSomething(); // Điều này hoạt động bây giờ!

Các nguyên tắc tốt nhất khi sử dụng Ambients

Trước khi chúng ta kết thúc, hãy nói về một số nguyên tắc tốt nhất:

Sử dụng các tệp khai báo: Đặt các khai báo ambient của bạn trong các tệp .d.ts. Điều này giúp chúng tách biệt khỏi mã thực tế của bạn.
Cẩn thận với 'any': Mặc dù có thể hấp dẫn để sử dụng any cho mọi thứ, nhưng hãy cố gắng cụ thể hóa khai báo của bạn càng nhiều càng tốt.
Giữ nó cập nhật: Nếu thư viện bạn mô tả thay đổi, hãy đảm bảo cập nhật các khai báo ambient của bạn!
Sử dụng các tệp khai báo hiện có: Nhiều thư viện phổ biến đã có các tệp khai báo sẵn có. Kiểm tra xem có tệp nào tồn tại trước khi viết của riêng bạn!

Kết luận

Chúc mừng! Bạn đã chính thức bước những bước đầu tiên vào thế giới của TypeScript Ambients. Chúng ta đã bao gồm rất nhiều nội dung, từ các khai báo cơ bản đến các kỹ thuật nâng cao. Nhớ rằng, như việc học bất kỳ kỹ năng mới nào, việc thành thạo ambients đòi hỏi sự gyak. Đừng nản lòng nếu điều này có vẻ khó khăn lúc đầu - hãy tiếp tục kiên trì, và sớm thôi bạn sẽ viết ambients như một chuyên gia!

Khi chúng ta kết thúc, đây là bảng tóm tắt các phương pháp chính chúng ta đã thảo luận:

Phương pháp	Mô tả	Ví dụ
declare var	Khai báo một biến toàn cục	`declare var myGlobal: number;`
declare function	Khai báo một hàm toàn cục	`declare function myFunc(): void;`
declare module	Khai báo một module	`declare module 'my-module' { ... }`
declare namespace	Khai báo một namespace	`declare namespace MyNS { ... }`
declare enum	Khai báo một enum	`declare enum Color { ... }`

Nhớ rằng, TypeScript ambients là bạn của bạn. Chúng ở đây để giúp bạn sử dụng mã JavaScript hiện có trong các dự án TypeScript của bạn. Vậy hãy tiến lên, khám phá, và chúc bạn vui vẻ khi lập trình!

Credits: Image by storyset

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

TypeScript - Chương

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

TypeScript - Trình trang trí