Typescript超入門～JSとTSの違い～

どうもポ〇モントレーナー神田です。
なぜか記事を書くときはポ〇モンの新作発売前なんですよね～
（投稿される頃にはたぶん発売してますね！皆さん楽しんでますか？？）

最近Typescriptを少しずつ触れるようにしているのですが、「そもそもJavascriptとどう違うのだろう？」と疑問に思ったのでこれから勉強する人のために何が違うのかや超基本の書き方を紹介できればと思います！

型付け

まずは変数のデータ型です。

Javascriptでは動的型付けと言って、事前のデータ型の宣言はなく実行時に自動的に決まります。
この変数は文字列か数値かわからないってことはたまにありますね。（そのせいでエラー吐いたり…）

Typescriptの場合は静的型付けと言って、事前にデータ型を宣言します。
すべての変数に対して、「これは配列だよ～。これは数値だよ～。」と説明を加える必要があります。

メリットとしては、型を宣言しているためエラーを未然に防げること、型が一目でわかるため新規でアサインされたメンバーもわかりやすいこと、などが挙げられます。

Typescriptでは自動型宣言がないため動作が軽いといった特徴もありますね。

静的型付けは以下のような感じ。
変数名の後ろに「:string」のように型を宣言します。

// 文字列
let hoge01: string = 'Hello World!';

// 数値
let hoge02: number = 999;

// 真偽
let hoge03: boolean = true;

// 配列（宣言の仕方が複数あるので適切なのを使う）
let hoge04: [string, number] = ['monomode', 2022];

// オブジェクト
let hoge05: object = {"apple": "red", "lemon": "yellow"};

// 任意
let hoge06: any = true;

Javascriptへ変換可

TypescriptはJacascriptに変換可能です。
そもそもですが、TypescriptはJacascriptの拡張版として作られているのでコンパイルすることでJacascriptに変換することができます。
メリットとして大きいところとしてはブラウザによる「旧構文でしか動かない～」といったことを考えなくて良いことですね。
単純にTypescriptでの開発に専念できるのは助かります。

インターフェース

Typescriptではインターフェースを利用することでクラスを作成するときに利点があります。
そもそもインターフェースとは何か。
オブジェクト内の変数の型を事前に宣言したもの…です。
説明が難しいですねコレ…

定義した要素の一つ一つを「メンバー」と言います。
以下のような使い方をします。

interface fruits {
  name: string; // これがメンバー
  color: string; // これもメンバー
}

class fruitsInCart implements fruits {
  name: string; // interfaceで定義したこのメンバーがないとエラー
  color: string; // 同上
  count: number;
}

事前にインターフェイスを用意することで、新規のクラス作成時に必須項目が漏れることがない点、併せて型も正しく設定できるため複数人での作業時や久しぶりに触った時などに安心ですね。

まとめ

自分自身もまだまだ勉強途中のためご紹介できる部分はあまり多くなかったですが参考になれば嬉しいです！
少し前までは日本語の情報が少なくて若干敬遠していたのですが最近はかなり増えていますので初めて見るのをお勧めします！