ただメモができるだけのブラウザアプリ「TextArea」はこちらw

お正月なのでNode.jsをTypeScriptで動かして基本構文を勉強してみる

スポンサーリンク

お正月なので、Node.jsをTypeScriptで動かして基本構文を勉強しますwww

まずはDockerでお勉強環境（動作確認する環境）を作ります。

環境構築

必要なファイルの作成

Dockerfileを以下の内容で作ります。


FROM node:20
# パッケージリストを更新し、vimをインストール
RUN apt-get update && apt-get install -y vim && apt-get clean
WORKDIR /app

次にdocker-compose.ymlを以下の内容で作ります。


services:
  node-dev:
    build: 
      context: .
      dockerfile: Dockerfile
    tty: true
    volumes:
      - .:/app

コンテナを立ち上げ、必要なもののインストール

コンテナを立ち上げ

docker compose up -d

コンテナの中に入り

docker compose exec node-dev bash

必要なものをインストールします。

npm install typescript ts-node ts-node-dev
# tsconfig.jsonファイルを作成
npx tsc --init

動作確認

test.tsファイルを作成し「console.log(‘test’)」と記載して、以下のコマンドで実行できます。

npx ts-node test.ts

Dockerファイルの修正

Dockerfileでpackage.jsonを参照して必要なもののインストールをするように修正します。

FROM node:20
# パッケージリストを更新し、vimをインストール
RUN apt-get update && apt-get install -y vim && apt-get clean
COPY package*.json ./
RUN npm install
WORKDIR /app

再度、コンテナを立ち上げ

docker compose up -d

コンテナの中に入り

docker compose exec node-dev bash

動作確認

npx ts-node test.ts

これでお勉強の準備完了です。

型定義を試してみる

TypeScriptといえば、型定義ということで、型定義の勉強をしてみます。

基本の型定義

以下の基本となる型定義を試してみます。

const 変数名: 型 = 値;

文字列に文字列を入れてみる


const name1: string = "ABC";
console.log(name1);
→ABCが出力される

文字列に数値を入れてみるとエラーになります。

const name2: string = 1; 
console.log(name2);
→エラー

anyにすると何でも入れられちゃいます。

const name1: any = "ABC";
console.log(name1);
→ABCが出力される

const name2: any = 1;
console.log(name2);
→1が出力される

オブジェクト

オブジェクトの場合、以下のように定義します。

const item: {
    id: number,
    name: string
} = {
    id: 1,
    name: "ABC"
}
console.log(item);
→{ id: 1, name: 'ABC' }が出力される

以下のように一部の定義を使用しないとエラーになります。

const item: {
    id: number,
    name: string
} = {
    id: 1
}
console.log(item);

オプションパラメーターのハテナマークをつけておくと、定義しなくてもエラーになりません。

const item: {
    id: number,
    name?: string
} = {
    id: 1
}
console.log(item);
→{ id: 1 }が出力される

オプションパラメーターのハテナマークをつけておくと、undefinedを設定することも可能です。

const item: {
    id: number,
    name?: string
} = {
    id: 1,
    name: undefined
}
console.log(item);
→{ id: 1, name: undefined }が出力される

ちなみに、オプションパラメーターをつけないとエラーになります。

const item: {
    id: number,
    name: string
} = {
    id: 1,
    name: undefined
}
console.log(item);
→エラーになる

ジェネリクスが使える

ジェネリクスとは「抽象化されたデータ型」を表現する機能

実際に利用される時に、型を確定させるという使い方が可能です。

型だけが違う同じ機能を持つ関数やクラスは、ジェネリクスで1つ用意しておくことで、再利用性ができ、ソースコードの保守性が増します。

let getArray = <T>(value: T): T[] => { // <T>という抽象的な型を宣言
  return [value, value, value];
};

console.log(getArray<number>(1)); // 実行時に<T>の部分に型を指定してあげる

Tips

以下、TypeScriptでもJavaScriptでも使えそうなTips

デバッグ

console.logで変数名を記載してあげると、ログ出力時にどの変数のログかが分かるので便利です。


const item: {
    id: number,
    name?: string
} = {
    id: 1,
    name: undefined
}
console.log("item", item);
→item { id: 1, name: undefined }と出力される

文字列操作

` を使って文字列を囲むことで、${} を使えます。${} の中には、変数や式などを埋め込めます。

const name1: String = 'taro'
const test: String = `I am ${name1}.`
console.log(test)
→I am taro.と出力される

数値も入れられちゃいます


const name1: Number = 1 
const test: String = `I am ${name1}.`
console.log(test)
→I am 1.と出力されます

まとめ

TypeScriptの勉強をDocker環境でやってみました！！

スポンサーリンク