# Làm thế nào để config interface global  (tệp .d.ts) cho TypeScript?

globals.d.ts not working

If your `globals.d.ts` file is not working in a TypeScript project, here are some things to check:

#### 1. **Ensure the File is in the Correct Location**

* The `globals.d.ts` file should be inside your `src` or `types` folder.
* Alternatively, if it's in a custom location, ensure it's included in the `tsconfig.json`.

#### 2. **Check `tsconfig.json` for `include` or `typeRoots`**

* Open `tsconfig.json` and ensure it includes the file:

```
jsonCopyEdit


```

```
{
  "include": ["src", "types", "globals.d.ts"]
}

```

* If using `typeRoots`, make sure your types folder is referenced:

```
{
  "compilerOptions": {
    "typeRoots": ["./types", "./node_modules/@types"]
  }
}

```

```
{
  "compilerOptions": {
    "typeRoots": ["./types", "./node_modules/@types"]
  }
}

```

#### 3. **Ensure the File is Declaring Global Types Correctly**

* Your `globals.d.ts` should have valid TypeScript declarations:

```
declare global {
  interface Window {
    myCustomProperty: string;
  }
}
export {};

```

The `export {};` at the end ensures TypeScript treats it as a module.

#### 4. **Restart TypeScript Server**

* If changes don’t take effect, restart the TypeScript server in VS Code:
  * Open Command Palette (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac).
  * Search for **"TypeScript: Restart TS Server"** and select it.

#### 5. **Check `tsconfig.json` for `noEmit` or `skipLibCheck`**

* If `noEmit` is `true`, TypeScript might not process declaration files correctly.
* If `skipLibCheck` is `true`, try setting it to `false` for debugging.

#### 6. **Ensure the `globals.d.ts` is Loaded in Your Project**

* If the types are not detected, explicitly import the file in your `index.ts` or `main.ts`:

import "./globals.d.ts";

* This forces TypeScript to include it.

#### 7. **Verify No Conflicts with `@types` Packages**

* If you're defining global types that conflict with existing `@types/*` packages, try uninstalling or adjusting them.

If none of these work, let me know more details about your project setup! 🚀

Chưa thấy hoạt động ????

<figure><img src="https://2086325979-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOfwU52oyTCInVkN26DVZ%2Fuploads%2F7WkSvoXOUJ48QVBAQaqq%2Fimage.png?alt=media&#x26;token=a56d6d89-f696-4a43-800e-e9014dcc2227" alt=""><figcaption></figcaption></figure>

Để cấu hình giao diện toàn cầu tùy chỉnh trong TypeScript, bạn có thể tạo và sử dụng các tệp `.d.ts` (declaration file) để mở rộng hoặc định nghĩa lại các giao diện toàn cầu. Dưới đây là các bước cơ bản để làm điều này:

#### Bước 1: Tạo một tệp `.d.ts`

1. Trong dự án TypeScript của bạn, tạo một tệp `.d.ts`. Ví dụ: `globals.d.ts`.

#### Bước 2: Định nghĩa các giao diện toàn cầu trong tệp `.d.ts`

Trong tệp này, bạn có thể khai báo các biến, hàm, hoặc giao diện toàn cầu tùy chỉnh. Ví dụ:

```
// globals.d.ts

// Định nghĩa một biến toàn cầu
declare var myGlobalVar: string;

// Mở rộng giao diện toàn cầu `Window`
interface Window {
  customProperty: string;
}

// Định nghĩa một giao diện toàn cầu
declare interface MyCustomInterface {
  property1: number;
  property2: string;
}

```

#### Bước 3: Thêm tệp `.d.ts` vào dự án

Đảm bảo rằng TypeScript biết đến tệp `.d.ts` của bạn bằng cách thêm nó vào trong `tsconfig.json`.

1. Mở tệp `tsconfig.json`.
2. Trong trường `include`, thêm đường dẫn đến tệp `.d.ts` của bạn.

Ví dụ:

```
{
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": [
    "src/**/*",
    "globals.d.ts"  // Thêm tệp .d.ts vào đây
  ]
}
```

#### Bước 4: Sử dụng giao diện hoặc biến toàn cầu trong mã TypeScript

Sau khi định nghĩa và cấu hình, bạn có thể sử dụng các giao diện hoặc biến toàn cầu như sau:

```
// Sử dụng biến toàn cầu
myGlobalVar = "Hello, World!";

// Sử dụng thuộc tính mở rộng của `Window`
window.customProperty = "Custom Value";

// Sử dụng giao diện toàn cầu tùy chỉnh
const myObject: MyCustomInterface = {
  property1: 42,
  property2: "Hello"
};

```

#### Lưu ý

* Nếu bạn không muốn khai báo các biến toàn cầu trong các tệp `.d.ts` mà chỉ muốn mở rộng các giao diện sẵn có (như `Window`, `Node`, v.v.), bạn chỉ cần khai báo giao diện mở rộng mà không cần phải khai báo lại biến.
* Bạn có thể thêm bất kỳ tệp `.d.ts` nào vào dự án và TypeScript sẽ tự động nhận diện nếu nó được liệt kê trong `tsconfig.json` hoặc nếu nó nằm trong thư mục mà TypeScript tự động quét.

Với các bước trên, bạn có thể dễ dàng cấu hình giao diện toàn cầu tùy chỉnh cho dự án TypeScript của mình.

<figure><img src="https://2086325979-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOfwU52oyTCInVkN26DVZ%2Fuploads%2FcBXLb7N0CF8dMVGMXYKc%2Fimage.png?alt=media&#x26;token=d339d86a-39c7-43d6-8594-7deb5d587070" alt=""><figcaption></figcaption></figure>

Để cấu hình tệp `.d.ts` global cho TypeScript, bạn cần tạo một tệp khai báo kiểu (declaration file) để định nghĩa các kiểu, giao diện, hoặc biến toàn cầu mà bạn muốn TypeScript nhận diện trên toàn bộ dự án. Điều này cho phép bạn mở rộng hoặc tùy chỉnh các kiểu toàn cầu mà không cần phải khai báo lại chúng ở mỗi tệp mã nguồn.

Dưới đây là các bước chi tiết để cấu hình một tệp `.d.ts` global cho TypeScript:

#### Bước 1: Tạo tệp `.d.ts`

1. Trong dự án TypeScript của bạn, tạo một tệp `.d.ts`. Ví dụ, bạn có thể tạo tệp `globals.d.ts` trong thư mục gốc của dự án hoặc thư mục `src`.
2. Nếu bạn có thư mục `types` hoặc thư mục `@types` để chứa các kiểu của mình, bạn có thể tạo tệp `.d.ts` trong đó.

#### Bước 2: Khai báo các kiểu hoặc giá trị toàn cầu

Trong tệp `.d.ts`, bạn có thể khai báo các kiểu, giá trị, hoặc giao diện toàn cầu mà bạn muốn TypeScript nhận diện trong toàn bộ dự án. Đảm bảo rằng các khai báo của bạn sử dụng từ khóa `declare` để thông báo rằng các giá trị này sẽ được định nghĩa ở nơi khác trong dự án.

Ví dụ:

**Khai báo biến toàn cầu:**

```
// globals.d.ts

// Khai báo một biến toàn cầu
declare var myGlobalVar: string;
```

Mở rộng các giao diện toàn cầu như `Window`:

```
// globals.d.ts

// Mở rộng giao diện Window với một thuộc tính mới
interface Window {
  customProperty: string;
}
```

Định nghĩa các kiểu toàn cầu:

```
// globals.d.ts

// Khai báo một giao diện toàn cầu
declare interface MyGlobalInterface {
  property1: number;
  property2: string;
}

```

#### Bước 3: Thêm tệp `.d.ts` vào cấu hình `tsconfig.json`

Để TypeScript nhận diện tệp `.d.ts` này và sử dụng các khai báo toàn cầu trong toàn bộ dự án, bạn cần thêm tệp `.d.ts` vào cấu hình `tsconfig.json`.

1. Mở tệp `tsconfig.json` của bạn.
2. Thêm đường dẫn đến tệp `.d.ts` trong phần `include` hoặc `files` của cấu hình.

**Ví dụ `tsconfig.json`:**

```
{
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": [
    "src/**/*",        // Bao gồm các tệp mã nguồn của bạn
    "globals.d.ts"     // Bao gồm tệp khai báo toàn cầu
  ]
}

```

**Lưu ý:**

* Nếu tệp `.d.ts` của bạn nằm trong thư mục `src` hoặc bất kỳ thư mục nào đã có trong `include` hoặc `files`, TypeScript sẽ tự động tìm thấy và áp dụng các khai báo toàn cầu mà bạn đã định nghĩa.
* Nếu bạn không muốn phải thêm tệp `.d.ts` vào `tsconfig.json`, bạn có thể đặt tệp khai báo toàn cầu vào thư mục `@types` hoặc `types` (nếu có), và TypeScript sẽ tự động nhận diện các tệp `.d.ts` trong các thư mục này.

#### Bước 4: Sử dụng các khai báo toàn cầu trong dự án

Sau khi cấu hình xong, bạn có thể sử dụng các giá trị hoặc giao diện toàn cầu mà bạn đã khai báo trong bất kỳ tệp TypeScript nào mà không cần phải nhập khẩu hoặc định nghĩa lại chúng.

**Ví dụ sử dụng:**

```
// Sử dụng biến toàn cầu
myGlobalVar = "Hello, world!";

// Sử dụng thuộc tính mở rộng của `Window`
window.customProperty = "Custom Value";

// Sử dụng giao diện toàn cầu tùy chỉnh
const myObject: MyGlobalInterface = {
  property1: 42,
  property2: "Hello"
};

```

#### Bước 5: Kiểm tra

Sau khi cấu hình xong, hãy chắc chắn rằng TypeScript nhận diện được các khai báo toàn cầu của bạn. Bạn có thể thử biên dịch dự án hoặc kiểm tra bằng cách gọi các giá trị hoặc giao diện mà bạn đã khai báo trong tệp `.d.ts`.

#### Tóm tắt các bước:

1. Tạo tệp `.d.ts` (ví dụ: `globals.d.ts`).
2. Khai báo các kiểu hoặc giá trị toàn cầu trong tệp này bằng cách sử dụng từ khóa `declare`.
3. Thêm tệp `.d.ts` vào cấu hình `tsconfig.json` trong phần `include`.
4. Sử dụng các kiểu hoặc giá trị toàn cầu trong toàn bộ dự án của bạn.

Với các bước trên, bạn có thể dễ dàng cấu hình tệp `.d.ts` global trong TypeScript để mở rộng hoặc định nghĩa các kiểu toàn cầu tùy chỉnh cho dự án của mình.
