web-dev-qa-db-ja.com

TypeScriptの "* .d.ts"について

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

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

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

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

どうもありがとう！誰かが私に例を挙げることができればそれは非常にいいでしょう。

typescript.d.ts
208
user3221822

"d.ts"ファイルは、JavaScriptで書かれたAPIに関するTypeScript型情報を提供するために使用されます。これは、既存のJavaScriptライブラリであるjQueryやアンダースコアなどを使用しているという考えです。あなたはあなたのTypeScriptコードからそれらを消費したいです。

TypeScriptでjqueryやアンダースコアなどを書き直すのではなく、代わりにd.tsファイルを書くことができます。それから、あなたのTypeScriptコードから、あなたはまだ純粋なJSライブラリを使いながら、静的型チェックのTypeScriptの利点を得る。

219
Chris Tavares

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ライブラリ用の宣言ファイルの大規模なコレクションは、 DefinitelyTyped および Typings Registry でGitHubにホストされています。 typings というコマンドラインユーティリティが、リポジトリからの宣言ファイルの検索とインストールに役立ちます。

45
takeshin

私はコメントできなかったので、これを答えとして追加しました。既存の型をJavaScriptライブラリにマッピングしようとすると、少し苦痛がありました。

D.tsファイルをそのjavascriptファイルにマップするには、d.tsファイルにjavascriptファイルと同じ名前を付け、それらを同じフォルダに保存し、それを必要とするコードを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{}
29
ConstantinM

@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プロジェクトの間のインタフェースとして機能します。

5
Keshav

動作例特定の場合：

あなたが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;
}
3
Boris Yakubchik