Giới thiệu về Tiếng Việt * .d.ts Bên trong TypeScript

Tôi cảm thấy tò mò *.d.tsvì tôi là người mới chơi TypeScript. Và tôi đã được ai đó nói rằng loại tệp này giống như "tệp đầu" trong C ++ nhưng chỉ dành cho JS. Nhưng tôi không thể chuyển đổi một tệp JS thuần thành *.d.tstệp trừ khi tôi buộc phải thay đổi *.jsthành *.ts. Vì vậy, tôi có ba tệp: một tệp JS, một tệp TS và một *.d.tstệp.

1. Mối quan hệ giữa họ là gì?

2. Làm thế nào tôi có thể sử dụng các *.d.tstập tin? Có nghĩa là tôi có thể xóa các *.tstập tin vĩnh viễn?

3. Nếu vậy, làm thế nào để *.d.tstệp có thể biết tệp JS nào đang ánh xạ tới chính nó?

Sẽ rất tốt nếu ai đó có thể cho tôi một ví dụ.

Tệp "d.ts" được sử dụng để cung cấp thông tin loại bản in về API được viết bằng JavaScript. Ý tưởng là bạn đang sử dụng một cái gì đó như jQuery hoặc gạch dưới, một thư viện javascript hiện có. Bạn muốn tiêu thụ những thứ từ mã bản in của bạn.

Thay vì viết lại jquery hoặc gạch dưới hoặc bất cứ điều gì trong bản thảo, thay vào đó bạn có thể viết tệp d.ts, chỉ chứa các chú thích loại. Sau đó, từ mã bản in của bạn, bạn nhận được các lợi ích bản in của kiểm tra kiểu tĩnh trong khi vẫn sử dụng thư viện JS thuần túy.

dlà viết tắt của Tệp khai báo :

Khi tập lệnh TypeScript được biên dịch, có một tùy chọn để tạo tệp khai báo (với phần mở rộng .d.ts) có chức năng như một giao diện cho các thành phần trong JavaScript được biên dịch. Trong quá trình trình biên dịch loại bỏ tất cả các phần thân hàm và phương thức và chỉ giữ lại chữ ký của các loại được xuất. Sau đó, tệp khai báo kết quả có thể được sử dụng để mô tả các loại TypeScript ảo được xuất của thư viện hoặc mô-đun JavaScript khi nhà phát triển bên thứ ba sử dụng nó từ TypeScript.

Khái niệm về tệp khai báo tương tự như khái niệm tệp tiêu đề được tìm thấy trong C / C ++.

declare module arithmetics {
    add(left: number, right: number): number;
    subtract(left: number, right: number): number;
    multiply(left: number, right: number): number;
    divide(left: number, right: number): number;
}

Các tệp khai báo loại có thể được viết bằng tay cho các thư viện JavaScript hiện có, như đã được thực hiện cho jQuery và Node.js.

Bộ sưu tập lớn các tệp khai báo cho các thư viện JavaScript phổ biến được lưu trữ trên GitHub trong DefiniteTyped và typings Registry . Một tiện ích dòng lệnh được gọi là typings được cung cấp để giúp tìm kiếm và cài đặt các tệp khai báo từ kho lưu trữ.

Tôi không thể bình luận và do đó thêm nó như là một câu trả lời.
Chúng tôi đã gặp một số khó khăn khi cố gắng ánh xạ các loại hiện có vào thư viện javascript.

Để ánh xạ một .d.tstệp vào tệp javascript của nó, bạn cần .d.tsđặt tên tệp giống với tệp javascript, giữ chúng trong cùng một thư mục và trỏ mã cần nó vào .d.tstệp.

ví dụ: test.jsvà test.d.tsnằm trong testdir/thư mục, sau đó bạn nhập nó như thế này trong thành phần phản ứng:

import * as Test from "./testdir/test";

Các .d.tstập tin được xuất ra dưới dạng một không gian tên như thế này:

export as namespace Test;

export interface TestInterface1{}
export class TestClass1{}

Ví dụ làm việc cho một trường hợp cụ thể :

Giả sử bạn có mô-đun của tôi mà bạn đang chia sẻ qua npm .

Bạn cài đặt nó với npm install my-module

Bạn sử dụng nó như vậy:

import * as lol from 'my-module';

const a = lol('abc', 'def');

Logic của mô-đun là tất cả trong index.js:

module.exports = function(firstString, secondString) {

  // your code

  return result
}

Để thêm các kiểu chữ, tạo một tệp index.d.ts:

declare module 'my-module' {
  export default function anyName(arg1: string, arg2: string): MyResponse;
}

interface MyResponse {
  something: number;
  anything: number;
}

Giống như @takeshin đã nói .d là viết tắt của tệp khai báo cho bản thảo (.ts).

Vài điểm cần được làm rõ trước khi tiếp tục trả lời bài đăng này -

1. Bản đánh máy là siêu cú pháp cú pháp của javascript.
2. Bản mô tả không tự chạy, nó cần được dịch mã thành javascript ( bản thảo để chuyển đổi javascript )
3. "Định nghĩa kiểu" và "Kiểm tra kiểu" là các chức năng bổ trợ chính mà bản thảo cung cấp qua javascript. ( kiểm tra sự khác biệt giữa tập lệnh loại và javascript )

Nếu bạn đang suy nghĩ nếu typecript chỉ là superset cú pháp thì nó mang lại lợi ích gì - https://basarat.gitbooks.io/typescript/docs/why-typescript.html#the-typescript-type-system

Để trả lời bài này -

Như chúng ta đã thảo luận, typecript là siêu dữ liệu của javascript và cần được dịch mã thành javascript. Vì vậy, nếu một thư viện hoặc mã bên thứ ba được viết bằng bản in, cuối cùng nó sẽ được chuyển đổi thành javascript, dự án javascript có thể được sử dụng nhưng ngược lại không đúng.

Dành cho người cũ

Nếu bạn cài đặt thư viện javascript -

npm install --save mylib

và thử nhập nó trong mã bản in -

import * from "mylib";

bạn sẽ nhận được lỗi.

"Không thể tìm thấy mô-đun 'mylib'."

Như được đề cập bởi @Chris, nhiều thư viện như gạch dưới, Jquery đã được viết bằng javascript. Thay vì viết lại các thư viện đó cho các dự án bản thảo, một giải pháp thay thế là cần thiết.

Để thực hiện việc này, bạn có thể cung cấp tệp khai báo kiểu trong thư viện javascript có tên là * .d.ts, như trong trường hợp trên mylib.d.ts. Tệp khai báo chỉ cung cấp khai báo kiểu của các hàm và biến được định nghĩa trong tệp javascript tương ứng.

Bây giờ khi bạn cố gắng -

import * from "mylib";

mylib.d.ts được nhập vào, hoạt động như một giao diện giữa mã thư viện javascript và dự án bản thảo.

Câu trả lời này giả định rằng bạn có một số JavaScript mà bạn không muốn chuyển đổi sang TypeScript, nhưng bạn muốn hưởng lợi từ việc kiểm tra loại với các thay đổi tối thiểu đối với .js. Một .d.tstệp rất giống với tệp tiêu đề C hoặc C ++. Mục đích của nó là xác định một giao diện. Đây là một ví dụ:

mashString.d.ts

/** Makes a string harder to read. */
declare function mashString(
    /** The string to obscure */
    str: string
):string;
export = mashString;

mashString.js

// @ts-check
/** @type {import("./mashString")} */
module.exports = (str) => [...str].reverse().join("");

main.js

// @ts-check
const mashString = require("./mashString");
console.log(mashString("12345"));

Mối quan hệ ở đây là: mashString.d.tsxác định một giao diện, mashString.jsthực hiện giao diện và main.jssử dụng giao diện.

Để có được loại kiểm tra để làm việc, bạn thêm // @ts-check vào các .jstập tin của bạn . Nhưng điều này chỉ kiểm tra main.jssử dụng giao diện chính xác. Để đảm bảo mashString.jsthực hiện chính xác, chúng tôi thêm /** @type {import("./mashString")} */trước khi xuất.

Bạn có thể tạo các .d.tstệp ban đầu của mình bằng cách sử dụng tsc -allowJs main.js -dsau đó chỉnh sửa chúng theo yêu cầu để cải thiện việc kiểm tra loại và tài liệu.

Trong hầu hết các trường hợp, việc thực hiện và giao diện có cùng tên, ở đây mashString. Nhưng bạn có thể có triển khai thay thế. Ví dụ, chúng tôi có thể đổi tên mashString.jsthành reverse.jsvà có một giải pháp thay thế encryptString.js.