javascript - Làm thế nào tôi có thể thêm hỗ trợ tự động hoàn thành tên lớp trong thư viện dựa trên TypeScript của mình?

Tôi đã lập trình một thư viện đơn giản nhưng hữu ích có tên là CliSpinner. https://github.com/AxeriDev/CliSpinner

Vấn đề là, VScode có tính năng tự động hoàn thành lớp TypeScript nhưng nó không bao giờ tìm thấy lớp của tôi. Tôi xuất lớp bên trong CliSpinner.ts như sau:

class CliSpinner { ... }

const cliSpinner = new CliSpinner();
export default cliSpinner;

khi tôi bắt đầu gõ CliSpi hoặc cliSpi, tôi không bao giờ nhận được kết quả phù hợp để nhập. Các thư viện và gói khác làm được điều này như thế nào. Chalk là một thư viện js nhưng nó vẫn có điều này. Khi tôi bắt đầu gõ chal, chalk hiện ra và tôi có thể nhấn để nhập nó.

Câu trả lời #1

Để giải quyết vấn đề bạn đang gặp phải với tính năng gợi ý tự động của VSCode không nhận diện được CliSpinner khi import, nguyên nhân chính nằm ở cách bạn xuất từ CliSpinner.ts của mình. Hiện tại, bạn đang xuất một thể hiện của lớp, mà các IDE như VSCode thường không gợi ý tự động theo cùng cách như với tên lớp, hàm, v.v.

Đây là một giải pháp được điều chỉnh cho các tình huống khác nhau tùy thuộc vào ý định của bạn:

Nếu Bạn Muốn Xuất Lớp:

Thay đổi việc xuất khẩu của bạn để trực tiếp xuất khẩu chính lớp đó. Điều này phù hợp hơn với các thực tiễn phổ biến và những gì bạn thường mong đợi câu lệnh import sẽ mang vào:

export class CliSpinner { ... }

Bằng cách làm như vậy, khi người dùng thư viện của bạn muốn sử dụng CliSpinner, họ có thể dễ dàng nhập lớp và khởi tạo nó khi cần:

import { CliSpinner } from 'path/to/CliSpinner';
const cliSpinner = new CliSpinner();

Nếu bạn muốn xuất một thể hiện Singleton:

Đôi khi, mục tiêu là cung cấp một thể hiện duy nhất, chung của một lớp có thể được sử dụng trong toàn bộ ứng dụng, tương tự như một singleton. Bạn vẫn có thể đạt được điều này trong khi cho phép nhập trực tiếp kiểu lớp khi cần:

class CliSpinner { ... }

const cliSpinner = new CliSpinner();

export { CliSpinner, cliSpinner as default };

Với phương pháp này, bạn đang cung cấp những điều tốt nhất của cả hai thế giới: khả năng cho người dùng nhập và sử dụng trực tiếp thể hiện singleton và tùy chọn tạo các đối tượng CliSpinner mới nếu trường hợp sử dụng của họ yêu cầu.

Mẹo bổ sung:

Đảm bảo rằng cấu hình TypeScript của bạn được thiết lập để tạo các tệp .d.ts (tệp khai báo) và rằng những tệp này được bao gồm đúng trong gói của bạn. Cấu hình này rất quan trọng để hỗ trợ các IDE như VSCode cung cấp gợi ý tự động hoàn thành chính xác. Bạn có thể đảm bảo các tệp khai báo được tạo ra bằng cách thêm những dòng sau vào tsconfig.json của bạn:

{
  "compilerOptions": {
    "declaration": true,
    "outDir": "./lib",
    "rootDir": "./src",
  },
  "include": ["src/**/*"]
}

Chỉ cần đảm bảo rằng các đường dẫn phản ánh cấu trúc của dự án của bạn.

Sau khi thực hiện những điều chỉnh này, bạn cũng có thể cần khởi động lại máy chủ TS trong VSCode (TypeScript: Restart TS server) hoặc thậm chí là chính VSCode để thấy các thay đổi có hiệu lực.

Câu trả lời số 2

Vấn đề là bạn đang xuất một thể hiện của CliSpinner, không phải chính lớp. Khi bạn gõ CliSpi hoặc cliSpi, VS Code đang tìm các lớp hoặc hàm được xuất với những tên đó, nhưng sẽ không tìm thấy vì bạn chỉ đang xuất một thể hiện.

export default class CliSpinner { ... }

Nếu bạn muốn xuất chính lớp đó, bạn nên làm như sau:

import CliSpinner from 'cli-spinner-package';
const cliSpinner = new CliSpinner();

Sau đó, bạn có thể nhập nó vào một tệp khác như sau: Nếu bạn muốn giữ việc xuất thể hiện nhưng cũng có lớp sẵn có để nhập, bạn có thể làm:

class CliSpinner { ... }

const cliSpinner = new CliSpinner();
export { CliSpinner };
export default cliSpinner;

Sau đó, bạn có thể nhập lớp như sau:

import { CliSpinner } from 'cli-spinner-package';

Và trường hợp như thế này: