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

Example 1

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

app.ts

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

src\models\test.js

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

src\models\test.d.ts

export class Test {
}

Example 2

tsconfig.json

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

app.ts

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

src\models\test.ts

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:

{
  "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:

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ụ:

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é!