ウェブDeBLOG｜トライデントコンピュータ専門学校 Webデザイン学科

let num = 10000;
num = "万";

TypeScriptは静的型付けなので、コンパイルエラーとなってしまいます。

let num:number = 1000;
num = "千";

//Type 'string' is not assignable to type 'number'.

また、代入する右辺の値から、自動的に型を設定される「型推論」と呼ばれる機能があります。
この機能を利用することで、型の定義を省略することができます。

//JavaScriptでは、エラーが出ませんが、TypeScriptでコンパイルすると、
//“文字列型はnumber型には代入できないよ”と警告がでます。
let num = 10;
num = "十";

//Type 'string' is not assignable to type 'number'.

またJavaScriptのプリミティブの型と対応しており、string, number, boolean, symbol, bigint, null, undefinedの他にも、宣言のみlet name;だったりlet name: anyだと、何でも入る型“any型”という型になります。

関数の引数と戻り値の型

戻り値の型を指定することで関数内のreturnの値もチェックすることができます。

//引数x,yはnumber型であり、戻り値もnumber型である関数宣言
function Add(x: number, y: number): number {
    return x + y;
}

//同様の関数式
let Add2 = function(x: number, y: number): number {
    return x+y;
};

TypeScriptでは、全ての引数は、関数によって必要です。関数に渡される引数の数は、関数が期待する引数の数と一致しないとエラーとなります。

function fullName(firstName: string, lastName: string) {
    return firstName + lastName;
}
console.log(fullName("伝人")); 
//Expected 2 arguments, but got 1.引数が１つしかない。

console.log(fullName("伝人", "渡来", "コンピュータ")); 
//Expected 2 arguments, but got 3.引数が３つある。

console.log(fullName("伝人", "渡来")); 
//OK

JavaScriptでは、全ての引数が任意であり省くことができます。 その場合、引数はundefinedとなります。
TypeScriptでは、任意にしたい（必須でない）引数の後ろに?付けることで、任意にすることが可能です。

function fullName(firstName: string, lastName?: string) {
    return firstName + lastName;
}
console.log(fullName("伝人")); 
//OKになりました。
 
console.log(fullName("伝人", "渡来", "コンピュータ")); 
//Expected 2 arguments, but got 3.引数が３つある。
 
console.log(fullName("伝人", "渡来")); 
//OK

その他、typeやinterfaceを使って、関数にも型の定義ができたりもします。

なぜ型を使う必要があるのか

JavaScriptでは、変数が特定の型という定義はなく、どの変数にもあらゆる型の値を代入できます。
データの型を指定する必要がないわけですが、型を厳密に扱う言語であるC++やJavaを使うプログラマが、違和感を感じる部分のようです。
さらに引数や関数に型を定義することで、値や使い方が限定され、エラーの発生を防ぐことができるというメリットもあります。

品質と安全性の向上の面から、TypeScriptを導入するエンジニアが増えているようです。
また、日々進歩するJavaScriptの仕様と古いWebブラウザの互換を保つためのBabelの代用としても使えるんじゃないでしょうか。

JavaScript の上位互換（スーパーセット）であるTypeScriptは、JavaScriptにはない機能もたくさんあります。
いくつか試してみましょう。

Type Aliases

データ型に別名（エイリアス）をつけることができます。

type Second = number;
//下の二行は、同じnumber型を定義していることになります。
let timeInSecond: number = 10;
let time: Second = 10;

type SampleText = {
    id: number,
    name: string,
}
let text: SampleText  = {
    id: 0,
    name: "world",
}

Interfaces

TypeScriptでは、データをインタフェースで型づけができます。
JavaやC#などで、具体的な処理は書かずに「変数」または「メソッドの型」を抽象的に記述したものです。抽象型と訳されます。

宣言時の変数に型の注釈をつけることを型アノテーション（Type Annotation）と言います。
ただ、オブジェクトの場合、全てに型アノテーションを付けるのは、とても冗長になります。そこでinterfaceを利用します。

//オブジェクトを型アノテーションで定義
let taro: { name: string; age: number } = {
  name: "タロウ",
  age: 8
};

//interfaceを利用すると
interface Dog {
    name: string;
    age: number;
}

const jiro: Dog = {
    name: 'ジロウ',
    age: 9,
}

なるほど、と思うのですが、typeと何が違うのでしょうか。
TypeScript Deep Dive 日本語版によると、

• ユニオン型や交差型が必要な場合にはtypeを使います。
• extendやimplementsをしたいときはinterfaceを使います。
• そうでなければ、その日あなたを幸せにするものを使用してください。

ここまでさらっと、「TypeScriptってなんだ?!」と紹介してきましたが、実際に利用するには理解しておくべき前提条件が多く、プログラミング初心者がすぐにTypeScriptを勉強するには、敷居が高いような気がします（今なら、TypeScriptから勉強するべきという意見もあるようです。）。

ある程度、インタプリタ型のJavaScriptで馴染んでから、とも思いますが、
将来的には、TypeScriptからWeb制作を始める人などもでてくるのでしょうか。恐ろしいですね。。。

• 参考：TypeScript Deep Dive 日本語版
• 参考：TypeScriptのInterfaceとTypeの比較 - Qiita

体験入学実施中
Webデザイン学科

関連記事

• JavaScriptで要素を挿入する。 (2023/09/30)
• map()？new Map？ (2023/08/10)
• ポートフォリオサイトを印刷用CSSでプリントする。 (2022/03/05)
• @useの使い方がわからない…ので (2022/02/12)
• display:contentsを使ってみたい。 (2021/09/30)
• jQueryだっていいじゃない。 (2021/03/09)
• TypeScriptってなんだ?! (2021/03/01)
• CSSの単位 (2020/09/03)
• JavaScriptのclassについて、書いてみた。 (2019/12/30)
• picture要素と、source要素と、srcset属性と (2018/10/02)