フロントエンジニア、AWSエンジニア目指す方必見! TypeScript導入!

どういう方が読んだ方がいいか

・JavaScriptをある程度知っている方
・AWSエンジニアを目指される方
・フロント開発をされる方

TypeScriptとは

Microsoftが開発したプログラミング言語で、JS(Java Script)をさらに拡張した言語です。
静的型付け機能(static typing)となっています。

新機能などがJSに追加されますが、JSのようにブラウザで実行できません。
新しい機能をTS(TypeScript)からJSにコードを変換(コンパイル)し、
開発者が正しいコードを書くことを支援します。

そして型を検索する機能があります
そしてJavaScriptの上位集合です。

TSのすごいとこ

・型検索
・JSの新機能
・JSにはない機能(インターフェースやジェネリック)
・メタプログラミング
・いろんなオプシション
・TSを使わないプロジェクトでも役立つツール

TSを使った方がいい理由

・ドキュメントとしての側面を利用
・Linterとして利用
・ES5へのコンパイラ

TypeScriptを動かしてみた

このサイトのplaygroundから試しに動かせます。

const message: string = 'hello world';
console.log(message);

"use strict";
const message = 'hello world';
console.log(message);

このように変換されます。

TypeScriptのインストール

% npm install -g typescript

added 1 package, and audited 2 packages in 795ms

found 0 vulnerabilities

これで全てのフォルダにtypescriptが入ります。

Typescriptの公式ドキュメント

TsをJSに変換

インストールした後は以下のコマンドが使えます。

$ tcs　ファイル名

これはTSをJSにコンパイルするコマンドです

実際に動かします。まずはVScodeなどで下のように記述します。

index.ts

let greeting: string = 'こんにちは';
console.log(greeting);

tsからjsにコンパイルするコマンドを実行すると

% tsc index.ts

index.jsが作成されます。こんな感じのコードになります。

index.js

var greeting = "こんにちは";
console.log(greeting);

以下のコマンドで実行すると以下のようになります。

 % node index.js
こんにちは

資料