TypeScriptの書き方

PE部 谷です。

普段、Pythonばかり触れている自分が、TypeScriptを使ってコードを書く機会があったので、その特徴をブログにしました。

はじめに

TypeScriptとは

はじめにTypeScriptの説明をします。

ひとことでいうとJavaScriptの代わりとなる言語のひとつ。　　　　　　　　　　　　 え？JavaScriptがそもそもプログラミング言語じゃないの？その代わり？どういうこと？となりました。

JavaScriptは、Webページの複雑な機能を可能にするプログラミング言語です。　　　 JavaScriptは、型の定義がないなどの理由で、ある一定以上の規模になると、実装・保守の効率が悪くなってしまいます。　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 そのため、JavaScriptの代わりにTypeScriptでコードを書き、それをJavaScriptに変換して使用するという方法で開発が行われます。

特徴

型の定義

ではなぜ、JavaScriptの代わりになるのでしょうか。その大きな理由のひとつは、TypeScriptは型の定義ができるからです。

Pythonでは、変数に入れる値によって変数の型が変わります。また、同じ変数に別の型の値を入れることもできます。

hoge = 'Hello'  # str型
fuga = 1  # int型
 
hoge = 2  # str型が入っていた変数hogeにint型を入れる 

しかし、TypeScriptは、変数に入る型をあらかじめ定義して使います。 型を定義した変数に他の型を入れようとするとエラーで知らせてくれます。

let hoge: string = 'Hello';
let fuga: number = 1;
 
let foo: string = 2; // string型にnumber型を入れようとしているので、エラーになる

型の定義がないため、意図しない値が入ってしまうということを防ぐことができます。

インターフェース

型の定義の延長でインターフェースという機能について紹介します。　　　　　　　　　　 インターフェースとは、インスタンスのプロパティ（属性）の仕様を決めることができます。

インターフェースの何が良いかというと、拡張に対してオープンであるということです。　　　　 つまり、別の誰かが、簡単にプロパティを追加することができます。

interface PersonalInfo {
    gender : string;
    age: number;
}
   
const Me: PersonalInfo = {
    gender: '男性',
    age: 24
};
 
// 拡張
interface PersonalInfo {
    country : string;
}

上記と同じこと（拡張以外）をJavaScriptで書くとどうなるか見比べてみましょう。 TypeScriptファイルをコンパイルしたJavaScriptファイルがこちらです。

var Me = {
    gender: '男性',
    age: 24
};

シンプルですが、保守をしていくには不便そうですね。

import、export

インターフェースは、実行ファイルとは別のファイルにまとめておくと保守がしやすくなります。それらの別ファイルを実行ファイルで使う方法をご紹介します。　　　　　 Pythonのimportにあたる部分です。 TypeScriptではimportとexportを使って行います。

main-if.ts

export interface PersonalInfo {
    gender : string;
    age: number;
}

main.ts

import { PersonalInfo } from './main-if';
  
const Me: PersonalInfo = {
    gender: '男性',
    age: 24
};

使用するモジュールをexportして、使用する先でimportします。

まとめ

今回は、私が気になったTypeScriptの特徴、書き方を紹介させていただきました。　　　 まだまだ慣れないところがたくさんですが、言語は変わっても目的は同じなので、慣れるのも早いと思います。 一緒に頑張りましょう！

最後まで読んでいただき、ありがとうございました。