一般社団法人 全国個人事業主支援協会

COLUMN コラム

以前、Webページ作成でTypeScriptという言語を使ったことがありました。
JavaScriptよりも大規模開発(特に複数人が同じソースを修正、保守する際)に向いているな、と思ったことがあり、きちんと勉強していつでも使えるようになろう、、、と思った矢先、別の業務へ移動することになってしまったため、勉強が中途半端で止まっていました。
ここでは、以前開発した際にTypeScriptに関して得た情報やTipsなどをメモしておきたいと思います。

公式ページ

まずはこちら。。。
https://www.typescriptlang.org/

最新バージョンが3.92(2020年5月25日現在)。

JavaScriptとの違いは!?

同じことがJavaScriptでもできるけど、何でTypeScriptでやった方が良いの!?という疑問がわいてきた( ̄ー ̄)
ということで、JavaScriptとの違いやメリット・デメリットについて上げていきたいと思います。

  1. TypeScriptではJavaScriptと同様の構文が使用できる
  2. TypeScriptのコードをコンパイルすることで、JavaScriptのコードに変換できる
  3. JavaScriptでは動的型付け→実行時に型が決まる
    TypeScriptでは静的型付け→コンパイル時に型が決まる
    ※型の不一致がある場合はコンパイル時にエラーが出るため、実行前にエラー個所を特定できる
  4. TypeScriptはクラス作成ができる
    おおお!(C++、Java経験者の私としてはありがたい機能だやっほい!)

インストール&コンパイル

インストールにはnpmが必要です。
コマンドプロンプト(ターミナル)上で下記のコマンドを実行し、TypeScriptをインストールします。

$ npm install -g typescript

TypeScriptファイルを保存したディレクトリにて下記のコマンドを実行すると、JavaScriptファイルへ変換できます。

$ tsc

メリット

  • 型を事前に宣言するため、エラーを未然に防ぐことができる
    ソースをレビューする際にもエラーを指摘しやすい
  • JavaScriptと互換性がある

デメリット

  • 日本語のリファレンスが少ない
  • 学習コストがかかる

すぐに参照できるリファレンス

公式ページ内にハンドブックなるものがある!
型宣言の仕方や高度なソースの記述など、分からなくなったらここですぐに調べるべし(^o^)

https://www.typescriptlang.org/docs/handbook/

 

なんとこちらでお試し動作確認ができる!

https://www.typescriptlang.org/play/

 

サンプルコード

interface User {
  name: string;
  id: number;
}

class UserAccount {
  name: string;
  id: number;
  constructor(name: string, id: number) {
    this.name = name;
    this.id = id;
  }
}

const user: User = new UserAccount("Yamada", 1);
const user2: User = new UserAccount("Tanaka", 2);

console.log(user.id)
console.log(user.name)
console.log(user2.id)
console.log(user2.name)

終わりに

久しぶりにTypeScriptのチュートリアルやらリファレンスやらを参照してみると、型宣言してむやみな代入や無駄に発生するエラーなどを防ぐことができるため、使いこなせると便利そう。
日頃からの復習や簡単なアプリ作りなどをして、いつでも使えるように身につけていきたいです(^-^)

この記事をシェアする

  • Twitterでシェア
  • Facebookでシェア
  • LINEでシェア