TOP

TypeScript



はじめに

このページは、JavaScriptの進化の続きのページです。
ここではもっとも代表的なAltJSであるTypeScriptにスポットを当てて記載していきます。
一応このページから読み進めても問題ないように構成したつもりですが、先のページを見てからの方が、TypeScriptが生まれるまでの背景がわかって面白いかもしれません。


AltJS

AltJS（代替JavaScript言語）とは、コンパイルすることでJavaScriptが生成されるプログラミング言語です。
TypeScriptとCoffeeScript辺りが有名ですが、なかでもTypeScriptはSPA(Single Page Splication)のフレームワークでも対応されているほど標準的なものとして受け入れられています。
ここではTypeScriptについて記載していきます。


TypeScript

TypeScriptは2012年に登場した、Microsoft製のAltJSです。フリーかつオープンソースで提供されており、中規模〜大規模な開発を想定しており、以下のような仕様があります。

  • 型定義
  • null/undefine安全
  • 汎用的なクラスやメソッドの型を実現するジェネリック
  • エディターによる入力補完
  • その他のECMAで定義されているJavaScriptの最新仕様

TypeScriptで記述されたソースコードはビルドツールを通じて最終的にはJavaScriptに変換されるため、JavaScriptで実装したものと比べてパフォーマンスも差異はなく、また、古いブラウザをターゲットにしたトランスパイルも可能です。このため、実行環境などが導入の障壁になることはあまりないでしょう。

TypeScriptを採用するデメリットを挙げるとすれば以下のような点です。

  • プロジェクトの規模によってはコンパイルに時間がかかる
  • 導入のための学習コストがかかる


型の定義

TypeScriptの最大の特徴は型の定義です。型注釈(Type Annotation)と呼ばれる方情報を付与することで、変数や引数に格納する型を制限できます。
なお、型注釈は変数のデータ型が明らかな場合など、一部の条件では省略できます。

function sayHello(name: string) {
  console.log(name)
}

let name: string = 'aaa'
sayHello(name)

変数の型定義

const age: number = 30
let isDone: boolean = true
let name: string = 'abc'

配列の型定義

const array: string[] = ['aaa', 'bbb']
array.push('ccc')
array.push(1) // ←型が合わないためエラー

オブジェクト型の型定義

{ キー名1: 型1, キー名2: 型2, キー名3: 型3 }

const user: { name: string, age: number } = {
  name: 'aaa',
  age: 36
}
console.log(user.name)
console.log(user.age)

関数の型定義

function(引数1: 型1, 引数2: 型2): 戻り値 {
  // 
}


function sayHello(name: string): string {
  return `こんにちは${name}`
}
sayHello('aaa') // こんにちはaaa

オプショナルや引数のデフォルト値を使用することもできます

オプショナル
function sayHello(name: string, greeting?: string): string {
  return `${greeting} ${name}`
}
sayHello('aaa') // aaa
sayHello('aaa', 'hello') // hello aaa


引数にデフォルト値指定
function sayHello(name: string, greeting: string = 'hello'): string {
  return `${greeting} ${name}`
}
sayHello('aaa') // hello aaa
sayHello('aaa', 'hey') // hey aaa


tsconfig.json

TypeScriptではコンパイルに必要なオプションやコンパイル対象となるファイルの情報をtsconfig.jsonに記述します。
tsc --initコマンドを実行することでデフォルトのtsconfig.jsonが作成されます。プロジェクトルートに配置しましょう。
tsconfig.jsonの詳細なオプションについては以下公式ドキュメント参照
TypeScript Compiler Options 


tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}



参考書籍

参考サイト


↑