JavaScriptを知っている方がTypeScriptをなんとなく理解するための記事① ~はじめに~

# この記事は何？

**TypeScriptとは何か、何がいいのかを伝えようと頑張った記事です！**
この記事のターゲットは、以下のような方々です

- **JavaScriptはわかったけど、TypeScriptってなんだっけ？**
- **TypeScriptというものがあるらしい...学んでみよう...!**


@ この記事が読み終わったら、以下👇の記事も是非！
　1. JavaScriptを知っている方がTypeScriptをなんとなく理解するための記事① ~はじめに~ `←この記事`
　2. [TypeScriptをなんとなく理解するための記事② ~型を組み合わせる: Union~](https://qiita.com/NOMURA_keibyou38/items/9db230baf556cdfee276)
　3. [TypeScriptをなんとなく理解するための記事③ ~汎用的な型を作成する: Generics~](https://qiita.com/NOMURA_keibyou38/items/45974b8f802c51fe5a1d)
　4. [TypeScriptをなんとなく理解するための記事④ ~構造型~](https://qiita.com/NOMURA_keibyou38/items/5f1126cd39469f6f9faa)
@ TypeScriptがなんとなく理解できたら、是非インストールして、触ってみてください！
　👉 [【画像で説明】シンプルにTypeScriptを導入して使う方法](https://qiita.com/NOMURA_keibyou38/items/2cbb5971cea1ef6e83f5)

# TypeScriptとは？

TypeScriptは、**型定義ができるJavaScript**です。

JavaScriptでは、型を明確に宣言していません。
そこで、TypeScriptでは、この定数は数値型（number）として宣言！、あの定数は文字型（string）として宣言！
といったように型を宣言しつつJavaScriptを書いていくことができます。

型定義によって、何がうれしいのかというと、
**コードの予期しない動作によるバグを減らすことが出来ます**

例えば、以下のような場合です。
> 本当は、文字列として扱いたい定数が、なにかしらの処理によって、最終的に数値が入ってしまい、エラーが起きた。。。

**TypeScriptを使えば「コーディング段階」でこのような型の矛盾を、検知することが出来ます。**

# 型に関する概要

今回は、TypeScriptの基本的な機能である、1. 型推論、2. 型の定義について紹介します。

### 1. 型推論
型推論とは、何も型を定義しなくても、勝手に型を推論してくれる（型を生成してくれる）神の御業です。
たとえば、以下のようなコードを書いたとします。

```Typescript
let smartPhone = 'Android';
```

そして、この変数に数値を入れてみましょう。

```TypeScript
let smartPhone = 'Android';
smartPhone = 11; // Problem: タイプ「数値」はタイプ「文字列」に割り当てることができません.ts(2322)
```

すると、数値を代入した行で「タイプ「数値」はタイプ「文字列」に割り当てることができません.ts(2322)」と警告されました。
つまり、最初に`'Android'`を代入した時点で、TypeScriptが自動的に型を推論し、割り当てるので、
この`smartPhone`変数には文字列（string）以外を代入しようとすると、怒られてしまいます。

これが、**型推論**になります。

このように自動的に推論してくれるので、**引数が文字列でないと駄目🙅な関数**に誤って、数値を入れることもなくなります。
「引数は、文字列でないと駄目です！この変数は数値型です！」と勝手に怒ってくれるわけです。

```typescript
let version = 11; // 数値（number）型

const upVersion = (device: string) => { // 引数は文字列（string）型
  console.log(`OSは${device}です`)
}

upVersion(version); // Problem: タイプ 'number'の引数をタイプ 'string'のパラメーターに割り当てることはできません。ts（2345）
```

### 2. 型の定義
型定義とは、字の通り型を（明示的に）定義することです。
簡単な例は、以下になります。

```typescript
let version: number = 11; // versionは数値（number）型ですよ！
const smartPhone: string = 'Android'; // smartPhoneは文字列（string）型ですよ！
```

JavaScriptでは、様々なデザインパターンを利用てきますが、一部のデザインパターンでは、型を自動的に推測することは困難です。
例えば、以下のようなObjectです。

```typescript
const fish = {
  name: "iwana",
  weight: 100,
}
```
これは、`interface`宣言を利用すると、事前にオブジェクトの形状を定義することが出来ます。
今回は動物である、`Animal`型を作ってみました。

```typescript
interface Animal {
  name : string;
  weight: number;
}
```

この`Animal`型は次のように利用します。

```typescript
const penguin: Animal = {
  name: "Emperor penguin",
  weight: 10000,
}
```
仮に、Animal型と一致しないオブジェクトを指定すると、警告が出ます。

```typescript
const plastic: Animal = {
  name: "pen",
  material: "oil", // オブジェクトリテラルは既知のプロパティのみを指定でき、「material」はタイプ「Animal」に存在しません。ts（2322）
  weight: 5,
}
```

また、クラスとオブジェクト指向プログラミングのサポート、関数の引数の型や返り値の型もサポートしています。

```typescript
// Animal型
interface Animal {
  name: string;
  weight: number;
}

// class
class AnimalBook {
  name: string;
  weight: number;

  constructor(name: string, weight: number) {
    this.name = name;
    this.weight = weight;
  }
}

const user: AnimalBook = new AnimalBook("dog", 1000);

// 関数の返り値をAnimal型に
const getAnimalInfo = (): Animal => {
  return {
    name: "Emperor penguin",
    weight: 10000,
  };
};

// 関数の引数をAnimal型に
const deleteAnimalInfo = (animal: Animal):void => {
  ///...
}
```

他にも、JavaScriptの`boolean`、`bigint`、`null`、`symbol`、`object`、`undefined`なども利用できます。
加えて、TypeScript特有の`any`型や`unknown`型、`never`や`void`もあります。

ちなみに今回は、`interface`を利用して、型をカスタマイズしましたが、`Type`という構文を使って、型を作る事もできます。

# おわりに
以上が、TypeScriptで重要な**1. 型推論**と**2. 型定義**でした！
基本的に概要なので深くまで説明していませんが、TypeSciptについて理解が進めば幸いです。

わかりやすい！と思った方は是非LGTM✨おねがいします

Next: [TypeScriptをなんとなく理解するための記事② ~型を組み合わせる: Union~](https://qiita.com/NOMURA_keibyou38/items/9db230baf556cdfee276)

@ ハンズオンも書いたので、さっそく使ってみたい人は是非！
　👉[【TypeScriptハンズオン①】男もすなるTypeScriptといふものを、女もしてみむとてするなり](https://qiita.com/NOMURA_keibyou38/items/8cb285900291df83957a)

# 参考文献
- https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html
- https://qiita.com/EBIHARA_kenji/items/4de2a1ee6e2a541246f6
- https://typescript-jp.gitbook.io/deep-dive/type-system/type-inference