🐕

ミニマムで理解するTypeScript入門

に公開
JavaScript
TypeScript
初心者向け
tech

TypeScriptの説明をする際によく話す内容

TypeScriptってなに？

TypeScriptは、MicroSoft製のAltJSの一種。

  • パッケージとしてインストールし、tsconfig.jsonで構文ルールを管理する方法が主流
  • 「トランスパイル」という変換を実行すると、JavaScriptとして出力される

AltJS = JavaScript開発をより効率的にするための機能・ライブラリの一種

  • ほかには CoffeeScript などがある

TypeScript の書き方

簡単なサンプル

挨拶を標準出力するサンプルプログラム

const greetName = (name) => {
  const message = `hello, ${name}!`;
  return message;
};

const main = () = > {
  const name = "太郎";
  const message = greetName(name);
  console.log(message);
};

main();

TypeScriptで実装する場合、下記のようになる。

  • 変数名後の : (コロン) 以降が型定義
  • 関数 greetName はstringを受け取り、stringを返す
  • 関数 main は引数無し、戻り値無し
const greetName = (name: string): string => {
  const message = `hello, ${name}!`;
  return message;
};

const main = (): void => {
  const name: string = "太郎";
  const message: string = greetName(name);
  console.log(message);
};

main();

オブジェクトを使ったサンプル

JavaScriptでオブジェクト定義時、オブジェクトのプロパティがあいまいになりがち。
TypeScriptではこれを明示でき、誤ったプロパティアクセスを構文エラーとして表現できる。

const greetName = (name) => {
  const message = `hello, ${name}!`;
  return {result: message};
};

const main = () = > {
  const name = "太郎";
  const output = greetName(name);
  // console.log(output.message); // 実行時にundefinedになり、エラーにはならない
  console.log(output.message);
};

main();

// ---------------------------
// TypeScriptの独自構文. オブジェクトの型を定義
// ---------------------------
type GreetResult = {
  result: string;
}

const greetName = (name: string): GreetResult => {
  const message: string = `hello, ${name}!`;
  return {result: message};
};

const main = (): void => {
  const name: string = "太郎";
  const output: GreetResult = greetName(name);
  // console.log(output.message); // 構文エラーになる
  console.log(output.result); // 正しいアクセス
};

main();

セットアップ方法

前提

  • Node.js をインストールしていること
  • npm を利用できること

インストール

npm install -g --save-dev typescript

tsファイル作成

cat << "EOF" > ./sample.ts
type GreetResult = {
  result: string;
}

const greetName = (name: string): GreetResult => {
  const message: string = `hello, ${name}!`;
  return {result: message};
};

const main = (): void => {
  const name: string = "太郎";
  const output: GreetResult = greetName(name);
  // console.log(output.message); // 構文エラーになる
  console.log(output.result); // 正しいアクセス
};

main();
EOF

トランスパイル

tsc ./sample.ts

# トランスパイル結果を確認してみる
cat ./sample.js

型定義が外れた状態になっているはず

sample.js
var greetName = function (name) {
    var message = "hello, ".concat(name, "!");
    return { result: message };
};
var main = function () {
    var name = "太郎";
    var output = greetName(name);
    // console.log(output.message); // 構文エラーになる
    console.log(output.result); // 正しいアクセス
};
main();

Discussion