宮水の日記

宮水の日記

主に書評や資格取得について記事を書いています。

TypeScriptに入門する

JSライブラリ紹介

みなさんこんにちは！宮水です。
今日は、TypeScriptを完全に理解したいと思います。

TypeScriptとは

マイクロソフトが作っているオープンソースの言語。

基本の型

Basic Types · TypeScript

Boolean, Number, String, Array, Tuple, Enum, Any, Void,Null and Undefined, Objectなどの型がある。

Interfaces

Interfaces · TypeScript

例えば、以下のような関数を定義したとします。この関数はlabelを必須としていますが、myObjectはsizeというプロパティも持っているので型が合いません。

function printLabel(labelledObj: { label: string }) {
    console.log(labelledObj.label);
}
let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

そこで使えるのかinterfaceです。
以下のように書き換えると、label以外の引数があっても大丈夫。しかも、label?: stringと書くと、任意の型になります。

interface LabelledValue {
    label: string;
}
function printLabel(labelledObj: LabelledValue) {
    console.log(labelledObj.label);
}
let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

Type

interfaceと似て非なるTypeなるものが存在します。
TypeScriptのInterfaceとTypeの比較 - Qiita

Typeはinterfaceより少しお堅い型って感じかなと思ったんですけど、そもそも全く違うもので比較するものでもなさそうです。
上のQiitaの表がわかりやすかったので、どっちを使うべきか適宜判断して使おうと思います。

Classes

Classes · TypeScript

JavaやC#のようなクラスを定義することができます。

interface ClockInterface {
    currentTime: Date;
}
class Clock implements ClockInterface {
    currentTime: Date;
    constructor(h: number, m: number) { }
}

Functions

Functions · TypeScript

以下のように、関数型も定義できます。

interface SearchFunc {
    (source: string, subString: string): boolean;
}

Generics

Generics · TypeScript

ジェネリクスといって、以下のような書き方もあります。
ReactとTypeScriptを組みわせるときによく見かける書き方ですね。

function identity<T>(arg: T): T {
    return arg;
}

終わりに

またわかったことがあったら追記します🙋‍♀️

参考文献

基本の型 | TypeScript 日本語ハンドブック | js STUDIO

TypeScript - JavaScript that scales.

TypeScriptをお勧めしたい7つの理由 - Qiita