タイプスクリプト中の型宣言ファイルは何ですか?
11139 ワード
このポストは、シリーズとbook about TypeScriptの一部です.これは、ゼロからバックエンドとフロントエンド上の完全なタイプスクリプトのアプリケーションを書くことをご案内します.シリーズは、誰にでも無料でPDF電子ブックとして利用可能です.
あなたはおそらくファイル拡張子のようなファイルを見たことがあります.いくつかのJavaScriptまたはTypesScriptプロジェクト(ライブラリやフレームワーク)の前に、これらのファイルとは何かを疑問に思う.型スクリプトでは、型宣言ファイルと呼ばれます.何が実際にあるかを調べましょう.
簡単な例をtypemcriptコードで作成しましょう.名前を入力するフォルダを作成します.そこにコードがあります.
名前を付けたファイルを作成します.D . TSとファイルのユーザーリストからのインターフェイスのユーザーを移動します.この新しいファイルへのts :
通常、型を書くことはありません.D . TS .tsファイル.しかし、.D . TSファイルは、パッケージやライブラリであり、もともとJavaScriptで書かれているプロジェクトで使用されます.JavaScriptライブラリを持っていて、ライブラリをTypeScriptプロジェクトで使用する機能を追加する必要がある場合は、作成する必要があります.D . TSファイル.もう一つのケースは、あなたがあなたのライブラリーをtypescriptで書くときです、しかし、あなたはコンパイルされたJavaScriptコードでそれを出荷します.この場合、TypeScriptコンパイラ(TSC)を使用して、TypeScriptソースコードに基づいて型宣言を自動的に生成できます.
ここにユーザーリストに基づいた例があります.T . TSCを使用してタイプ宣言ファイルを生成しましょう.
多くのライブラリとパッケージのためのタイプ定義を含む巨大なリポジトリがあります.おそらく、“@ types/*”のような名前でDefinitelyTypedパッケージをインストールしているでしょう.これらのパッケージのコードはこのリポジトリにあります.
この動画はお気に入りから削除されています.してください、npm日まで滞在する.
subscribe to my email newsletter
あなたはおそらくファイル拡張子のようなファイルを見たことがあります.いくつかのJavaScriptまたはTypesScriptプロジェクト(ライブラリやフレームワーク)の前に、これらのファイルとは何かを疑問に思う.型スクリプトでは、型宣言ファイルと呼ばれます.何が実際にあるかを調べましょう.
簡単な例をtypemcriptコードで作成しましょう.名前を入力するフォルダを作成します.そこにコードがあります.
const users = [
{
id: "1",
name: "John",
username: "johnsmith11",
age: 55,
level: 23,
},
{
id: "2",
name: "C3PO",
username: "iamnotrobot",
age: 112,
level: 1,
},
];
export const NAME_FIELD_KEY: keyof User = "name";
interface User {
id: string;
name: string;
username: string;
age: number;
level: number;
}
export function getEntityField<Entity>(
entities: Entity[],
fieldName: keyof Entity
): unknown[] {
return entities.map((entity) => entity[fieldName]);
}
export function getUsersName(users: User[]): string[] {
return getEntityField(users, NAME_FIELD_KEY) as string[];
}
const result = getUsersName(users);
console.log(result);
何か他のインターフェイスユーザーを使用する必要がありますか?問題ではなく、インターフェイスの前にexport
を追加します.export interface User {
id: string;
name: string;
username: string;
age: number;
level: number;
}
別のモジュールでモジュールのユーザーリストからこのインターフェイスをインポートできます.しかし、時々、このインターフェースをいくつかのモジュールの共通のものとして使う必要があります.したがって、これらのモジュールの1つからインターフェイスをエクスポートするオプションではありません.インタフェースユーザを指定し、モジュールでそれを使用できる特別なファイルを作成する必要があります.名前を付けたファイルを作成します.D . TSとファイルのユーザーリストからのインターフェイスのユーザーを移動します.この新しいファイルへのts :
export interface User {
id: string;
name: string;
username: string;
age: number;
level: number;
}
モジュールインタフェースリストでこのインターフェースを使用する必要があります.入力からこのインターフェイスをインポートできます.D . TSimport { User } from "./typings";
// ...
export const NAME_FIELD_KEY: keyof User = "name";
// ...
export function getUsersName(users: User[]): string[] {
return getEntityField(users, NAME_FIELD_KEY) as string[];
}
// ...
ファイルのタイプを見てみましょう.より多くの.このファイルでは、変数、関数、および他のコードを記述できません.あなたが書くことができるすべては、タイプまたはインターフェースです.そこで型を定義することができ、どんなモジュールでもそれらを使用することができます.通常、型を書くことはありません.D . TS .tsファイル.しかし、.D . TSファイルは、パッケージやライブラリであり、もともとJavaScriptで書かれているプロジェクトで使用されます.JavaScriptライブラリを持っていて、ライブラリをTypeScriptプロジェクトで使用する機能を追加する必要がある場合は、作成する必要があります.D . TSファイル.もう一つのケースは、あなたがあなたのライブラリーをtypescriptで書くときです、しかし、あなたはコンパイルされたJavaScriptコードでそれを出荷します.この場合、TypeScriptコンパイラ(TSC)を使用して、TypeScriptソースコードに基づいて型宣言を自動的に生成できます.
ここにユーザーリストに基づいた例があります.T . TSCを使用してタイプ宣言ファイルを生成しましょう.
tsc users-list.ts --declaration
その後、ユーザーリストと呼ばれる新しいファイルが表示されます.以下のコードを使用します.import { User } from "./typings";
export declare const NAME_FIELD_KEY: keyof User;
export declare function getEntityField<Entity>(entities: Entity[], fieldName: keyof Entity): unknown[];
export declare function getUsersName(users: User[]): string[];
したがって、その型宣言ファイルを使用すると、ライブラリのAPIと型を使用してライブラリを使用している人に動作する機能を提供します.多くのライブラリとパッケージのためのタイプ定義を含む巨大なリポジトリがあります.おそらく、“@ types/*”のような名前でDefinitelyTypedパッケージをインストールしているでしょう.これらのパッケージのコードはこのリポジトリにあります.
この動画はお気に入りから削除されています.してください、npm日まで滞在する.
subscribe to my email newsletter
Reference
この問題について(タイプスクリプト中の型宣言ファイルは何ですか?), 我々は、より多くの情報をここで見つけました https://dev.to/kovalevski/what-are-type-declaration-files-in-typescript-53ddテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol