TypeScript

支援的副檔名ts 及 tsx

TypeScript 是個強型別語法的 JavaScript 超集合，其可支援 ES2015+ 的功能並可編譯成一般的 JavaScript。Parcel 已內建 TypeScript 的轉換，完全無需設定。

Parcel 不會執行 type check，你可以使用 tsc --noEmit 讓 TypeScript 檢查你的檔案。

<!-- index.html -->
<html>
<body>
  <script src="./index.ts"></script>
</body>
</html>

// index.ts
import message from './message'
console.log(message)

// message.ts
export default 'Hello, world'

當你使用 React 時

若要使用 TypeScript + React + JSX，你需要：

使用 .tsx 副檔名
正確地引用 React
在 tsconfig 中使用特殊選項 "jsx": "react"

完整範例：

<!-- index.html -->
<html>
<body>
  <div id="root"></div>
  <script src="./index.tsx"></script>
</body>
</html>

// index.tsx
import React from 'react'
import ReactDOM from 'react-dom'

console.log('Hello from tsx!')

ReactDOM.render(
    <p>Hello</p>,
    document.getElementById('root'),
)

// .tsconfig
{
  "compilerOptions": {
    "jsx": "react"
  }
}

詳情請見此討論串：https://github.com/parcel-bundler/parcel/issues/1199

baseURL 和 paths

Parcel 不會使用 tsconfig.json 中的 baseUrl 和 paths 指令，你可以用 Parcel 的 ~ 模型載入方式取而代之：

// tsconfig.json
// 假設你的 ts 原始碼位於 ./src/
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "~*": ["./*"]
    },
  },
  "include": ["src/**/*"]
}

完整範例請見此 gist。

協助我們讓本文件更加完善

若有什麼內容遺漏了或是敘述不清楚的地方，請在本站的 repository 中開啟一個 issue 或者編輯此頁面。