使用ts-node就可以直接執行ts，但是vscode控制檯還是不如大chrome的好用呀！所以想辦法用最簡單的辦法讓ts間接地跑在瀏覽器裡進行除錯！

瀏覽器是不能直接執行ts的，所以需要轉換到js。但是js又有一堆不同的規範。。

ts可以轉換的目標規範有很多，比如es6，commonjs，amd等等。

但是轉換到es6時，會有瀏覽器無法相容的import關鍵字，還要再用厚重的babel轉。放棄！

轉換到commonjs，會有exports等也無法被瀏覽器識別。放棄！

所以選擇amd模組，使用requirejs載入就可以成功執行！

下面是tsconfig配置

{
  "compilerOptions": {
    "outDir": "./dist/",
    "outFile": "./dist/index.js",
    "module": "amd",
    "target": "es5",
    "allowJs": true,
    "removeComments": true
  }
}
 

測試程式碼（部分）

/*
 * @Author: AK-12
 * @Date: 2018-12-03 23:25:19
 * @Last Modified by: AK-12
 * @Last Modified time: 2018-12-04 16:36:07
 */
import { IAction } from './types/Types'
import * as Actions from './dev/Actions'
import { $Store } from './dev/Build'

// 監聽回撥
let listener = state => console.log(state)
// 註冊監聽回撥
let unsubscribe = $Store.subscribe(listener)
// 反註冊監聽
// unsubscribe()

// 發射action
$Store.dispatch<IAction<Actions.Title>>({
  type: 'reduce_title',
  value: 'hello title redux'
})

$Store.dispatch<IAction<Actions.Infor>>({
  type: 'reduce_name',
  value: 'hello name redux'
})

$Store.dispatch<IAction<Actions.Infor>>({
  type: 'reduce_message_p2',
  value: 'hello p2 redux'
})
 

使用了redux，對測試來說足夠複雜了吧

看看chrome控制檯

完美執行！