目次
こんにちは、十一月入社したばかり、Benと申します！これから Typescript を紹介していきたいと思います！よろしくお願いいたします！
ちなみに、カバー画像は chatGPT が作ってくれたものです！プロンプトは 「クリスマスっぽいカバーを作ってください」です。 AIってすごく便利ですね (笑)
早速 TypeScript のコードを見ましょう！
TypeScriptってなに？
TypeScript は JavaScript の全ての要素を含みつつ、その上で静的な型を追加しています。この型の導入により、コードの可読性や保守性が向上し、開発および保守のプロセスで発生する可能性のあるエラーを減少させることが期待されます。
TypeScript はシンプルで読みやすい構文を持ち、開発者が変数の型を宣言するための型注釈を使用することを許可しています。この型のサポートにより、エラーをコンパイル時に検出でき、コードの品質が向上します。さらに、TypeScript は最新の ECMAScript 標準をサポートしており、開発者は JavaScript の新しい機能を十分に活用することができます。
なぜ TypeScript をお勧めしますか？
- より優れた開発ツールサポート：例えば、しっかり Type を書きましたら、vscode で自動補完やスマートなヒントとか、迅速なリファクタリングもできます。
- より安全なコード：TypeScript の静的型機構は潜在的なエラーを検出し、コードの信頼性を向上させるのに役立ちます。特に大規模なプロジェクトで作業しているチームにとってこれは重要です。
TypeScriptの基本的な適用法を見てみましょう
まず、以下のコードを使用して TypeScript の基本的な適用法を紹介します。
ここでは、idealump を文字列として定義しています。言い換えれば、その後 idealump は文字列しか受け付けないことを意味します。もし他のものとして定義しようとすると、VSCode はエラーを出てきます ( 'string[]' の型は 'string' の型に代入できません ) 。
もう一つ例を見てみましょう。idealump は文字列なのに、なぜ map を使用しているのでしょうか？これは JavaScript では警告されませんが、TypeScript ではエラーになります ( 'string' 型に 'map' プロパティは存在しません。 )。
TypeScript の基本構文の簡単な紹介
さて、TypeScript の基本構文を見てみましょう！
-
文字列、数値、およびブール型
-
配列
-
インターフェース
インターフェースはオブジェクトの形状を定義するために使用され、同じ構造を複数の場所で再利用することができます。
personオブジェクトは、Introduce型に定義された型に合致しています。つまり、nameキーの型は文字列であり、nationalityキーの型も文字列であることを意味します。言い換えれば、Introduce型を使用する場合、これらの2つのキーしか存在してはならず、その型もIntroduce型で定義されたものと一致している必要があります。person2オブジェクトもIntroduce型と等しくするようにしていますが、その内部のキーはnationalityが不足し、companyが余分であるため、最初に定義したIntroduce型と一致していません。そのため、TypeScript はエラーを報告します。また、TypeScriptを使用する利点の一つは、
personの値を取得しようとする際に、VSCodeがどのキー値を選択できるかを自動的に提示してくれることです。
-
関数については、一つずつ見ていきましょう
これは
greetPersonと呼ばれる関数で、2つのパラメータ、つまりnameとgreetingを受け取ります。そして、これらの型はどちらも文字列です。greetingの隣には「?」があり、これはオプションのパラメータを意味し、あってもなくても良いことを示します。最後に、
:stringが見られます。これはこの関数が最終的に文字列を返すことを意味します。
これは TypeScript の文法の一部に過ぎません。これらの例が TypeScript の基本的な構造と使用方法をより良く理解するのに役立つことを期待しています。
それでは、また来週の投稿を楽しみにしてください！
