🐕 TypeScriptについて

作成日： 2023/04/19

TypeScriptとは

TypeScriptは、Microsoftが開発したJavaScriptの型をサポートするプログラミング言語です。JavaScriptの構文をベースにしていますが、静的型付け機能を備えています。静的型付けは、コードを実行する前に型の一貫性をチェックすることで、実行時のエラーを減らし、コードを簡単に理解し、保守性を向上させます。

TypeScriptは、JavaScriptの弱めの型付け言語を補完することにより、より厳密で安全なコードを書くことができます。この言語は、Angular、React、Vue、Node.jsなどの人気のあるJavaScriptのフレームワークやライブラリで使用されています。

TypeScriptのメリット

以下は、TypeScriptを使用することで得られるメリットのいくつかです。

型チェック

JavaScriptは動的型付け言語であり、コンパイラがデータ型を検証しないため、ランタイムエラーが発生する可能性があります。これはTypeScriptで解決することができます。TypeScriptのコンパイラは、開発者に疑わしい型に関するエラーを報告することができます。これにより、バグを早期に検出できるようになります。

コードの可読性

TypeScriptは、コードをより意図的に構造化することができます。TypeScriptには、先に開発者が指定した型に基づいて細分化された構造があります。一般に、TypeScriptコードは、補完機能が改善され、読み手がコードから推論の手間を省くことができます。

拡張性が高い

TypeScriptはJavaScriptの継承基盤を使用するため、OOPにおいてオブジェクト指向のコードの書き方について容易に学習することができます。JavaScriptには、抽象、継承、インタフェースなどのいくつかのOOP機能があります。TypeScriptは、これらの機能をサポートすることにより、より正確かつ堅牢なアプリケーションを構築できるようになります。

トランスパイル

TypeScriptは、JavaScriptへの自動変換をネイティブコードのJavaScriptへのトランスパイルによって行います。続けざまのフォーマットエラーがない場合、トランスパイルを通じて生成されるコードは、インターネット上で適用可能であることが多く、Node.jsなどの継承動作で使用することができます。

TypeScriptの基礎

TypeScriptにおける変数の型は、次のように指定されます。

let variableName: Type = value;

変数名の後に、コロン（：）で分離した型名を記述します。例えば、次のように記述できます。

let firstName: string = "John";
let age: number = 30;

このコードは、文字列(firstName)と数(age)があります。TypeScriptは、静的型付きであるため、これらの変数がコンパイル時には適切な型であることを確認します。

TypeScriptには、次のような型があります。

number
string
boolean
any
void

数値型

数値型は、整数値と小数値の両方を表現するために使用されます。数値型は、次のように宣言できます。

let variableName: number = value;

文字列型

文字列型は、一連の文字列を表現するために使用されます。文字列は、引用符またはシングルクォートで囲まれています。文字列型は、次のように宣言できます。

let variableName: string = "value";

ブール型

ブール型は、真または偽の値を表します。ブール型は、次のように宣言できます。

let variableName: boolean = value;

その他の型

any型は、変数に様々な値を割り当てることができる汎用型です。TypeScriptを使用する場合、any型は使用を最小限に抑えるようにすることが重要です。

void型は、関数が値を返さないことを指定する際に使用されます。void型を使用する関数は、次のように宣言されます。

function myFunction(): void {
  // ...
}

TypeScriptのインタフェース

TypeScriptでは、インタフェースを使用して、オブジェクトの使用を宣言します。インタフェースは、次のように宣言します。

interface InterfaceName {
  key1: type1;
  key2: type2;
}

InterfaceName、key1、key2、type1、type2に適切な値を設定してください。次に、実際に使用される場合は、インタフェースのキーと値を指定して、オブジェクトを作成できます。

let objName: InterfaceName = {
  key1: value1,
  key2: value2
}

TypeScriptの関数

TypeScriptでは、関数は、次のように定義されます。

function functionName(parameterName: type): returnType {
  // ...
}

関数名は文字列である必要があり、パラメータには型が指定され、戻り値が指定されます。次に、関数の例を示します。

function addNumbers(
  a: number,
  b: number
): number {
  return a + b;
}

addNumbers関数は、2つのパラメータaとbを受け取り、それらを合計して戻り値として返します。

TypeScriptのデコレータ

TypeScriptのデコレータは、クラス、メソッド、変数などの前に@を付けて、特別な意味を持つ関数です。これらは、関数の引数としてhotコンポーネントと共に提供されます。これにより、関数は、クラスを拡張することで振る舞いを変更することなく、既存のメソッドを拡張することができます。

@decoratorName
class ClassName {
  // ...
}

Visual Studio CodeでTypeScriptを設定する

Visual Studio Codeは、TypeScriptで作業するための優れたエディターです。しかし、TypeScriptを使用する際には、設定が必要になります。以下は、設定方法です。

'File' > 'Open Folder'
カレントフォルダーで'右スクロール' > '新規ファイル'
ツールバーで「ファイル」>「TypeScriptを設定」

このプロジェクトファイルが自動的に作成されます。TypeScriptの設定を行うには、このファイルを表示し、必要な構成を行います。

TypeScriptのデバッグ

Visual Studio Codeを使用する場合、TypeScriptプロジェクトのデバッグを行うことができます。デバッグには、実行中のコードにブレークポイントを追加することが必要です。

以下は、Visual Studio CodeでTypeScriptプロジェクトのデバッグを開始する方法です。

ターミナルで「npm start」と入力する。
ツールバーで「デバッグ」>「デバッグの追加構成...」を選択。
構成リストで「Node.jsをデバッグ」を選択する。
構成ファイルでコードください

これで、Visual Studio CodeでTypeScriptプロジェクトのデバッグを開始できます。

結論

以上がTypeScriptの基本です。TypeScriptは、開発者に静的型付けやOOP機能を提供し、保守性の向上やシンプルなデバッグを可能にします。また、TypeScriptはJavaScriptの柔軟性を維持しながら、より安全なコードを書くために役立ちます。始めるには、専用のIDE操作を勉強してください。

スタイン博士

フルスタックエンジニア。徒然なるままに記事を投稿していきます。日々学習。