TypeScriptとJavaScript大きな違いは？ 具体的なコードと一緒に3つ解説！

近年、Web開発で注目されているTypeScriptを勉強しようと考える人は、上記のような疑問を解消したいと思う人が少なくありません。

ただし、ネットでいろいろ情報収集していても、結局のところJavaScriptと一体何が違うの？という疑問を、具体的なソースコードで解説している記事がなかなか見つからないのが現状ではないでしょうか。

そこで、本記事ではTypeScriptとJavaScriptが大きく違う点を3つに絞って、具体的なコードと一緒に解説をしていきますのでぜひ参考にしてみてください。

TypeScriptとは

TypeScriptは、JavaScriptの弱点を補うように拡張されたオープンソースのプログラミング言語であり、Microsoftによって開発されました。

そして、この弱点を補っている部分こそがJavaScriptとの大きな違いとも言えるわけです。

2017年にGoogle社内の標準開発言語としても採用されていることから、近年さらに注目されている言語でもあります。TypeScriptの特徴やメリット・デメリットなどの詳細については、以下の記事で詳しく解説しているので合わせて参考にしてみてください。

TypeScriptとは？ Webアプリ開発で注目の言語を初心者向けに徹底解説

更新日：2024年3月1日

TypeScriptとJavaScriptの違い

TypeScriptにはJavaScriptにはない機能がいくつか提供されていますが、なかでも大きな違いとしては以下の3つになります。

「①静的型付け」は、簡単に言うと変数が扱うデータが文字列型なのか数値型なのか……など、あらかじめ型を定義することで、意図しないデータが混入するのを防ぐことができます。

「②インターフェース」は、プロパティや型をあらかじめ定義しておくことで安全にクラスを作成できる機能を提供します。

そして、「③モダンなJavaScript」が使えるという点においてもTypeScriptは優れています。どういうことかと言うと、TypeScriptはコンパイルすると素のJavaScriptに変換されるのです。この変換されたJavaScriptはどのブラウザでも使える状態になっているので、最新の仕様をいち早く利用できるわけです。

これらの大きな違いについて、まずは概要だけ先に確認しておいてください。

次の章からは、より具体的な相違点についてソースコードと一緒に解説をしていきますので、ぜひ参考にしてみてください。

①静的型付け

JavaScriptは型の定義ができない

まず最初に、なぜ「静的型付け」を使ったほうがいいのかについてを解説するために、JavaScriptの簡単な例を見てみましょう。

以下のサンプルコードは、任意の文字列を受け取ってメッセージを返す関数です。

const message = name => {
  console.log(`こんにちは${name}さん！`);
}

この関数は、引数として文字列を受け取ることが前提になっています。

しかし、JavaScriptには「静的型付け」ができないので、「この関数は文字列を受け取らないといけない……」と開発者が自分で言い聞かせる必要があります。

そのため、例えば以下のように誤って引数に数値を指定しても特にエラーは起きません。

message(1234);

実行結果

こんにちは1234さん！

エラーが発生しないので、JavaScriptではさらに複雑なロジックを組み立てて検出できるように実装します。しかし、最悪のケースだとこのままエラーに気づかずに、正式にリリースされてしまうこともあるわけです。

今回のサンプル例はメッセージを出力するだけですが、重要なロジックで型が定義されていないとバグを引き起こすことは簡単に想像がつきます。このようなJavaScriptの弱点を解消するために、TypeScriptでは「静的型付け」が採用されているわけです。

変数の型

それでは、TypeScriptによる「静的型付け」がどのようなものか、具体的なコードと一緒に解説をしていきます。

まずは、もっとも基本になるTypeScriptの変数定義を見てみましょう。

変数を定義する方法はJavaScriptと基本的には同じなのですが、あらかじめ型を定義できるように設計されています。例えば、文字列を扱うための変数として「userName」を定義すると以下のようになります。

let userName:string;

上記のように変数名のあとに「:（コロン）」を付与してから型を記述します。今回の例だと文字列を扱う変数を作成するので、型は「string」になるわけです。

もちろん、型を定義すると同時に値を以下のように定義することも可能です。

let userName:string = '太郎';

このように、型をあらかじめ定義することを「静的型付け」と言います。

変数「userName」は文字列だけを扱うので、誤って数値などが代入されるとTypeScriptをコンパイルするときにしっかりとエラーが出力されます。これにより、変数が扱う型を保証できるのでコードの安全性が飛躍的に向上するわけです。

ちなみに、変数以外にも例えば配列でも以下のように型を定義できます。

const numberList: number[] = [1,2,3,4,5];

この例だと、数値のみしか格納できない配列要素を作成できるというわけです。

関数の型

「静的型付け」は変数だけでなく、関数を定義する際にも有効活用できます。

TypeScriptでは、主に「引数」と「戻り値」に型を定義できるように設計されています。例えば、文字列の引数を受け取ることが前提の関数は、以下のように記述できます。

const getName = (userName:string) => {
    console.log(userName);
}

引数部分に注目してください。

変数を定義するときと同様に、「:」を付与してから型（string）を定義しています。これにより、この関数は引数として文字列だけを受け付けるわけです。

次に、戻り値の型を定義する場合を見てみましょう。この場合は引数のあとに「:」を付与して型を記述することになります。

const getName = (userName:string):string => {
    return name;
}

上記の例では、型を「string」にしているので、戻り値は必ず文字列型であることが保証されるわけです。このように「引数」「戻り値」の型を定義できることで、意図したデータを扱えるようになります。

オブジェクトの型

TypeScriptではオブジェクト形式のデータにも「静的型付け」ができます。

使い方としてはオブジェクト名を定義したあと、「:」に続けてオブジェクト形式で型を定義していきます。

const user:{name:string, age:number, area:string} = {
  name: '山田　太郎',
  age: 28,
  area: '東京都'
};

型を定義している部分に注目してください。

ポイントは、まったく同じプロパティ名に型を定義している点です。つまり、言い換えれば型を定義したプロパティしか利用できないオブジェクトを作成できるというわけです。

例えば、以下の例を見てください。

const user:{name:string, age:number, area:string} = {
  name: '山田　太郎',
  age: 28,
};

この例では、型を定義している「area」プロパティが使われていないことに注目してください。この場合はコンパイルするとエラーになります。

逆に、型を定義していないプロパティを記述しても同じくエラーになります。つまり、「静的型付け」をしたプロパティのみ利用できることが保証されるのでコードの安全性が高まるわけです。

②インターフェースの活用

クラスの作成

TypeScriptではインターフェースを利用することで、クラスを作成するときに自分だけのルールみたいなものを作れるようになります。

例えば、ユーザーを管理するクラスを作成するときに、「ユーザー名」と「年齢」だけは必ずプロパティとして持っておきたいとします。そのような場合に、以下のようなインターフェースをまずは作成します。

interface Member {
    userName:string;
    userAge:number;
}

上記の例では、文字列型の「ユーザー名」と数値型の「年齢」を定義しているのが分かります。

このように作成したインターフェースはクラスを作成する時に、「implements」に続けて設定することで使用可能になります。

class User implements Member {
  userName:string;
  userAge:number;

  userArea:string;
  userTell:string;  
}

ポイントはインターフェースで定義したプロパティを、必ず利用しなければいけないという点です。そのため、インターフェースで定義されたプロパティが必ず存在するという保証が得られます。

普通はクラスを自由に作成できるわけですが、あえてルールを作成することで誰もが安心して利用できるクラスを提供できるようになるというメリットがあります。

オブジェクト・関数への応用

インターフェースはクラスを作成するときに便利な機能なのですが、実はさまざまなデータにも応用できるので合わせてご紹介しておきます。

例えば、オブジェクトの「静的型付け」をする際に、型の代わりにインターフェースを適用させることができます。先ほど作成した以下のインターフェースをもう一度チェックしてください。

interface Member {
    userName:string;
    userAge:number;
}

このインターフェース「Member」を、オブジェクトの「静的型付け」に利用すると以下のようになります。

const user:Member = {
  userName:'山田　太郎',
  userAge: 34
}

「:」を付与したあとにインターフェースを適用させています。

定義したプロパティだけしか利用できない点については、通常の「静的型付け」と同じになります。

また、関数の引数にも応用可能です。例えば、3つの引数を受け取る関数を作成するには以下のように記述します。

interface UserData{
    userName:string;
    userAge:number;
    userHobby:string;
}

const getUser = (data:UserData) => {
  console.log(data);
}

上記の例は「UserData」というインターフェースを作成しており、あらかじめ3つの型を定義しているのが分かります。

このインターフェースは関数の引数へ「静的型付け」を行う方法と同じように設定が可能になるのです。つまり、ひとつのインターフェースを適用させるだけで、どんな引数を受け取るかを指定できるわけです。

もちろん関数を利用する際には、定義されている引数をすべて受け取らないとコンパイル時にエラーとなります。

getUser({userName:'太郎', userAge:32, userHobby:'読書'});

このようにインターフェースを活用すれば、誤ったデータの混入を未然に防げるだけでなく、独自のルールに基づいた定義が可能になるため複数人で作業する場合にも安心して作業ができるようになります。

③モダンなJavaScript対応

JavaScriptは、毎年のように言語自体のアップデートが行われる関係で、すべてのブラウザが最新のJavaScript仕様に対応していないことがよくあります。

最近のモダンなブラウザは対応が早くなっておりますが、一部のマイナーなブラウザであったりスマホ版のブラウザなどは注意が必要になるわけです。

しかし、TypeScriptは冒頭でも少し解説しましたが、最新のJavaScriptを利用していてもコンパイルすることで、旧来のJavaScriptに変換される大きなメリットがあります。つまり、ブラウザ対応などの余計なことに時間を費やす必要がなく、開発に集中できるわけです。

例えば、以下のコードを見てください。

const createText = () => {
  const userName:string = '山田太郎';
  
  console.log(`こんにちは、${userName}さん`);
}

アロー関数内で変数を定義して、テンプレートリテラルを利用して文字列を出力するコードです。

これをコンパイルすると以下のようなJavaScriptに変換されます。

var createText = function() {
    var userName = '山田太郎';

    console.log("こんにちは、" + userName + "さん");
}

主な変換ポイントは以下のとおりです。

上記のように、旧来のJavaScriptに変換されるためほぼすべてのブラウザで動作するコードになるわけです。

最新のJavaScript仕様はコードを簡潔に書けるようになっていたり、バグが起きにくい書き方ができたりなど、いろいろメリットも多いのでTypeScriptは近年において注目され続けていると言えるわけです。

まとめ

今回は、TypeScriptとJavaScriptの違いについて解説をしました。最後に、もう一度ポイントをおさらいしておきましょう！

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！