ホームページ > 記事 > ウェブフロントエンド > Js は TypeScript と接続します

Js は TypeScript と接続します

php中世界最好的语言オリジナル: 2018-06-08 11:26:341536ブラウズ

今回は、Js と TypeScript の接続についてお届けします。Js と TypeScript を使用する際の注意点について、実際の事例を見てみましょう。

はじめに

TypeScript は JavaScript の型のスーパーセットです。これは TypeScript のドキュメントで紹介されている文です。

私の理解では、TypeScript は JavaScript に基づいて強く型付けされた言語の機能を導入しています。開発者はプログラミング開発に TypeScript 構文を使用し、最終的に変換ツールを使用して TypeScript を JavaScript に変換します。

TypeScript を使用すると、ネイティブ JavaScript での開発によって引き起こされる弱い型指定言語の落とし穴を回避できます。 (何を入力すればいいですか?呼び出し後に何を返すべきですか?ソースコードを見てみましょう...)

うーん!非常に優れた、強力に型指定された JavaScript、非常に優れています。しかし、私は NPM の多くのライブラリの細心の注意を払った人道的配慮には耐えられません o(Tヘト)

心配しないでください、多くのライブラリは現在ひそかに TypeScript をサポートしています。たとえサポートするつもりがなくても、無私無欲のライブラリが存在します。これらをこっそり手伝ってくれる偉い人たちこのライブラリは TypeScript をサポートしています

これがこの記事のテーマである TypeScript 宣言ファイルにつながると思いますが、その存在は TypeScript の導入を支援するためのものです。 JavaScript ライブラリ

宣言ファイルとは何ですか?

は C/C++ *.h ヘッダーファイルに非常に似ています。C/C++ プログラムでサードパーティのライブラリ (.lib/.dll/.so/.a/.la) を参照する場合、 C/C++ コンパイラは、ライブラリ内のエクスポートされた名前と関数の型シグネチャを自動的に認識できないため、インターフェイス宣言にヘッダーファイルを使用する必要があります。

同様に、TypeScript 宣言ファイルは .d.ts 接尾辞が付いた TypeScript コードファイルですが、その役割は、(広義の) JavaScript モジュール内でエクスポートされたすべてのインターフェイスの型情報を記述することです。

TypeScript 宣言ファイルの記述と仕様については、次の公式ドキュメントと優れたブログ投稿を参照してください:

https://www.tslang.cn/docs/handbook/declaration-files/introduction.html
http://www.jb51.net/article/138217.htm

公式ドキュメントによると、次の2つのバンドル方法があります:

npmパッケージにバンドル
公開@types 組織

は、前述のように npm パッケージにバンドルされており、npm が ts プロジェクトにライブラリをインストールし、コードファイルにインポートした後、直接使用できます。

一部のライブラリが公式にメンテナンスされていない場合は、npm がライブラリをインストールした後、npm install @types/library name を実行してライブラリの宣言ファイルをインストールして使用することができます。 TypeScript バージョン 2.0 以降では、ライブラリをインポートするときに、指定されたライブラリが設定されたインクルードパスに見つからない場合、node_modules の @types でライブラリが検索されるという原則があります。

一般的に言えば、公式の推奨はリリースステートメントドキュメントを書く最初の方法です。最初のバンドル方法を説明するために例を直接使用してみましょう。

例

まず、TypeScript プロジェクトを初期化します。ディレクトリ構造は次のとおりです。

tsconfig.json の構成は次のとおりです。

{
 "compilerOptions": {
 "target": "es5",
 /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
 "module": "commonjs",
 /* Specify module code generation: 'none', commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
 "allowJs": true,
 "outDir": "./dist",
 /* Redirect output structure to the directory. */
 /* Allow javascript files to be compiled. */
 "strict": true /* Enable all strict type-checking options. */
 },
 "include": [
 "src/**/*"
 ]
}

ご覧のとおり、モジュール a を作成してバンドルしましたそれを含む宣言ファイル、モジュール a、つまり src/a/index.js には次の内容があります:

const NAME = 'A';
let call = (who) => {
 console.log('Hello ' + who + '! I am ' + NAME);
}
export default {
 call
}

その宣言ファイル src/a/index.d.ts には次の内容があります:

declare namespace a {
 function call(who: string): void;
}
export default a;

この時点で、エントリファイル src/index を追加できます。 ts はモジュールを導入します:

import a from './a';
a.call('Pwcong');

コマンドラインで tsc を実行した後、ディレクトリ dist に js コードを生成できます:

コマンドノードを実行します。 /dist/index.js を実行して、対応する正しい出力を取得します。

次に、リリースされた NPM ライブラリのインポートをシミュレートし、node_modules ディレクトリの下にディレクトリ b を作成し、Node プロジェクトを初期化します。このときのディレクトリ構造は次のとおりです。

node_modules/b/types/ の内容。 package.jsonは以下の通りです:

{
 "name": "b",
 "version": "1.0.0",
 "main": "./src/index.js",
 "types": "./types/index.d.ts"
}

node_modules/b/src/index.js 内容は以下の通りです:

const NAME = 'B';
let call = (who) => {
 console.log('Hello ' + who + '! I am ' + NAME);
}
module.exports = {
 call
}

声明文件 node_modules/b/types/index.d.ts 内容如下：

declare namespace b {
 function call(who: string): void;
}
export = b;

这时，我们修改 src/index.ts ：

import a from './a';
a.call('Pwcong');
import b = require('b');
b.call('Pwcong');

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Js は TypeScript と接続します

関連記事