【TypeScript入門】node.jsとwebpackを使ったTypeScriptの始め方

2023年5月10日TypeScript

TypeScriptとは

TypeScriptとは、JavaScriptを拡張して作られたプログラミング言語です。
2014年頃にMicrosoftによって開発・発表されています。

TypeScriptは変数、引数に型の指定ができるので、コンパイル時にエラー確認ができるので、JavaScriptと異なりプログラム実行エラーよりバグも事前に防ぐことができます。

TypeScriptで書かれたコードをコンパイルするとJavaScriptのコードに変換されます。
TypeScriptでJavaScriptのライブラリは使用することもできます。

Homebrewのインストール

homebrewは以下のコマンドでインストールすることができます。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

homebrewのバージョンもがあるので、
最新版のhomebrewを確認してインストールすることを推奨します。

homebrewの説明記事があるのでこちらを参考にしてみてください。

スポンサードサーチ

nodebrewのインストール

nodebrew installでnodeをインストールできます。

brew install nodebrew

Node.jsのプロジェクト作成

initコマンドでNodeプロジェクトを作成できます。

npm init -y

スポンサードサーチ

TypeScriptをインストール

TypeScriptのインストールとグローバルインストールの二つを紹介しておきます。

npm install typescript

また、typescriptをインストールするとtscコマンドが使えるようになります。

icon

tscコマンドとはタイプスクリプトコンパイラーの略です。

TypeScriptのインストール

TypeScriptのインストール

npm install typescript

TypeScriptのをグローバルでインストール

npm install -g typescript

TypeScriptのバージョン確認

tsc -v

インストールがされていれば、バージョンが返ってきます。

Version 5.0.4

またインストールされていれば、package.jsonに記載されています。

  "dependencies": {
    "typescript": "^5.0.4",
  }

スポンサードサーチ

typescriptの実行

TypeScriptファイルを実行するとJavaScriptファイルにコンパイルされるので、まずはTypeScriptファイルを実行しましょう。

npx tsc hoge.ts

JavaScriptの実行

TypeScriptファイルをコンパイルするとJavaScriptファイルがで生成されるの、nodeコマンドでJavaScriptを実行することができます。

node hoge.js

tsconfig.jsonとは

TypeScriptの設定ファイルと思って問題ありません。
tsconfig.jsonの記述されている箇所が実行されます。

以下のコマンドで、tsconfigを生成できます。

tsconfig.jsonを生成

npx tsc -init

initコマンドをすると、以下の結果が返ってきます。

kami@kami typescript % npx tsc -init 

Created a new tsconfig.json with:                                                                                       
                                                                                                                     TS 
  target: es2016
  module: commonjs
  strict: true
  esModuleInterop: true
  skipLibCheck: true
  forceConsistentCasingInFileNames: true


You can learn more at https://aka.ms/tsconfig

当然ですが、コメントアウトはされません。
コメントアウトを解除して設定ファイルとして、実行することもできます。

webpackを使ってTypeScriptを実行する

comming soon

TypeScriptTypeScript

Posted by kami