leaning diary

【Learning Diary40】TypeScriptとは

【Learning Diary40】TypeScriptとは

TypesScriptとは

TypeScriptは、JavaScriptを拡張して作られたプログラミング言語です。

 

2014年マイクロソフトによって作られました。

 

TypeScriptはコンパイルされるとJavaScriptのコードに変換されます。

 

JabaScriptが使える環境なら利用でき、JabaScriptのライブラリも使える互換性の高さが魅力です。

 

■JavaScriptと違い、変数のデータ型を事前に定義できます。

■JavaScriptの構文が使えます。

 

TypeScriptを使う

 

TypeScriptを使うには、JavaScriptの実行環境を整えていきます。

 

私はNode.jsのインストールが済んでいるので、パッケージ管理ツールのnpmが使える状態です。

 

TypeScriptは以下のコマンドでインストールします。

 

❯ npm install -g typescript

added 1 package in 7s
npm notice
npm notice New major version of npm available! 9.8.1 -> 10.2.4
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.2.4
npm notice Run npm install -g npm@10.2.4 to update!
npm notice

 

以下のコマンドでバージョン情報が表示されたら、インストールは成功しています。

 

❯ tsc -v
Version 5.3.2

 

TypeScriptで「Hello World!」と表示させてみます。

 

まずはディレクトリを作成し、該当のディレクトリへ移動します。

 

❯ mkdir sample-project

❯ cd sample-project

 

同じディレクトリ内に、コンパイルのための設定ファイルを作ります。

 

以下のコマンドで、同ディレクトリ内にtscomfig.jsonという設定ファイルが作成されます。

 

❯ 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

 

このファイルにはTypeScriptをJavaScriptに変換する設定が定義されています。

 

(コマンドの解説は以下のとおりです。)

 

❯ tsc
Version 5.3.2
tsc: The TypeScript Compiler - Version 5.3.2
                                                                             TS
COMMON COMMANDS(#抜粋)

  tsc --init
  Creates a tsconfig.json with the recommended settings in the working directory.

 

TypeScriptを記述するファイルは拡張子をtsとします。

 

❯ touch sample.ts

#sample.ts

let message: string = "Hello World!"

console.log(message)

 

sample.tsのファイルに記述を終えたら、以下のコマンドを実行します。

 

❯ tsc

 

すると該当のディレクトリ内に「sample.js」というファイルが作成されます。

 

「tscomfig.json」の設定をもとにsample.tsがJavaScriptに変換されたファイルがsample.jsです。

 

tscを実行するとjsファイルが作成されます。

 

コマンドプロンプトで作成されたsample.jsを実行できます。

 

❯ node sample.js
Hello World!

 

 

-leaning diary
-