JavaScriptと比較したTypeScriptの使い方

この記事は、【 可茂IT塾 Advent Calendar 2022 】の21日目の記事です。

はじめに

Next.jsを学習しているうちにTypeScriptはJavaScriptと何が違うのか気になったので、調べてみました。
JavaScriptとの違いを踏まえながらTypeScriptの使い方について書いていきます。

JavaScriptとTypeScriptの違い

JavaScriptが動的型付けなのに対して、TypeScriptは静的型付けです。
動的型付けとは、コードに型を宣言しなくても自動的に型推論を行ってくれるものです。
静的型付けとは、コードに型を宣言する必要があり、型が無いとエラーになります。

例えばJavaScriptでは文字を定義したいとき、以下のように書きます。

let sample="サンプル";

TypeScriptの例を以下に示します。

let sample:string="サンプル";

TypeScriptの型

ここでは、いくつかの型を代表して紹介します。

string

文字列の型です。

上と同じ例を載せます。

JavaScript

let sample="サンプル";

TypeScript

let sample:string="サンプル";

number

数値の型です。

JavaScript

let num=123;

TypeScript

let num:number=123;

boolean

trueかfalseをもつ型です。

JavaScript

let isDone=true;

TypeScript

let isDone:boolean=true;

Array

配列の型です。

JavaScript

let fruits=["apple","banana","orange"];

TypeScript

let fruits:string[]=["apple","banana","orange"];

Object

オブジェクトの型です。

JavaScript

let myDog={
    name:"leo",
    age:10,
    weight:5
}

TypeScript

interface dogData={
    name:string,
    age:number,
    weight:number
}

let myDog:dogData={
name:"leo",
age:10,
weight:5
}

TypeScriptの場合はオブジェクトの型を作るためにインターフェースが必要になります。

また、要素があるか分からない場合などはインターフェースを以下の様に書くことでエラーが起こらなくなります。

ageを例にとります。

TypeScript

interface dogData={
    name:string,
    age?:number,
    weight:number
}

また、ageは存在するがnullかもしれない場合には次のように書きます。

TypeScript

interface dogData={
    name:string,
    age:number|null,
    weight:number
}

関数の定義

JavaScript

function func(a,b){
return a+b;
}

TypeScript

function func(a:number,b:number):number{
return a+b;
}

number型a,bを引数にとってnumber型を返り値(a+b)にしています。