大家好，很高興又見面了，我是"高級前端‬進階‬"，由我帶著大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點讚、收藏、轉發!

今天給大家帶來的主題是 AnyScript，前幾天寫了一篇文章來探討前端明星項目Deno、Svelte從TypeScript 遷移到 JavaScript 引起了大家的強烈討論，以下是文章的傳送門。

《兩大前端明星項目放棄 TypeScript！誰下一個擁抱 JS ？》

當時有粉絲朋友提到了AnyScript，所以今天就專門給大家分享下這個主題。話不多說，直接進入正題。

前言

TypeScript 是 Web 開發人員中最常用的程式語言之一。它具有出色的語言特性，可讓開發者輕鬆設計可擴展的應用程式。因此，開發人員通常傾向於選擇 TypeScript 而不是 JavaScript，特別是長周期、多人協作的大型項目中。

但是，在使用 TypeScript 以最大限度地發揮其功能時，通常需要避免一些常見的錯誤。例如，過度使用 any 類型是經常犯的一個錯誤，特別是 TypeScript 的初學者。雖然聽起來很簡單，但過度使用 any 類型可能完全違反了 TypeScript 的基本原則。通常將這種過度使用any 類型的 TypeScript 代碼稱為 AnyScript。

因此，本文將重點討論過度使用 any 類型的潛在問題、any 類型的替代方案以及何時應該和不應該使用 any 類型，以便您能更好地理解 TypeScript。

1.TypeScript 中的any 類型是什麼

當在 TypeScript 中定義一個變量時，開發者必須明確告訴變量的類型。例如，如果使用字符串作為數據類型，TypeScript 會理解該變量只能有字符串值。如果嘗試為變量分配不同類型的值，TypeScript 將顯示錯誤。

例如，下面的代碼片段會拋出一個錯誤，即類型「數字」不可分配給類型「字符串」。

let myVariable: string = '';
myVariable = 20;
// 報錯： Type 'number' is not assignable to type 'string'.(2322)

同樣，any 是 TypeScript 中可用的另一種數據類型。但它與其他變量不同，因為使用 any 會告訴 TypeScript 該變量可以有任何值。因此，如果使用any類型定義一個變量，可以將數字、字符串、布爾值甚至對象賦值給該變量而不會出錯。

let myVariable: any = 'String Value';
console.log('Value of myVariable : ' + myVariable);
// 字符串
myVariable = 20;
console.log('Value of myVariable : ' + myVariable);
// 數字
myVariable = false;
console.log('Value of myVariable : ' + myVariable);
// 布爾值

有些人可能認為這是定義項目中所有變量的好方法。但是使用 any 類型會帶來一些明顯的缺點，它會使 TypeScript 項目類似於常規的 JavaScript 項目。

2.為什麼不應該使用 any 類型

2.1 避免使用any類型

類型檢查是 TypeScript 最重要的功能之一，它通過檢查數據分配和類型轉換來避免應用程式中的意外問題。

const intersection = (a: any, b: any): any => {
...
}
const intersection = (
  a: Set<number>, b: Set<number>
): Set<number> => {
...
}

當開發者使用 any 類型時，變量不會有特定的數據類型，可以將多種類型的值賦給同一個變量。此外，編譯器不會對定義為any類型的變量執行類型檢查，因此項目看起來就像一個普通的 JavaScript 項目。

2.2 何時使用any類型

那麼，為什麼 TypeScript 提供了一個名為 any 的數據類型？在某些特定情況下，any 類型可能非常有用。作為開發人員，應該能夠識別這些情況並相應地應用 any 類型。下面是使用 any 類型的一些可能的場景。

代碼遷移

當將 JavaScript 項目遷移到 TypeScript 時，any 類型是一個有價值的選擇。例如，如果正在將 AngularJS 項目遷移到新的 Angular 版本，可以使用 any 類型來處理尚未遷移的變量類型。

Angular 是一個完全用 TypeScript 構建的現代框架，因此，將 TypeScript 與 Angular 結合使用可提供無縫體驗。Angular 文檔不僅支持 TypeScript 作為一等公民，而且將其用作主要語言。

第三方庫

有時，開發者可能會遇到使用任何類型的第三方庫。在這種情況下，將不得不在項目中使用any 類型來使用該庫，但請確保儘快將其轉換為正確的類型。

處理類型錯誤

處理 TypeScript 類型錯誤是開發者可能需要 any 類型的另一種情況。如果找不到任何其他解決方案，可以使用 any 類型來解決問題並稍後將其轉換為合適的類型。

3.本文總結

❌ 不要使用 any 作為類型，除非正在將 JavaScript 項目遷移到 TypeScript。編譯器有效地將 any 視為「請關閉對此事物的類型檢查」。

它類似於在變量的每個用法周圍放置一個@ts-ignore 注釋。當開發者第一次將 JavaScript 項目遷移到 TypeScript 時，這可能非常有用，因為可以為尚未遷移的內容設置類型。但在完整的 TypeScript 項目中，any 將禁用對程序的任何部分的類型檢查，這絕非最優選擇。

如果不知道想要接受什麼類型，可以嘗試使用 unknown 來替換 any。

關於 AnyScript 的更多弊端、如何解決的方案文章並沒有過多展開，如果有興趣，可以在我的主頁繼續閱讀，同時文末的參考資料提供了大量優秀文檔以供學習。最後，歡迎大家點讚、評論、轉發、收藏！

參考資料

https://blog.bitsrc.io/stop-using-any-type-in-typescript-48ebefc8b299

https://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html

https://thoughtbot.com/blog/typescript-stop-using-any-there-s-a-type-for-that

https://www.codiga.io/blog/typescript-avoid-type-any/

https://medium.com/geekculture/way-to-use-3rd-party-libraries-in-typescript-84ab879b3890

https://www.typescriptlang.org/docs/handbook/angular.html

yi wa

棄用 TypeScript ：從使用 AnyScript 開始！

前言