Skip to content

index.mdx

Latest commit

 

History

History
553 lines (377 loc) · 21 KB

index.mdx

File metadata and controls

553 lines (377 loc) · 21 KB
title TypeScript

import { SiTypescript } from "react-icons/si"; import typescriptDemoVideo from "./typescript-demo.mp4"; import setupTypeScriptNodeVideo from "./setup-typescript-node.mp4"; import typesPackageVideo from "./types-package.mp4"; import viteTypescriptVideo from "./vite-typescript.mp4";

JavaScriptとデータ型

次のような関数を考えてみましょう。

function formatDate(date) {
  return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
}

この関数のdate引数には、どのような値を指定すれば良いでしょうか。答えは、Dateオブジェクトを指定することです。formatDate(new Date("2022-01-01"))は動作しますが、formatDate("2022-01-01")はエラーになってしまいます。しかも、エラーが発生するかどうかは実際に実行してみるまでわかりません。

上のような単純なプログラムならこういった問題は起きにくいですが、プログラムの規模が大きくなるにつれ、「どういった値がやりとりされているのか」という情報を把握することが重要になってきます。こういった情報を、データ型、あるいは単に型と呼びます。

TypeScriptを用いると、プログラム中にデータ型を記述できるようになります。TypeScriptは、Microsoft社によって開発された、JavaScriptにトランスパイルして用いられる言語です。

TypeScriptにおける型は、通常:の記号に続けて記述します。例えば、先程のプログラムをTypeScriptを用いて書き直すと、次のようになります。引数の部分に型指定が入っているところに注目してください。

function formatDate(date: Date) {
  return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
}

TypeScriptを導入することにより、このプログラムを記述する際に、次のような支援が得られます。

  • date.と入力されたタイミングで、使用可能なメソッドが全て表示されます
  • 誤った型の引数 (動画内では文字列) を指定すると、エラーが表示されるようになります