search
LoginSignup
45
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

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

この記事は何?

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

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

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

TypeScriptとは?

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

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

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

例えば、以下のような場合です。

本当は、文字列として扱いたい定数が、なにかしらの処理によって、最終的に数値が入ってしまい、エラーが起きた。。。

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

型に関する概要

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

1. 型推論

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

let smartPhone = 'Android';

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

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

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

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

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

let version = 11; // 数値(number)型

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

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

2. 型の定義

型定義とは、字の通り型を(明示的に)定義することです。
簡単な例は、以下になります。

let version: number = 11; // versionは数値(number)型ですよ!
const smartPhone: string = 'Android'; // smartPhoneは文字列(string)型ですよ!

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

const fish = {
  name: "iwana",
  weight: 100,
}

これは、interface宣言を利用すると、事前にオブジェクトの形状を定義することが出来ます。
今回は動物である、Animal型を作ってみました。

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

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

const penguin: Animal = {
  name: "Emperor penguin",
  weight: 10000,
}

仮に、Animal型と一致しないオブジェクトを指定すると、警告が出ます。

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

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

// 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のbooleanbigintnullsymbolobjectundefinedなども利用できます。
加えて、TypeScript特有のany型やunknown型、nevervoidもあります。

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

おわりに

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

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

Next: TypeScriptをなんとなく理解するための記事② ~型を組み合わせる: Union~

@ ハンズオンも書いたので、さっそく使ってみたい人は是非!
 👉【TypeScriptハンズオン①】男もすなるTypeScriptといふものを、女もしてみむとてするなり

参考文献

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
45
Help us understand the problem. What are the problem?