2023/03/19
[TypeScript] 解決 Webpack v4 升級到 v5 遇到 tsc 編譯時出現 Cannot find name 'Map'
### 問題
繼上編解決在 webpack v4 的安全性相依成功升級後。接下的任務是進一步將 webpack 的版本由 v4 升到 v5。
升級前環境：
```json
"devDependencies": {
"@types/node": "^16.0.0",
"ts-loader": "^8.4.0",
"typescript": "^5.0.2",
"webpack": "^4.46.0",
"webpack-cli": "^4.10.0"
}
```
把 webpack 及 webpack-cli 升級到 5.x，並同步升級 ts-loader 至 9.x 版本
執行 tsc 時出現 Cannot find name 'Map' 的問題
### 解決方法
除了更新 webpack, webpack-cli, ts-loader 的版本外
也要一併更新 `@type/node` 的版本
```
npm install -D @types/node
```
修改 `tsconfig.json` 加上 typeRoots 的位置
```
"typeRoots": [
"node_modules/@types"
],
```
升級後環境：
```json
"devDependencies": {
"@types/node": "^16.18.16",
"ts-loader": "^9.4.2",
"typescript": "^5.0.2",
"webpack": "^5.76.2",
"webpack-cli": "^5.0.1"
},
```
### 後記
其實在這專案的底下還有一組是用 Typescript 2.x 的版本做編譯，但暫時未能同步升級，卻用不同的 Typescript 的版本，不特別指定會是以主目錄下的 `node_modules/@type` 為目標。所以兩個都直接指定各自的 typeRoots 就可以順利通過編譯。總算也把開發的相依套件版本全都升級完成。
### 參考連結
- [Typescript compiler: Cannot find name 'Map'](https://stackoverflow.com/questions/52468096/typescript-compiler-cannot-find-name-map)
2020/03/16
[TypeScript] 解決 TS2300: Duplicate identifier 'IteratorResult' 錯誤問題
markdown
今天在做 VS Code 套件編譯時出現以下錯誤訊息: `Duplicate identifier 'IteratorResult'`
有 2 個 *.d.ts 檔案定義相沖突
```
Starting compilation in watch mode...
../../../npm/node_modules/typescript/lib/lib.es2015.iterable.d.ts:41:6 - error TS2300: Duplicate identifier 'IteratorResult'.
41 type IteratorResult = IteratorYieldResult | IteratorReturnResult;
~~~~~~~~~~~~~~
node_modules/@types/node/index.d.ts:74:11
74 interface IteratorResult { }
~~~~~~~~~~~~~~
'IteratorResult' was also declared here.
node_modules/@types/node/index.d.ts:74:11 - error TS2300: Duplicate identifier 'IteratorResult'.
74 interface IteratorResult { }
~~~~~~~~~~~~~~
../../../npm/node_modules/typescript/lib/lib.es2015.iterable.d.ts:41:6
41 type IteratorResult = IteratorYieldResult | IteratorReturnResult;
~~~~~~~~~~~~~~
'IteratorResult' was also declared here.
Found 2 errors. Watching for file changes.
```
### 解決方法
在 `tsconfig.json` 的 `compilerOptions` 區塊加上以下設定, 再重新執行編譯
透過直接跳過 Library 的檢查, 因為它不在我程式碼的控制範圍內, 把它排除即可
```
"skipLibCheck": true,
```
2016/09/25
[TypeScript] TypeScript 2.0 之後定義檔 (*.d.ts) 的安裝方法
TypeScript 2.0 發佈後, 可以不用再用最早的 TSD 及過渡時期的 Typings 來下載定義檔了.
可以用 npm 來統一安裝管理
先確認目前的 TypeScript 版本 (今天查是 2.0.3)
如果還在 1.8.x 那麼可以更新囉!!
現在要安裝定義檔, 可以用
例如 vue 的定義檔
在 tsconfig.json 檔可以加上以下區塊 (types 是 TypeScript 2.0 以後才支援喔, 查看 schema)
Microsoft 也提供定義檔搜尋工具, 可以好好運用: http://microsoft.github.io/TypeSearch/
終於又可以再少一些怪怪的語法, 太多太雜都快記不住了 (所以筆記還是要不斷更新才行 XD)
可以用 npm 來統一安裝管理
先確認目前的 TypeScript 版本 (今天查是 2.0.3)
tsc -v如果還在 1.8.x 那麼可以更新囉!!
npm install -g typescript現在要安裝定義檔, 可以用
@types/[PACKAGE] 來表示例如 vue 的定義檔
npm install --save @types/vue在 tsconfig.json 檔可以加上以下區塊 (types 是 TypeScript 2.0 以後才支援喔, 查看 schema)
"types": [
"vue"
]Microsoft 也提供定義檔搜尋工具, 可以好好運用: http://microsoft.github.io/TypeSearch/
終於又可以再少一些怪怪的語法, 太多太雜都快記不住了 (所以筆記還是要不斷更新才行 XD)
2016/06/03
[TypeScript] Typings 更新至版本 1.0 後的指令變更
版本: typings 1.0.4
我們在寫 TypeScript 時都需要利用 Typings 來協助定義檔的管理.
今天在使用 typings 指令時, 被提醒要更新至 1.0.4 版本
結果要下載 vue.js 的定義檔, 卻發生錯誤, 無法正確下載
原本在 typings 0.x 的版本指令
typings 1.0 後變更指令
更新至 typings 1.0.x 之後指令需變更為
加上 dt~ 代表是從 DefinitelyTyped 下載
另外還有 env~ 及 npm~ 的選項, 若不特別註明, 則預設來源為 npm
我們在寫 TypeScript 時都需要利用 Typings 來協助定義檔的管理.
今天在使用 typings 指令時, 被提醒要更新至 1.0.4 版本
結果要下載 vue.js 的定義檔, 卻發生錯誤, 無法正確下載
原本在 typings 0.x 的版本指令
typings install vue --ambient --savetypings 1.0 後變更指令
更新至 typings 1.0.x 之後指令需變更為
typings install dt~vue --global --save加上 dt~ 代表是從 DefinitelyTyped 下載
另外還有 env~ 及 npm~ 的選項, 若不特別註明, 則預設來源為 npm
2016/04/26
[TypeScript] 如何更新舊有的 TSD 至新的 Typings 定義檔管理
早前開發 TypeScript 有使用 TSD 的定義檔管理, 現在都轉移至 Typings.
TSD 與 Typings 的使用方法相差雖不大, 目前仍有一些小細節需要注意
原本 tsd:
現在 typings:
--ambient 參數在 Typings 是為全域性的定義, 目前 DefinitedTyped typings 都是屬於全域.
那麼如何更新舊有的 TSD 到 Typings 呢?
1. 刪除舊的 typings 資料夾
2. 轉移原 tsd.json 升級至新的 typings
3. 依需求更新 tsconfig.json
還好更新起來很簡單, 只是記得要加上 --ambient 參數來載入定義檔! 多記一個單字囉~
TSD 與 Typings 的使用方法相差雖不大, 目前仍有一些小細節需要注意
原本 tsd:
tsd install jquery --save現在 typings:
typings install jquery --ambient --save--ambient 參數在 Typings 是為全域性的定義, 目前 DefinitedTyped typings 都是屬於全域.
那麼如何更新舊有的 TSD 到 Typings 呢?
1. 刪除舊的 typings 資料夾
rm -rf typings2. 轉移原 tsd.json 升級至新的 typings
typings init --upgrade
rm tsd.json
typings install3. 依需求更新 tsconfig.json
還好更新起來很簡單, 只是記得要加上 --ambient 參數來載入定義檔! 多記一個單字囉~
[TypeScript] 如何用 Vue.js 搭配 TypeScript
TypeScript 是由 Microsoft 開發的 Open Source 程式語言。它是 JavaScript 的超集合。
TypeScript 的幾個特性：
想要更了解 TypeScript 可以看看這一篇 快速瞭解 TypeScript 是什麼東西
先來實做一個簡單的 TypeScript 應用吧!
TypeScript 的幾個特性：
- TypeScript = 靜態型別 + 動態型別
- TypeScript 涵蓋 JavaScript 語法，並支援 class, interface, module
- TypeScript 最終編譯結果是 JavaScript
想要更了解 TypeScript 可以看看這一篇 快速瞭解 TypeScript 是什麼東西
先來實做一個簡單的 TypeScript 應用吧!
2015/05/13
[TypeScript] TSD - TypeScript 管理套件
隨著網站開發的頻繁度, 寫 JavaScript 也從來沒有輕鬆過, 但為了寫出更好的 JavaScript 程式的品質, 利用 TypeScript 定義規範, 可以讓錯誤減少機會發生, 不用抓蟲抓得太辛苦!
在 Visual Studio 裡有 NuGet 套件管理可以很方便地取得需要的定義檔.
PM> Install-Package jquery.TypeScript.DefinitelyTyped
但是開發 PHP 寫的網站, IDE 工具不夠強大, 還是需要找到一個可以容易管理取得的方法.
1. 必需要先有 Node.js
2. 安裝 TSD - 主要透過它來取得定義檔
npm install tsd@next -g
3. 建立初始檔
將會在產生 tsd.json 檔案, 包含預設值及安裝路徑 (path)
預設路徑為 typings , 依開發需求變更安裝路徑
4. 下載需要的套件定義
基本步驟搞定~ 剛開始研究花比較多時間了解, 以後就不需東找西找, 省下時間 coding
更多有關 TSD 的資料: https://github.com/DefinitelyTyped/tsd
npm init將會在產生 tsd.json 檔案, 包含預設值及安裝路徑 (path)
預設路徑為 typings , 依開發需求變更安裝路徑
4. 下載需要的套件定義
tsd install jquery --save基本步驟搞定~ 剛開始研究花比較多時間了解, 以後就不需東找西找, 省下時間 coding
更多有關 TSD 的資料: https://github.com/DefinitelyTyped/tsd
訂閱：
文章 (Atom)