TypeScript は JavaScript のスーパーセットです。これは、TypeScript で JavaScript 構文を使用できることを意味するため、TypeScript を始める前に JavaScript を学習することが最善です。この免責事項を踏まえて、TypeScript とは何なのか、また TypeScript 用のプロジェクトをセットアップする方法について話しましょう。
TypeScript のドキュメントによると、「TypeScript は、JavaScript をベースに構築された、厳密に型指定されたプログラミング言語です。」[1] TypeScript 言語は、開発中の早期にエラーを発見するのに役立つ型構文を追加し、開発チームが成長する間も安全策を維持します。プロジェクトの規模が拡大するにつれて。 TypeScript を使用すると、変数のデータ型とオブジェクトのインターフェイスを定義できます。 TypeScript はこれらの定義を使用して、コンパイル時にコードにエラーがないかチェックし、事前に設定した定義に従っていない場合は通知します。
「そもそも、もっと慎重にできるのに、TypeScript を使用するためだけに、なぜさらにコードを記述する必要があるのでしょうか?」と考えている方は、あなたは間違っていませんが、人間は間違いを犯す可能性があり、長時間作業すると間違いを犯すことがよくあります。これと同じ考えを建設に適用すると、追加の足場と安全手順により、より多くの労力と時間がかかることになりますが、作業現場で注意を払うだけで時間を節約できます。
わかりますか?この屋根職人は時間を節約するために、より多くの時間とリソースを無駄にした可能性があります。これはただの一人の労働者です。さらに多くのチームメンバーが追加され、プロジェクトに取り組んでいる作業員のチームを想像してください。これがソフトウェア開発の現実です。こうした間違いを見つける計画を立てることは、長期的にはあなたとあなたのチームに役立ちます。
次の例は TypeScript ドキュメント [2] から引用していますが、解説は私によるものです。
TypeScript:
function greet(person, date) {
console.log(`Hello ${person}, today is ${date}!`);
}
greet("Brendan");
TypeScript は、greet が呼び出されたときにエラーをキャッチします。 2 つの引数 (person と date) を受け取るように挨拶を定義し、person のみを指定しました。 TypeScript はコードをコンパイルするときにこのエラーを捕捉し、2 番目の引数が必要であることを通知します。ある意味では、TypeScript はコードが作業中にこれらのエラーをキャッチするためのリンターと考えることができますが、型構文を活用してさらに支援することもできます。
function greet(person: string, date: Date) {
console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}
greet("Maddison", Date());
ここで、2 つの引数に型を追加します。toDateString メソッドの person は文字列、date は Date オブジェクトである必要があります。 2 番目の引数 Date() の前にキーワード new を指定せずにgreet を呼び出すと、TypeScript は日付パラメータとして Date の代わりに文字列を受け取ったことを通知します。これで、テスト中に予期しない出力を受け取ったときに、さらに開発を進めてこのエラーを追跡する前に、エラーを修正できます。
TypeScript の動作を確認したので、それを使用するようにプロジェクトを設定する次の手順を見てみましょう。
デフォルトの TypeScript コンパイルはあなたが探しているものではないかもしれません。リンターを使用するのと同様に、ニーズに合わせて TypeScript をカスタマイズする方法もありますが、それ以外にも多くのことができます。
最初のステップは、プロジェクトのルート ディレクトリに tsconfig.json ファイルを作成することです。このファイルは、コンパイル プロセスにどのファイルを含めるべきかを TypeScript に指示します。 tsconfig.json では、JSON ファイルの「includes」キーを使用して、より具体的にしたい場合に含めるディレクトリをルートから指定できます。
function greet(person, date) {
console.log(`Hello ${person}, today is ${date}!`);
}
greet("Brendan");
ここで、「compilerOptions」について話しましょう。選択肢はたくさんあるということを信じてください。これは良いことですが、TypeScript を初めて使用する場合には恐ろしいことでもあります。始めるのに役立つ、人気のある選択肢をいくつか詳しく説明します。
function greet(person: string, date: Date) {
console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}
greet("Maddison", Date());
このオプションを使用すると、TypeScript だけでなく JavaScript ファイルをプロジェクト内にインポートできるようになります。通常、TypeScript はすべてのインポートが TypeScript であると想定しており、インポートされた JavaScript ファイルに対してエラーが発生しますが、このオプションを使用すると、それらのインポートを使用できるため、同じリポジトリ内で TypeScript と JavaScript を操作するときに役立ちます。
{
"include": ["src/**/*"]
}
ES6 の名前空間インポートはオブジェクトのみですが、これは .default なしで require を使用するのと同じであるため、TypeScript がオブジェクトを関数として扱うことを許可しました。このオプションを使用すると、インポートに注意する必要がなく、TypeScript がコードを JavaScript にトランスパイルするときにこの問題が解決されます。
{
"compilerOptions": {
"allowJs": true
}
}
このオプションは、TypeScript がコードを JavaScript にトランスパイルするときに、どの JS 機能がダウングレードされ、どの機能がそのまま残されるかを変更します。最近のほとんどのブラウザは ES6 をサポートしているため、es6 が適切な選択ですが、ニーズに合わせてこのオプションに任意のバージョンの ECMAScript を指定できます。
{
"compilerOptions": {
"esModuleInterop": true
}
}
このフラグは、さまざまな型チェック動作を有効にします。これにより、エラーが少なく、より強力なコードベースが得られます。特定の型チェック動作を除外したい場合は、ドキュメント [3] を確認し、そのオプションを false に設定してください。いくつかの型チェック動作のみが必要な場合は、strict を使用する代わりにそれらをオンにすることを検討します。
{
"compilerOptions": {
"target": "es6"
}
}
TypeScript がコードを使用可能な JavaScript にトランスパイルするとき、このオプションはそれらのファイルをこのディレクトリに出力します。
function greet(person, date) {
console.log(`Hello ${person}, today is ${date}!`);
}
greet("Brendan");
このオプションは、トランスパイルされたすべての JavaScript ファイルの出力を停止します。 outDir について話したばかりなので、これはばかげているように聞こえるかもしれませんが、TypeScript は常にファイルを出力し、outDir はファイルを正しい場所に誘導します。 noEmit は、コードをトランスパイルしてバンドルするために Babel や Webpack などの別のツールをすでに使用している場合に機能します。この場合の発行は、役に立たない JavaScript ファイルを作成することを意味します。
これで完了です。これらは、TypeScript の構成をセットアップするのに役立つ 7 つのオプションと、より安定したコード ベースの作成に TypeScript がどのように役立つかです。 tsconfig.json に追加する一般的なオプションについては、Matt Pocock の「TSConfig Cheat Sheet」を読んで、これらのオプションを実装する前に必ず TSConfig の TypeScript ドキュメントを参照することをお勧めします。
コーディングを楽しんでください!
タイラー・マイヤー
[1] https://www.typescriptlang.org/
[2] https://www.typescriptlang.org/docs/handbook/2/basic-types.html
[3] https://www.typescriptlang.org/tsconfig/
[4] https://www.totaltypescript.com/tsconfig-cheat-sheet
以上がTypeScript: TSConfig オプションの使用を開始するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
