> For the complete documentation index, see [llms.txt](https://javascriptuse.gitbook.io/advanced/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://javascriptuse.gitbook.io/advanced/type-script/cau-hinh-import-cac-module-khong-can-dau-.-ok.md).

# Cấu hình  import các module không cần dấu . (ok)

### Example 1

```jsonc
{
  "compilerOptions": {
    "target": "es2016",
    "module": "ES6",
    "baseUrl": "./",
    "allowJs": true,
    "declaration": true,
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}
```

app.ts

```typescript
import { Test } from "src/models/test"; // or import { Test } from "./src/models/test";
new Test();
new Test();
```

src\models\test.js

```javascript
export class Test {
  constructor() {
    console.log("constructor")
  }
}
```

src\models\test.d.ts

```typescript
export class Test {
}
```

<figure><img src="https://2086325979-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOfwU52oyTCInVkN26DVZ%2Fuploads%2Fv1o7J2YpGfjxiYlaoGfC%2Fimage.png?alt=media&amp;token=edd7e220-fadf-4843-822f-9e3671c905e9" alt=""><figcaption></figcaption></figure>

### Example 2

tsconfig.json

```jsonc
{
  "compilerOptions": {
    "target": "es2016",
    "module": "ES6",
    "baseUrl": "./",
    "paths": {
      "@models/*": [
        "src/models/*"
      ],
    },
    "declaration": true,
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}
```

app.ts

```typescript
import { Test } from "@models/test";
new Test();
```

src\models\test.ts

<figure><img src="https://2086325979-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOfwU52oyTCInVkN26DVZ%2Fuploads%2FgK4VgTHmAK7prdgLcn0a%2Fimage.png?alt=media&amp;token=57ec3303-0644-409b-b234-03de04f647e2" alt=""><figcaption></figcaption></figure>

Trong TypeScript, nếu bạn muốn import các module mà không cần sử dụng dấu chấm (`.`) trong đường dẫn của module, bạn cần sử dụng một số cách đặc biệt như sau:

**Sử dụng `tsconfig.json` để định nghĩa alias**:

Bạn có thể cấu hình `paths` trong tệp `tsconfig.json` để định nghĩa alias cho các đường dẫn. Điều này sẽ giúp bạn import module mà không cần phải sử dụng dấu chấm hoặc chỉ định chi tiết các thư mục.

**Ví dụ cấu hình `tsconfig.json`**:

```typescript
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@models/*": ["src/models/*"],
      "@utils/*": ["src/utils/*"]
    }
  }
}

```

Với cấu hình trên, bạn có thể import các module như sau mà không cần dấu `.`:

Import mà không cần dấu chấm:

```typescript
import { User } from '@models/user';
import { formatDate } from '@utils/date';
```

**Cấu hình module bundler (Webpack, Vite, hoặc các công cụ khác)**: Nếu bạn đang sử dụng một bundler như Webpack hoặc Vite, bạn có thể cấu hình chúng để hỗ trợ việc import mà không cần dấu chấm, giống như cách cấu hình trong `tsconfig.json`.

**Sử dụng module trực tiếp từ `node_modules`**: Khi bạn import một thư viện từ `node_modules`, bạn không cần phải sử dụng dấu chấm. Ví dụ:

```typescript
import { AxiosInstance } from 'axios';
```

Như vậy, việc không cần dấu `.` chủ yếu phụ thuộc vào việc bạn cấu hình `tsconfig.json` hoặc công cụ bundler của bạn để hỗ trợ alias hoặc các đường dẫn dễ hiểu hơn trong dự án.

Hy vọng giúp được bạn! Nếu có thêm câu hỏi nào, cứ thoải mái hỏi nhé!