.NETエンジニア・プログラマ向けの技術情報・業界ニュースをお届けします。

  1. FEnet.NETナビ
  2. .NETコラム
  3. プログラミング言語
  4. TypeScriptの使い方を紹介|静的型付けやクラス作成を行いましょう

TypeScriptの使い方を紹介|静的型付けやクラス作成を行いましょう

  • プログラミング言語
公開日時:   更新日時:
TypeScriptの使い方を紹介|静的型付けやクラス作成を行いましょう
この記事でわかること
    基本情報技術者試験の試験対策はこちら>>
    システム
    エンジニア
    TypeScriptはMicrosoftが開発したプログラミング言語なのですね。
    プロジェクト
    マネージャー
    そのとおりです。今回はTypeScriptの基本的なことについてご紹介いたしましょう。

    TypeScript入門


    今回は、TypeScriptの入門編です。
    TypeScriptとは、Microsoftによって開発されたプログラミング言語です。
    JavaScriptを拡張しており、「静的型付け」・「クラスが作成できる」等の特徴があります。
    JavaScriptライブラリもTypeScriptから使用でき、互換性も高いです。
    TypeScriptの入門編に興味のある方はぜひご覧ください。

    TypeScriptとJavaScriptとの違い

    TypeScriptの入門として、TypeScriptとJavaScriptとの違いから説明します。

    ・JavaScriptは動的型付け、TypeScriptは静的型付け
    先ほど説明したように、TypeScriptは「静的型付け」です。
    静的型付けとは、変数のデータ型を事前に決めることができることです。
    こうすることで、コンパイルする時点でエラーが分かります。
    つまり、エラーを未然に防ぐことができます。

    一方、JavaScriptは「動的型付け」です。
    動的型付けとは、プログラムの実行時にデータ型が自動で決まることです。
    この場合、実行してみて初めてエラーが分かります。

    ・TypeScriptではクラスが作成できる
    クラスとはソースコードを効率的に記述するための仕組みです。
    TypeScriptファイルではクラスが簡単に定義でき、ソースコードも読みやすくなります。

    準備

    TypeScript入門編として、TypeScriptを使うための準備をします。
    今回は、JavaScriptをデスクトップで使用できるNode.jsを使用します。
    Node.jsをインストールすると、パッケージ管理ツールのnpm(Node Package Manager)がインストールされます。
    ※ここでは、Node.jsをインストールした前提で進めます。

    まず、TypeScriptをインストールします。
    コマンドプロンプトから以下のコマンドを実行し、TypeScriptをインストールします。

    インストールが成功したかどうか、tscコマンドで確認してみます。

    バージョンが表示されたので、正しくインストールできていることが分かります。

    次に、コンパイルのための設定ファイルを作成します。
    コマンドプロンプトから以下のコマンドを実行してください。

    カレントディレクトリにtsconfig.jsonが作成されました。
    これでTypeScriptを使う準備は完了です。
    次の章で、簡単なTypeScriptを作成してみます。

    TypeScriptでHello World

    入門編としてよくある、Hello Worldを表示するプログラムをTypeScriptで作成してみましょう。

    ここでは、sample.tsというファイルを新規に作成します。
    ※TypeScriptの拡張子は.tsです。

    “string”の部分で明示的に型を指定しています(「静的型付け」)。
    ここがJavaScriptと違うことろです。

    TypeScriptの代表的な型には、以下があります。
    ・String: 文字列型
    ・Number: 数字型
    ・Boolean: true または false
    ・any:全ての型を許容する。事実上JavaScriptと同表記になる
    ・null:JavaScriptのnull型と同じ

    では、TypeScriptをコンパイルします。
    現在、カレントディレクトリには以下のファイルがある状態です。

    コンパイルするには、tscコマンドの後に.tsファイルを指定します。
    コンパイルに成功すると、.jsファイルが作成されます。

    作成された.jsファイルを実行するには、nodeコマンドを使用します。

    実行すると、”Hello World.”が表示されることが分かります。

    入門編なので、コンパイルエラーが発生するとどうなるか確認してみましょう。
    先ほどのsample.tsを以下のように編集します。

    文字列なのに、Number型を指定しています。

    この状態でコンパイルしてみましょう。

    コンパイルエラーが発生することが分かります。
    TypeScriptは静的型付けなので、事前にエラーが分かります。

    関数の作成

    TypeScript入門編として、関数を作成してみます。
    sample2.tsというファイルを新規作成します。

    関数の引数、戻り値をnumberで定義しています。

    コンパイルし、実行してみます。

    実行すると、正しい計算結果が表示されることが分かります。

    クラスの作成

    TypeScript入門編として、クラスを作成してみます。
    sample3.tsというファイルを新規作成します。

    コンパイルして実行してみます。

    このように、TypeScriptでクラスを作成できます。

    システム
    エンジニア
    TypeScriptにも挑戦してみようと思います。
    プロジェクト
    マネージャー
    今回は入門レベルでしたので、さらに勉強してぜひマスターしてください。

    まとめ

    いかがでしたでしょうか。
    TypeScriptの入門編として、導入手順から紹介しました。
    またTypeScriptをコンパイルしてJavaScriptを生成し、JavaScriptを実行する方法を紹介しました。

    今回紹介したものはあくまでも入門レベルなので、もっと色々なことができます。
    ぜひご自身でソースコードを書いて、理解を深めてください。

    FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
    株式会社オープンアップシステムロゴ

    株式会社オープンアップシステムはこんな会社です

    秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
    数多くのエンジニアが集まります。

    秋葉原オフィスイメージ
    • スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで

      スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。

    • 充実した研修制度

      充実した研修制度

      毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。

    • 資格取得を応援

      資格取得を応援

      スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。

    • 東証プライム上場企業グループ

      東証プライム上場企業グループ

      オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。

      安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

    株式会社オープンアップシステムに興味を持った方へ

    株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

    年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
    まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

    株式会社オープンアップシステムへのご応募はこちら↓
    株式会社オープンアップシステムへのご応募はこちら↓

    新着案件New Job