【初心者向け】TypeScript を一緒に学びましょう

はじめに

本記事は、社内での TypeScript 勉強会に使った資料です。
TypeScript 初心者向けの内容となっております。

TypeScript とは

TypeScript はマイクロソフトによって開発され、メンテナンスされているフリーでオープンソースのプログラミング言語である。TypeScriptはJavaScriptに対して、省略も可能な静的型付けとクラスベースオブジェクト指向を加えた厳密なスーパーセット（既存のものを全て含んだ上でより機能が拡張されている上位互換となるモノ）となっている。

出典: Wikipedia

TypeScript は静的型付け言語のひとつで、プログラム実行前に型の不整合による早期のバグ発見ができることがメリットとなります。
変数や関数の引数に型を指定することで、コードの安全性が向上します。

詳しいことは以下のドキュメントにまとまっているので、時間のある時に読んでみてください。
私はこのドキュメントに何度も助けられました。
https://typescriptbook.jp/

プリミティブ型

プリミティブ型は7つほどあります。

boolean型(論理型): trueまたはfalseの真偽値。
number型(数値型): 0や0.1のような数値。
string型(文字列型): "Hello World"のような文字列。
undefined型: 値が未定義であることを表す型。
null型: 値がないことを表す型。
symbol型(シンボル型): 一意で不変の値。
bigint型(長整数型): 9007199254740992nのようなnumber型では扱えない大きな整数型。

プリミティブ型とは、本的な値を表すデータ型です。プログラミング言語で利用できる最も基本的なデータ型であり、通常、数値、文字列、ブール値などの単純な値を表現するために使用されます。

一緒にやってみましょう！

TypeScript Playground を使って一緒に練習しましょう！
インストール等は特に不要です。
https://www.typescriptlang.org/play

変数の型

突然ですがクイズです。
以下を実行するとなんと出力されるでしょうか？

レッスン1

const age = 26;
console.log(typeof age);

こたえ

[LOG]: "number"

TypeScript は型注釈と型推論の２種類があり、
今回の age は型推論で number 型となります。
型注釈するとこんな感じになります。

const age: number = 26;
console.log(typeof age);

レッスン2

それでは、以下のコードはどうなるでしょうか。

const age: string = 26;
console.log(typeof age);

こたえ

コンパイルエラーが発生します。

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

ユニオン型

ユニオン型は、2以上の型をパイプ記号(|)で繋げて書きます。

レッスン3

// ユニオン型
const displayName: string | number = "Shota";
console.log(typeof displayName)

こたえ

[LOG]: "string" 
※これはコンパイルエラーが発生しません。

number と string が許容されているといった意味となります。

https://typescriptbook.jp/reference/values-types-variables/union

オブジェクトの型

type もしくは interface を使ってオブジェクトの型を作ることが出来ます。
単体の変数の型に type や interface を使うケースはあまり見たことがないです。

// オブジェクトの型を作ってみよう
type User = {
    name: string;
    age: number
}

interface Profile {
    name: string,
    age: number
}

レッスン4

以下のオブジェクトに User 型を追加してみましょう

const user = {
    name: "しょうた",
    age: 26
};

こたえ

const user: User = {
    name: "しょうた",
    age: 26
}

関数の型

関数の引数、戻り値にも型注釈を行うことが可能です。

関数の型を明示することにより関数名、引数、戻り値の型を見るだけで、どんな値が返ってくるかどうかの想像がしやすくなり、効率がアップすると感じます。

// アロー関数
const hello = (name: string): string => {
    return `こんにちは！${name}さん`
}
console.log(hello("しょーた"))

// ファンクション
function hello (name: string): string {
   return `こんにちは！${name}さん`
}
console.log(hello("しょーた"))

レッスン5

2つの引数を受け取り、それらを足し算した関数を型注釈する

こたえ

const calclate = (a: number, b: number): number => {
    return a + b
}

番外 関数の型引数

型引数的な扱いも可能。。！

function test<T> (item: T): T{
    return item
}
console.log(test<string>("ja"))

おわりに

Playground を使って型注釈をメインにやっていきました。
最後に、伝えたかったことは "なんのためにTypeScript"を使うのかです。
以下の記事が TypeScript で実装する理由を書いてくれています。
参考にしてみてね☆彡

TypeScript で実装する理由

https://typescriptbook.jp/overview/why-you-should-use-typescript