TypeScriptの「* .d.ts」について

私は*.d.tsTypeScriptの初心者なので、気になります。そして、私は誰かに、この種類のファイルはC ++の「ヘッドファイル」のようなものですが、JSのみであると言われました。しかし、私は純粋にJSファイルを変換することはできません*.d.ts私はforcely変更しない限り、ファイル*.jsへ*.ts。つまり、JSファイル、TSファイル、ファイルの3つのファイルがあり*.d.tsます。

1. それらの間の関係は何ですか？

2. *.d.tsファイルを使用するにはどうすればよいですか？*.tsファイルを完全に削除できるということですか？

3. もしそうなら、どの*.d.tsJSファイルがそれ自体にマッピングされているかをファイルはどのように知ることができますか？

誰かが私に例を示すことができればそれは非常に素晴らしいでしょう。

「d.ts」ファイルは、JavaScriptで記述されたAPIに関するtypescriptタイプ情報を提供するために使用されます。アイデアは、jQueryやアンダースコア、既存のJavaScriptライブラリのようなものを使用しているということです。あなたはあなたのtypescriptコードからそれらを消費したいです。

typescriptでjqueryやアンダースコアなどを書き換えるのではなく、代わりに、型注釈のみを含むd.tsファイルを書き込むことができます。次に、typescriptコードから、純粋なJSライブラリを使用しながら、静的型チェックのtypescriptの利点を得ます。

d宣言ファイルを意味します：

TypeScriptスクリプトがコンパイルされると、コンパイルされたJavaScriptのコンポーネントへのインターフェースとして機能する宣言ファイル（拡張子.d.ts）を生成するオプションがあります。その過程で、コンパイラーはすべての関数とメソッドの本体を取り除き、エクスポートされる型のシグニチャーのみを保持します。結果の宣言ファイルは、サードパーティの開発者がTypeScriptから使用するときに、JavaScriptライブラリまたはモジュールのエクスポートされた仮想TypeScriptタイプを記述するために使用できます。

宣言ファイルの概念は、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;
}

型宣言ファイルは、jQueryとNode.jsの場合と同様に、既存のJavaScriptライブラリ用に手動で作成できます。

一般的なJavaScriptライブラリの宣言ファイルの大規模なコレクションは、GitHubのDefinitelyTypedおよびTypings Registryでホストされています。リポジトリから宣言ファイルを検索してインストールするために、typingsと呼ばれるコマンドラインユーティリティが提供されています。

コメントできなかったので、これを回答として追加します。
既存の型をJavaScriptライブラリにマップしようとすると、少し苦労しました。

.d.tsファイルをそのjavascriptファイルにマップするには、ファイルにjavascriptファイル.d.tsと同じ名前を付け、それらを同じフォルダーに保持し、その.d.tsファイルを必要とするコードをポイントする必要があります。

例えば：test.jsとtest.d.tsしているtestdir/フォルダが、その後、あなたがこのようにそれをインポートするコンポーネント反応します：

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

.d.tsファイルは、このような名前空間として輸出されました。

export as namespace Test;

export interface TestInterface1{}
export class TestClass1{}

例を働いたために、特定のケース：

npmを介して共有しているmy-moduleがあるとします。

あなたはそれをインストールします npm install my-module

このように使用します：

import * as lol from 'my-module';

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

モジュールのロジックはすべてにありindex.jsます：

module.exports = function(firstString, secondString) {

  // your code

  return result
}

タイピングを追加するには、ファイルを作成しますindex.d.ts。

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

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

@takeshinが言ったように、.dはtypescript（.ts）の宣言ファイルを表します。

この投稿への回答に進む前に明確にすべきいくつかのポイント-

1. TypescriptはJavaScriptの構文のスーパーセットです。
2. Typescriptはそれ自体では実行されません。javascriptに変換する必要があります（typescriptからjavascriptへの変換）。
3. 「型定義」と「型チェック」は、typescriptがjavascriptを介して提供する主要なアドオン機能です。（タイプスクリプトとJavaScriptの違いを確認してください）

typescriptが構文のスーパーセットにすぎない場合、https： //basarat.gitbooks.io/typescript/docs/why-typescript.html#the-typescript-type-systemを使用するとどのような利点がありますか。

この投稿に回答するには-

すでに説明したように、typescriptはjavascriptのスーパーセットであり、javascriptに変換する必要があります。そのため、ライブラリまたはサードパーティのコードがtypescriptで記述されている場合、最終的にはjavascriptプロジェクトに使用できるjavascriptに変換されますが、その逆は成り立ちません。

元の場合-

JavaScriptライブラリをインストールする場合-

npm install --save mylib

そしてそれをtypescriptコードでインポートしてみてください-

import * from "mylib";

エラーが発生します。

「モジュール 'mylib'が見つかりません。」

@Chrisが述べたように、アンダースコア、Jqueryなどの多くのライブラリはすでにJavaScriptで記述されています。typescriptプロジェクト用にこれらのライブラリを書き直す代わりに、別のソリューションが必要でした。

これを行うには、上の例のmylib.d.tsのように、*。d.tsという名前のJavaScriptライブラリで型宣言ファイルを提供できます。宣言ファイルは、それぞれのJavaScriptファイルで定義された関数と変数の型宣言のみを提供します。

今あなたがしようとすると-

import * from "mylib";

mylib.d.tsがインポートされ、javascriptライブラリコードとtypescriptプロジェクト間のインターフェースとして機能します。

この回答は、TypeScriptに変換したくないJavaScriptがあることを前提としていますが、への最小限の変更で型チェックを利用したいと考えています.js。.d.tsファイルには、非常に多くのCまたはC ++ヘッダファイルのようなものです。その目的は、インターフェースを定義することです。次に例を示します。

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"));

ここでの関係mashString.d.tsは、インターフェースの定義、インターフェースのmashString.js実装、およびインターフェースのmain.js使用です。

タイプチェックを機能さ// @ts-check せるには、.jsファイルに追加します。しかし、これmain.jsはインターフェースを正しく使用することを確認するだけです。mashString.jsそれが正しく実装されるようにするため/** @type {import("./mashString")} */に、エクスポートの前に追加します。

を使用して初期.d.tsファイルを作成tsc -allowJs main.js -dし、必要に応じて手動で編集して、型チェックとドキュメントを改善できます。

ほとんどの場合、ここでは実装とインターフェースの名前は同じですmashString。ただし、別の実装も可能です。たとえば、名前mashString.jsを変更しreverse.jsて別の名前を付けることができencryptString.jsます。