TypescriptとJavascriptの違いを解説！導入方法をスクショ付きで説明

「TypescriptとJavascriptの違いを知りたい」
「実際にファイルを作って実行するまでのやり方を教えてほしい」

JavaScirptに取り組んでいる人は、ネット検索で「TypeScript」という名前を見て、何が違うのだろうと思っているのではないでしょうか。

TypeScriptは、JavaScriptの課題点（ある程度コードを省略しても動いでしまう）を修正したプログラミング言語です。

コード量が増えやすいですが、JavaScriptより不具合が起きにくい仕様の言語といえます。

そこで、本記事ではWebアプリの開発経験があるみずがめが、以下の内容を紹介します。

JavaScriptとTypeScriptにおける型の違い
Node.jsとVSCodeで動くサンプルコード

本記事を最後まで読むことで、TypeScriptで拡張された機能を正確に理解できます。

記事公判では、VsCodeのターミナルを使った実行方法を紹介しているため、実際に手を動かして学習にお役立てください。

TypeScriptとJavaScriptの違いは型の扱い方
TypeScriptとJavaScriptの違いを理解したら実際に動かしてみよう

TypeScriptとJavaScriptの違いは型の扱い方

TypeScriptは、開発者がソースコードを書くときに型を指定できる言語です。

JavaScriptは、コンピューターが値から自動的に型を判定するため、開発者が宣言する必要がありません。

違いを正確に理解するために、まずは以下の3つを見ていきましょう。

データの型は情報整理の要
JavaScriptの苦手なこと
TypeScriptの便利な型

それぞれ詳しく解説します。

1.データの型は情報整理の要

プログラミング言語は、型と呼ばれるラベルを使って情報の種類を整理します。

ラベルで種類分けすることで、コンピューターはどのような処理を行えるか判断しやすくなります。

たとえば、数値型のデータであれば、四則計算のような、実行できる計算が決まります。

文字列データであれば、あらかじめ登録された文字列と入力されたパスワードを比較可能です。

データ型を使うことで、適用できる命令が定まり、スムーズに処理されるようになります。

2.JavaScriptの苦手なこと

JavaScriptは変数の型情報をはっきり示さなくても動くため、問題のあるコードを事前に見つけにくい言語です。

以下のコードは、文字列と数字を無理やり合体させてしまう例です。

let price = "100"; // 文字列の100

let tax = 10;      // 数値の10

let total = price + tax; 

console.log(total);

以下の結果が出てくるはずです。

本来は110と出力してほしいはずなのに、「” ”」と囲っただけで文字列として扱われ「+」で「10」を後ろに追加した状態になりました。

また、以下のように、エラーを出さない例もよくあります。

let user = { name: "タロウ" }; // 「name」を「nime」と打ち間違えた！ console.log(user.nime); // ❌エラーにならず「undefined（中身なし）」と表示される

スペルミスが起きても、開発段階では多くの場合エラーとして表示されません。

実際に実行してエラーが発生してから、原因箇所を探す必要があります。

JavaScriptは型情報を明示しなくても実行できますが、どのコードに問題があるのかわかりにくい言語です。

その問題を解決するために登場したのがTypeScriptです。

3.TypeScriptの便利な型

TypeScriptは、必要に応じて型を指定できます。また、型推論という機能によって自動で型が決まる場合もあります。

その型情報を利用してコードをチェックするため、実行前（コンパイル時）に型の不一致を発見できます。

以下のコードがよく使われます。「:」の後に指定するのがルールです。

データ型	型に使われるコード	コードの意味	コードの例
数値型	number	整数・小数に関係なく使える	let num: number = 30;
文字列型	string	文字や文章で使われる	let article: string = “こんにちは”;
論理値型	boolean	trueかfalseのどちらかに定まる	let judge: boolean = true;（trueに設定する場合）
配列・リスト型	number[]	何のデータの集まりか決める	let numlist: number[] = [5, 7, 11];

さらに、タプル型とデータをまとめたオブジェクト型があります。

タプル型は「順番が重要な複数の値」を扱うときに使われます。下のコードでは、1行目で要素の順番を指定しており、間違うとエラーとして扱われます。

// 1番目を文字列（名前）、2番目を数値（年齢）と決めたタプル型

let user: [string, number];

user = ["タロウ", 25]; // ⭕ 正しい

user = [25, "タロウ"]; // ❌ 順番が違うのでエラーになります

順番を指定する型を覚えておきましょう。

みずがめ

X,Y座標といったものによく使われる書き方です！

オブジェクト型は複数の情報を1つにまとめる型です。

以下のコードは、複数のデータをあらかじめ指定しています。ユーザー情報（氏名、電話番号、メールアドレス）などによく使われます。

// どんな名前（キー）と型が入るかをあらかじめ決める

let player: { name: string; level: number };

player = {

  name: "牛",

  level: 60

};

TypeScriptとJavaScriptの違いを理解したら実際に動かしてみよう

簡単なプロジェクトを作成して動かしてみましょう。

Typescriptを使う場合は、ターミナルを使ってプロジェクトごとにインストールします。

確認作業
フォルダ作成画面
ターミナル操作
フォルダ作成

新規開発では必ず同じ作業をするため、よく覚えておきましょう。

なお、この記事ではwindows（10と11で操作はほぼ変わらない）のパソコンに「Node.js」と「VSCode」をインストールされていることを前提に進めています。

まだインストールが済んでいない人は、みずがめが執筆した「HTML・CSSの次に取り組むJavaScriptを解説！Node.jsも説明」を参考に準備してみてください。「Node.js」と「VSCode」のインストール方法を詳しく解説しています。

1.確認作業

最初に「コマンドプロンプト」を起動してパソコンの中にある「Node.js」があるか確認します。

パソコンの下にある「タスクバー」の検索窓をクリックしてください。

「cmd」と入力し、「開く」をクリックします。

下の画像のように黒いウィンドウが立ち上がります。

以下のコマンドをコピーして右クリックで貼り付けてください。

node -v

パソコンの中にあればヴァージョンが表示されます。

2.フォルダ作成画面

プロジェクトを立ち上げてフォルダを作成します。

「VSCode」をダブルクリックして立ち上げてください。

「ファイル（F）」をクリックします。

表示された一覧の中から「フォルダーを開く…」を選択します。

「ドキュメント」が立ち上がります。何もないところで右クリックしてください。

「新規作成（W）」を選択してから「フォルダー（F）」をクリックします。

「新規ファイル」が作成されます。名前を変えましょう。みずがめは「checking」にしました。

名前を変えたらウィンドウの一番右下にある「フォルダの選択（&S）」をクリックします。

「このフォルダー内のファイルの作成者を信頼しますか？」と表示されます。自分で作成したファイルなので「はい、作成者を信頼します」をクリックしてください。

フォルダが作成されれば成功です。ターミナル操作に移ります。

3.ターミナル操作

TypeScriptを作ったフォルダに入れます。「表示」から「ターミナル」を選択してください。

VSCodeの下部に「ターミナル」ウィンドウが追加されます。

10秒ほどすると、現在自分がいる場所（さっき作ったフォルダの所在）が表示されます。

自分が作ったフォルダの場所であることを確認したら、以下のコマンドを入力してください。

npm init -y
npm install -D typescript @types/node
npx tsc --init

コピーして一気に張り付けると警告が出ます。「貼り付け（P）」をクリックしてください。

下の画像は処理が進んでいるときのものです。

1分ほどすると処理が終わり、「cheking>」と表示されます。

VSCode左側の一覧表を確認してください。以下に示すものが追加されていれば成功です。

node_modules
package-lock.json
package.json
tsconfig.json

4.フォルダ作成

実行するフォルダを作成します。「ファイル（F）」を選択してください。

「新しいファイル…」を選択します。

VSCode上部の入力欄にファイル名を入力します。下の画像の赤い枠で囲まれている場所で「〇〇.ts」と入力して「Enter」をしてください。

ドキュメントが立ち上がります。

下の画像はドキュメント画面です。ターミナルに入力したコマンドで再生されていることが確認できます。

「ファイル名（N）:」は先ほど入力した「〇〇.ts」と表示されているはずです。みずがめの場合は「point.ts」と入力しています。

ドキュメントウィンドウの一番右下の「ファイルの作成」をクリックします。

「point.ts」ファイルが追加されました。

ファイルに以下のコードを貼り付けてください。

type Position = [number, number];

// 2. プレイヤーの現在地（X座標: 10, Y座標: 20）を作る

const newPos: Position =[10, 20];

// 3. 画面に表示する

console.log(`現在は X:${newPos[0]}, Y:${newtPos[1]} です！`);

ファイルにコードを貼り付けたら、以下のコマンドをターミナルに入力して実行しましょう。