d.ts ファイルの使用方法の詳細な説明-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

d.ts ファイルの使用方法の詳細な説明

php中世界最好的语言

Apr 28, 2018 pm 01:49 PM

書類詳しい説明

今回は、d.ts ファイルの使用について詳しく説明します。d.ts ファイルを使用する際の注意事項は何ですか?実際の事例を見てみましょう。

はじめに

この記事では主に、typescript 記述ファイル (xxx.d.ts などの d.ts で終わるファイル名) の書き方について説明します。

私は最近jsからtsに切り替え始めました。ただし、jquery などの一部の記述ファイル (d.ts) は、他の人が作成した npm install @types/jquery を介してダウンロードできます。ただし、社内のニッチなパブリックライブラリや内部パブリックライブラリ、または以前に記述されたパブリック JS コードには、記述ファイルを手動で記述する必要があるものがまだいくつかあります。

私も以前インターネットで情報を探しましたが、まだ不明瞭でしたので、他の人の参考になればと思い、調査結果を記録しました。

js のみを記述する場合は、ほとんどの

エディタが d.ts ファイルを認識し、js コードを記述するときにスマートなプロンプトを表示できます。効果は次のようになります:

詳細については、私が以前に書いたいくつかの記事を読むことができます: http://www.jb51.net/article/138211.htm

通常、js を記述するときは、 js を導入する 2 つの方法方法:

1、HTML ファイルの <script> タグを通じてグローバル変数を導入します。 2. モジュールローダーを通じて他の js ファイルを要求します: 例: var j=require('jquery')。 グローバル型 まず、最初の方法を例に挙げます。 変数たとえば、現在グローバル変数がある場合、対応する d.ts ファイルは次のように記述されます。 <pre class="brush:php;toolbar:false">declare var aaa:numberキーワードdeclareとは宣言という意味です。グローバル変数は aaa 、型は数値型（number）です。もちろん、文字列型などにすることもできます: <pre class="brush:php;toolbar:false">declare var aaa:number|string //注意这里用的是一个竖线表示"或"的意思定数の場合は、キーワード const を使用してそれを表します: <pre class="brush:php;toolbar:false">declare const max:200Function 上記のグローバル変数の書き方から、次のようになります。 グローバル関数<a href="http://www.php.cn/code/6786.html" target="_blank">を自然に推論することができます書き方は以下の通りです: <pre class="brush:php;toolbar:false">/** id是用户的id，可以是number或者string */ decalre function getName(id:number|string):string最後の文字列は関数の戻り値<a href="http://www.php.cn/code/6029.html" target="_blank">の型を表します。関数が値を返さない場合は、void として表現できます。 js で呼び出すと、プロンプトが表示されます: <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/a6dd4943eb16778383fb7e917af3eb57-1.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/>上で書いたコメントは、js を記述するときにプロンプトを表示することもできます。 場合によっては、同じ関数を複数の方法で記述することができます: <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/a6dd4943eb16778383fb7e917af3eb57-2.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/><pre class="brush:php;toolbar:false">get(1234) get("zhangsan",18)その後、対応する d.ts の記述方法: <pre class="brush:php;toolbar:false">declare function get(id: string | number): string declare function get(name:string,age:number): string 一部のパラメータがオプションである場合は、それらが必須ではないことを示すために ? を追加できます。。 <pre class="brush:php;toolbar:false">declare function render(callback?:()=>void): stringjs を呼び出すときは、コールバックを渡すかどうかを指定できます。 <pre class="brush:php;toolbar:false">render() render(function () { alert('finish.') })class もちろん、変数や関数に加えて、クラスもあります。 <pre class="brush:php;toolbar:false">declare class Person { static maxAge: number //静态变量 static getMaxAge(): number //静态方法 constructor(name: string, age: number) //构造函数 getName(id: number): string }コンストラクターは、コンストラクターメソッド<a href="http://www.php.cn/code/11820.html" target="_blank">を表します: <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/a6dd4943eb16778383fb7e917af3eb57-3.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/edb08869e235f64b73a4b39fe237fdfd-4.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/> ここで、static は静的を意味し、静的変数と静的メソッドを表すために使用されます: <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/edb08869e235f64b73a4b39fe237fdfd-5.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/edb08869e235f64b73a4b39fe237fdfd-6.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/>object そうですもちろん、このオブジェクトは可能性があります変数、関数、またはクラスがあります。 <pre class="brush:php;toolbar:false">declare namespace OOO{ var aaa: number | string function getName(id: number | string): string class Person { static maxAge: number //静态变量 static getMaxAge(): number //静态方法 constructor(name: string, age: number) //构造函数 getName(id: number): string //实例方法 } }其实就是把上面的那些写法放到这个namespace包起来的大括号里面，注意括号里面就不需要declare关键字了。 效果：<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/d460061f37b5161eb974e50742f2aabc-7.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/d460061f37b5161eb974e50742f2aabc-8.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/d460061f37b5161eb974e50742f2aabc-9.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/> 对象里面套对象也是可以的：<pre class="brush:php;toolbar:false">declare namespace OOO{ var aaa: number | string // ... namespace O2{ let b:number } }效果：<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/d8a88aefcaeacd78256bb495e57f583d-10.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/> 混合类型有时候有些值既是函数又是class又是对象的复杂对象。比如我们常用的jquery有各种用法：<pre class="brush:php;toolbar:false">new $() $.ajax() $()既是函数又是对象<pre class="brush:php;toolbar:false">declare function $2(s:string): void declare namespace $2{ let aaa:number }效果：作为函数用：<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/d8a88aefcaeacd78256bb495e57f583d-11.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/>作为对象用：<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/d8a88aefcaeacd78256bb495e57f583d-12.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/>也就是ts会自动把同名的namespace和function合并到一起。既是函数，又是类（可以new出来）<pre class="brush:php;toolbar:false">// 实例方法 interface People{ name: string age: number getName(): string getAge():number } interface People_Static{ new (name: string, age: number): People /** 静态方法 */ staticA():number (w:number):number } declare var People:People_Static效果：作为函数使用：<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/d8a88aefcaeacd78256bb495e57f583d-13.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/>类的静态方法：<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/d4edb08b6a79f2c0430c1a94bac1446e-14.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/>类的构造函数：<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/d4edb08b6a79f2c0430c1a94bac1446e-15.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/>类的实例方法：<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/d4edb08b6a79f2c0430c1a94bac1446e-16.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/>模块化除了上面的全局的方式，我们有时候还是通过require的方式引入模块化的代码。比如这样的效果：<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/4ce87eb708ea42e6e23895fa5b7de6d0-17.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/> 对应的写法是这样的：<pre class="brush:php;toolbar:false">declare module "abcde" { export let a: number export function b(): number export namespace c{ let cd: string } }其实就是外面套了一层 module "xxx"，里面的写法和之前其实差不多，把declare换成了export。此外，有时候我们导出去的是一个函数本身，比如这样的：<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/4ce87eb708ea42e6e23895fa5b7de6d0-18.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/> 对应的写法很简单，长这个样子：<pre class="brush:php;toolbar:false">declare module "app" { function aaa(some:number):number export=aaa }以此类推，导出一个变量或常量的话这么写：<pre class="brush:php;toolbar:false">declare module "ccc" { const c:400 export=c }效果：<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/4ce87eb708ea42e6e23895fa5b7de6d0-19.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/> UMD有一种代码，既可以通过全局变量访问到，也可以通过require的方式访问到。比如我们最常见的jquery： <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/72d848997ab9ace307136ee8686b813c-20.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/72d848997ab9ace307136ee8686b813c-21.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/>其实就是按照全局的方式写d.ts，写完后在最后加上declare namespace "xxx"的描述：<pre class="brush:php;toolbar:false">declare namespace UUU{ let a:number } declare module "UUU" { export =UUU }效果这样：作为全局变量使用：<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/72d848997ab9ace307136ee8686b813c-22.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/>作为模块加载使用：<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/10a2dfd2f298242781b52deb2e34cad6-23.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/>其他有时候我们扩展了一些内置对象。比如我们给Date增加了一个format的实例方法：<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/061/021/10a2dfd2f298242781b52deb2e34cad6-24.png?x-oss-process=image/resize,p_40" class="lazy" alt=""/> 对应的d.ts描述文件这样写：<pre class="brush:php;toolbar:false">interface Date { format(f: string): string }相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！推荐阅读：<a href="http://www.php.cn/js-tutorial-394697.html" target="_blank">怎么阻止vuex页面刷新后数据清除 <a href="http://www.php.cn/js-tutorial-394694.html" target="_blank">vuex里mapState,mapGetters使用详解 <a href="http://www.php.cn/js-tutorial-394688.html" target="_blank">操作render执行有哪些方法 </script>

以上がd.ts ファイルの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptの起源：その実装言語の調査Apr 29, 2025 am 12:51 AM

JavaScriptは1995年に発信され、Brandon Ikeによって作成され、言語をCに実現しました。 2。JavaScriptのメモリ管理とパフォーマンスの最適化は、C言語に依存しています。 3. C言語のクロスプラットフォーム機能は、さまざまなオペレーティングシステムでJavaScriptを効率的に実行するのに役立ちます。

舞台裏：JavaScriptをパワーする言語は何ですか？Apr 28, 2025 am 12:01 AM

JavaScriptはブラウザとnode.js環境で実行され、JavaScriptエンジンに依存してコードを解析および実行します。 1）解析段階で抽象的構文ツリー（AST）を生成します。 2）ASTをコンパイル段階のバイトコードまたはマシンコードに変換します。 3）実行段階でコンパイルされたコードを実行します。

PythonとJavaScriptの未来：傾向と予測Apr 27, 2025 am 12:21 AM

PythonとJavaScriptの将来の傾向には、1。Pythonが科学コンピューティングの分野での位置を統合し、AI、2。JavaScriptはWebテクノロジーの開発を促進します。どちらもそれぞれのフィールドでアプリケーションシナリオを拡大し続け、パフォーマンスをより多くのブレークスルーを行います。

Python vs. JavaScript：開発環境とツールApr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScriptはCで書かれていますか？証拠を調べるApr 25, 2025 am 12:15 AM

はい、JavaScriptのエンジンコアはCで記述されています。1）C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2）V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3）JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。

JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

See all articles