TypeScriptハンズオン2（module化とimport, tsc, tsconfig）

モジュールでの型宣言とimport

ES Moduleで他ファイルに型宣言したものを読み込ませることができる。

// Interfaces.ts

export interface Person {
  name: string;
  age?: number;
}

enum Job {
  WebDev,
  WebDesigner,
  PM
}

export default Job;

// index.ts

import Job, { Person } from './Interfaces';

const sayName = ({ name, age }: Person): Person => ({ name, age });

console.log(sayName({ name: 'Sungjoon' }));
console.log(sayName({ name: 'Sun Soo', age: 88 }));

const job: Job = Job.WebDev;

console.log(job); // returns 0

TSCの活用

TypeScript (typescript)をインストールすると、デフォルトでTSCというコンパイラがインストールされる。 ParcelやWebpackなどのバンドラでは、このTSCが実際は使用されている。

devDependenciesとしてtypescriptをインストールしておいて、npm scriptsで実行するなどできる。

package.json

{
  "scripts": {
    "tsc": "tsc"
  }
}

プロジェクト内でのTS設定

tsconfig.jsonファイルでプロジェクト内の定義を行う。 例えば、無視したいルールや、含める／含めないフォルダなどはここに記述する。

tsconfig.json

{
  "compilerOptions": {
    "removeComments": true
  },
  "include": ["./src/**/*"],
  "exclude": ["node_modules"]
}