---
title: 'Typescript Configuration'
disqus: hackmd
---

Typescript Configuration
===
###### tags: `Typescript`

## Table of Contents

[TOC]

專案監控 X 編譯設定
---
### 一、tsconfig.js 專案相關
target 選項：
主要目標是設定專案被編譯過後的語言版本，預設值為 ES3 版本（官方指定的）；可以選擇其他版本諸如：ES5、ES6（或 es2015 以上）甚至還有 ESNext

lib 選項：
可以指定要載入的宣告性群組，通常是指功能層面（Utility Aspect）的宣告，不是語法層面。選項眾多，常見的是 dom、es2015 等等選項。

module 選項：
代表被編譯過後，應該要採用的模組語法之規範，比如 commonjs、amd 或 es6 等

### 二、語法層面與功能層面的差異
**語法層面**（Syntatic Aspect）泛指單純語法解析上的特點，通常語法是自然內建在編譯器的

**功能層面**（Utility Aspect）泛指可以藉由語法實踐的功能，並非內建在編譯器，通常會以函式庫（Library）的方式載入，或以 ECMAScript 的觀點來看 —— 以 Polyfill 的方式載入功能

專案輸出 X 輸出設定
---
### 一、rootDir & outDir

{
  "compilerOptions": {
    /*通常就是專案被編譯過後輸出的位置*/
    "outDir": "./build",
    /* 通常就是專案主要程式碼所在的位置*/
    "rootDir": "./src",
  }
}

- 只要專案有任何環節出錯，一概不輸出 —— noEmitOnError

{
  "compilerOptions": {
    "noEmitOnError": true,
  }
}

- rootDirs 可以提供複數個主目錄
- outFile 打包成單個檔案
- tsconfig.json 中的 module 模組規範的選項只能為 amd 或 system 這兩種
- outFile 與 outDir 這兩個是完全不相干的設定，所以 outFile 不會在 outDir 指定的資料夾產出結果
- 同時出現 outFile 與 outDir 選項，TypeScript 編譯器裝作沒看見 outDir 這個設定

專案除錯 X 源碼對照
---

- debugger
設定 debugger 位置，瀏覽器執行程式碼動作就會停在 debugger 的位置，這時可以對變數做觀看或更改的動作

$btn.addEventListener('click', () => {
  count++;
  console.log('You clicked me!');
  debugger;

  $counter.innerText = count.toString()
})

- breakpoint
跟 debugger 用法相似，是瀏覽器內建的功能

- sourcemap
可以直接原本的ts檔案(非編譯出來的js檔案)做 debug 的動作

專案語法 X 嚴格把關
---

- strickNullChecks
null 或 undefined 會被視為獨立的原始型別

- noImplicitAny
禁止隱性的 any 型態

- noUnusedLocals —— 如果有變數沒有被使用就會出現警告
- noUnusedParameters —— 如果函式裡的參數沒有被使用，就會發出警告
- noImplicitReturns —— 如果函式裡有出現路徑是沒有回傳值就會發出警告
- noFallthroughCasesInSwitch —— 每個 switch 裡面的 case 判斷敘述式一定要有 break 語法，不能有 case 沒有 break 以至於會執行到下一個 case
- noImplicitThis —— this 如果被 TypeScript 判定為 any 型態時就會發出警告

命名空間 X 組織分明
---

### 一、命名空間模組 TypeScript Namespaces Introduction
> 命名空間主要的目的是組織並且包裝程式碼。其中，每個人寫的程式碼、套件、框架等，在各種變數、函式、類別等等的取名上可能會有重複。
> 宣告名為 Namespace 的區塊 —— 每個程式碼、套件等可以建立起自己的空間，自由使用命名而不需要擔心會不會誤用到其他套件或程式碼已經命名過的變數、函式等。

- 命名空間的宣告
若想要宣告某命名空間 N，該空間若想提供變數 X 與方法 M，則宣告時，必須將 X 與 M 使用 export 關鍵字進行輸出的動作。


- 任何東西想要輸出就必須標註 export 關鍵字
> 輸出型別、介面、類別
> 輸出巢狀命名空間

- 命名空間融合 Namespces Merging
- 同個命名空間下，使用交互輸出的功能

戰線分散 X 組織集中
---