使用tsc編譯後原文件報錯

Ⅰ TS中的編譯選項

在TypeScript (TS)中，為了將代碼編譯成JavaScript (JS)執行，需要在終端中使用命令「tsc xxx」來進行編譯。傳統的方式並非實時監控，每次修改TS文件後都需要手動執行這個命令，對於多文件項目而言，操作流程較為繁瑣。

為了解決這個問題，可以採用實時監控的編譯選項。例如，在VS Code中，只需通過快捷鍵Ctrl+S（或根據設置進行保存），編譯器會自動檢測並編譯更改的TS文件。WebStorm用戶則可能利用編輯器的自動保存功能，無需額外指令，改動後即可自動生成相應的JS文件。

不過，這可能導致多個TS文件需要分別在多個終端窗口進行監控，新創建的文件也需要新開終端。對於多文件監控，一個解決方案是使用以下指令：

<pre>tsc -w（指定所有TS文件）</pre>

但是，這需要一個名為tsconfig.json的配置文件，可以自定義編譯選項和文件范圍。這個配置文件可以包含如下的關鍵信息：

• include：指定需要編譯的文件，可以是數組，如：`["**/*"]`，表示編譯當前目錄及其所有子目錄下的所有TS文件。


• exclude：排除不需要編譯的文件，與include相反，也是數組。


• compilerOptions：包含編譯器選項，如：target（指定TS版本轉換到的ES版本）、mole（選擇模塊規范）、lib（使用的庫）等，以及一些關於錯誤檢查、注釋處理等的選項。

配置文件中的選項允許靈活控制編譯行為，例如，allowJS可以決定是否編譯JS文件，而noEmitOnError則在有錯誤時是否生成文件。理解並適當地調整這些配置，可以提高開發效率並保證代碼質量。

Ⅱ typescript官方(typescript官網)

官方解釋：方法根據傳入參數的不同會返回兩種不同的類型。如果傳入的是代表紙牌的對象，函數作用是從中抓一張牌。如果用戶想抓牌，我們告訴他抓到了什麼牌。但是這怎麼在類型系統里表示呢。

比如我們有一個函數是這樣的，當第一個參數是字元的時候，第二個參數是數字。當第一個參數是數字的時候，第二個參數是字元。但在ts裡面我們該怎麼表示這個重載，我們看一下下面的這個例子：

當我們傳入錯誤的參數類型的時候,ts會給我們檢測出一個錯誤，說沒有與此調用匹配的重載。（因為我們沒有定義第一個參數為字元，第二個字元為字元，這樣的重載，所以ts會檢測出異常）

下面我們來增加一個重載，支持這種參數的傳遞

然後我們看一下執行結果

ok，沒報錯了

string和String是有效的TypeScript類型。以下聲明有效：

string是指JavaScript的基本類型，可以使用文本（單引號或雙引號）或String函數（不使用new關鍵字）創建。

以下三個聲明創建相同的字元串：

我們經常使用typeofvariable==='string'來檢查給定變數是否為原始字元串。

另一方面，String是一個基本包裝字元串的對象，用於操縱字元串。我們可以從構造函數中創建String的實例，例如newString(…)：

為了檢查變數是否為String對象的實例，我們必須使用instanceof運算符：

將String對象分配給基本string變數：

在編寫時，String被聲明為interface，以便將該string被視為String的子類型。因此，分配foo=bar不會導致任何問題。

但執行相反的賦值將拋出錯誤：

根據官方TypeScript的注意事項，建議不要使用Number、String、Boolean、Symbol或Object。

介紹

TypeScript是JavaScript語言的擴展，它使用JavaScript運行時和編譯時類型檢查器。

這種組合允許開發人員使用完整的JavaScript生態系統和語言功能，同時還添加可選的靜態類型檢查、枚舉數據類型、類和介面。這些特性為開發人員提供了JavaScript動態特性的靈活性，但也允許更可靠的代碼庫，其中可以在編譯時使用類型信息來檢測可能在運行時導致錯誤或其他意外行為的問題。

額外的類型信息還提供了更好的代碼庫文檔，並在文本編輯器中改進了IntelliSense（代碼完成、參數信息和類似的內容輔助功能）。隊友可以准確地確定任何變數或函數參數的預期類型，而無需通過實現本身。

准備工作

要遵循本教程，我們將需要：

1)、一個環境，我們可以在其中執行TypeScript程序以跟隨示例。要在本地計算機上進行設置，我們將需要以下內容。

2）、如果你不想在本地機器上創建TypeScript環境，你可以使用官方的TypeScriptPlayground來跟隨。

3）、我們將需要足夠的JavaScript知識，尤其是ES6+語法，例如解構、rest運算符和導入/導出。有關JavaScript的更多主題信息，建議閱讀我們的JavaScript系列教程。

4）、本教程將參考支持TypeScript並顯示內聯錯誤的文本編輯器的各個方面。這不是使用TypeScript所必需的，但確實可以更多地利用TypeScript功能。為了獲得這些好處，我們可以使用像VisualStudioCode這樣的文本編輯器，它完全支持開箱即用的TypeScript。我們也可以在TypeScriptPlayground中嘗試這些好處。

本教程中顯示的所有示例都是使用TypeScript4.2.2版創建的。

創建自定義類型

自定義類型語法

在TypeScript中，創建自定義類型的語法是使用type關鍵字，後跟類型名稱，然後使用類型屬性分配給{}塊。採取以下措施：

語法類似於對象文字，其中鍵是屬性的名稱，值是該屬性應具有的類型。這定義了一個Programmer類型，它必須是一個對象，其name鍵保存一個字元串值，並且knownFor鍵保存一個字元串數組。

如前面的示例所示，我們可以使用;作為每個屬性之間的分隔符。也可以使用逗號、,或完全省略分隔符，如下所示：

使用自定義類型與使用任何基本類型相同。添加一個雙冒號，然後添加我們的類型名稱：

ada常量現在將通過類型檢查器而不會引發錯誤。

如果我們在任何完全支持TypeScript的編輯器中編寫此示例，例如在TypeScriptPlayground中，編輯器將建議該對象期望的欄位及其類型，如下面的動畫所示：

如果我們使用TSDoc格式（一種流行的TypeScript注釋文檔樣式）向欄位添加註釋，則在代碼完成中也建議使用它們。使用以下代碼並在注釋中進行解釋：

注釋描述現在將與欄位建議一起出現：

TypeScript編譯器(tsc)將顯示錯誤2322：

如果我們省略了我們的類型所需的任何屬性，如下所示：

TypeScript編譯器將給出錯誤2741：

添加原始類型中未指定的新屬性也會導致錯誤：

在這種情況下，顯示的錯誤是2322：

嵌套自定義類型

我們還可以將自定義類型嵌套在一起。想像一下，我們有一個Company類型，它有一個符合Person類型的manager欄位。我們可以像這樣創建這些類型：

然後，我們可以像這樣創建一個Company類型的值：

我們可以省略manager常量中的類型，因為它與Person類型具有相同的形狀。當我們使用與manager屬性類型所期望的形狀相同的對象時，TypeScript不會引發錯誤，即使它沒有明確設置為Person類型。

以下不會引發錯誤：

我們甚至可以更進一步，直接在company對象字面量中設置manager：

所有這些場景都是有效的。

如果在支持TypeScript的編輯器中編寫這些示例，我們會發現編輯器將使用可用的類型信息來記錄自己。對於前面的示例，只要我們打開manager的{}對象文字，編輯器就會期望一個name類型的字元串屬性：

現在，我們已經完成了一些使用固定數量的屬性創建我們自己的自定義類型的示例，接下來，我們將嘗試向我們的類型添加可選屬性。

可選屬性

要將可選屬性添加到類型，請添加?屬性的修飾符。使用前面部分中的Programmer類型，通過添加以下突出顯示的字元將knownFor屬性轉換為可選屬性：

在這里我們要添加?屬性名稱後的修飾符。這使得TypeScript將此屬性視為可選的，並且在我們省略該屬性時不會引發錯誤：

這將毫無錯誤地通過。

既然，我們已經知道如何向類型添加可選屬性，那麼，現在該學習如何創建一個可以容納無限數量的欄位的類型了。

可索引類型

在這里，我們使用大括弧({})中的類型定義塊創建一個普通類型，然後以[key:typeOfKeys]:typeOfValues的格式添加一個特殊屬性，其中typeOfKeys是該對象的鍵應具有的類型，typeOfValues是這些鍵的值應該具有的類型。

然後，我們可以像任何其他類型一樣正常使用它：

使用可索引類型，我們可以分配無限數量的屬性，只要它們與索引簽名匹配，索引簽名是用於描述可索引類型的鍵和值的類型的名稱。在這種情況下，鍵具有字元串類型，值具有任何類型。

還可以將始終需要的特定屬性添加到可索引類型中，就像使用普通類型一樣。在以下突出顯示的代碼中，我們將狀態屬性添加到我們的數據類型：

這意味著數據類型對象必須有一個帶有布爾值的狀態鍵才能通過類型檢查器。

現在，我們可以創建具有不同數量元素的對象，我們可以繼續學習TypeScript中的數組，它可以具有自定義數量的元素或更多。

創建元素數量或更多的數組

使用TypeScript中可用的數組和元組基本類型，我們可以為應該具有最少元素的數組創建自定義類型。在本節中，我們將使用TypeScript剩餘運算符...來執行此操作。

想像一下，我們有一個負責合並多個字元串的函數。此函數將採用單個數組參數。這個數組必須至少有兩個元素，每個元素都應該是字元串。我們可以使用以下內容創建這樣的類型：

MergeStringsArray類型利用了這樣一個事實，即我們可以將rest運算符與數組類型一起使用，並將其結果用作元組的第三個元素。這意味著前兩個字元串是必需的，但之後的其他字元串元素不是必需的。

如果一個數組的字元串元素少於兩個，它將是無效的，如下所示：

TypeScript編譯器在檢查此數組時將給出錯誤2322：

到目前為止，我們已經從基本類型的組合中創建了自己的自定義類型。在下一節中，我們將通過將兩個或多個自定義類型組合在一起來創建一個新類型。

組合類型

在這里我們將介紹兩種組合類型的方法。這些將使用聯合運算符傳遞符合一種或另一種類型的任何數據，並使用交集運算符傳遞滿足兩種類型中所有條件的數據。

Unions

unions是使用|創建的(pipe)運算符，它表示可以具有聯合中任何類型的值。舉個例子：

在此代碼中，ProctCode可以是字元串或數字。以下代碼將通過類型檢查器：

unions類型可以從任何有效TypeScript類型的聯合中創建。

Intersections

我們可以使用相交類型來創建一個全新的類型，該類型具有相交在一起的所有類型的所有屬性。

例如，假設我們有一些公共欄位始終出現在API調用的響應中，然後是某些端點的特定欄位：

在這種情況下，所有響應都將具有status和isValid屬性，但只有用戶響應將具有附加的用戶欄位。要使用交集類型創建特定API用戶調用的結果響應，請結合使用StatusResponse和GetUserResponse類型：

ApiGetUserResponse類型將具有StatusResponse中可用的所有屬性以及GetUserResponse中可用的屬性。這意味著數據只有在滿足兩種類型的所有條件時才會通過類型檢查器。以下示例將起作用：

另一個示例是資料庫客戶端為包含連接的查詢返回的行類型。我們將能夠使用交集類型來指定此類查詢的結果：

稍後，如果我們使用fetchRowsFromDatabase()函數，如下所示：

生成的常量joinedRows必須有一個role屬性和一個name屬性，它們都保存字元串值，以便通過類型檢查器。

使用模板字元串類型

從TypeScript4.1開始，可以使用模板字元串類型創建類型。這將允許我們創建檢查特定字元串格式的類型，並為我們的TypeScript項目添加更多自定義。

要創建模板字元串類型，我們使用的語法與創建模板字元串文字時使用的語法幾乎相同。但是，我們將在字元串模板中使用其他類型而不是值。

想像一下，我們想創建一個傳遞所有以get開頭的字元串的類型。我們可以使用模板字元串類型來做到這一點：

myString將在此處通過類型檢查器，因為字元串以get開頭，然後是一個附加字元串。

如果我們將無效值傳遞給我們的類型，例如以下invalidStringValue：

TypeScript編譯器會給我們錯誤2322：

使用模板字元串創建類型可幫助我們根據項目的特定需求自定義類型。在下一節中，我們將嘗試類型斷言，它為其他無類型數據添加類型。

UsingTypeAssertions

如果我們想讓我們的代碼在這些場景中是類型安全的，我們可以使用類型斷言，這是一種將變數類型更改為另一種類型的方法。通過在變數後添加asNewType可以實現類型斷言。這會將變數的類型更改為as關鍵字之後指定的類型。

舉個例子：

value的類型為any，但是，使用as關鍵字，此代碼將value強制為string類型。

注意：要斷言TypeA的變數具有TypeB類型，TypeB必須是TypeA的子類型。幾乎所有的TypeScript類型，除了never，都是any的子類型，包括unknown。

實用程序類型

在前面的部分中，我們查看了從基本類型創建自定義類型的多種方法。但有時我們不想從頭開始創建一個全新的類型。有時最好使用現有類型的一些屬性，甚至創建一個與另一種類型具有相同形狀但所有屬性都設置為可選的新類型。

使用TypeScript提供的現有實用程序類型，所有這些都是可能的。本節將介紹其中一些實用程序類型；有關所有可用的完整列表，請查看TypeScript手冊的實用程序類型部分。

所有實用程序類型都是通用類型，我們可以將其視為接受其他類型作為參數的類型。可以通過使用語法向其傳遞類型參數來識別通用類型。

Record

Record實用程序類型可用於以比使用之前介紹的索引簽名更簡潔的方式創建可索引類型。

在我們的可索引類型示例中，我們具有以下類型：

我們可以使用Record實用程序類型而不是像這樣的可索引類型：

Record泛型的第一個類型參數是每個鍵的類型。在以下示例中，所有鍵都必須是字元串：

第二個類型參數是這些鍵的每個值的類型。以下將允許值是任何值：

Omit

Omit實用程序類型可用於基於另一種類型創建新類型，同時排除結果類型中不需要的一些屬性。

假設我們有以下類型來表示資料庫中用戶行的類型：

如果在我們的代碼中，我們要檢索除addressId之外的所有欄位，則可以使用Omit創建沒有該欄位的新類型：

Omit的第一個參數是新類型所基於的類型。第二個是我們要省略的欄位。

如果我們在代碼編輯器中將滑鼠懸停在UserRowWithoutAddressId上，我們會發現它具有UserRow類型的所有屬性，但我們省略了這些屬性。

我們可以使用字元串聯合將多個欄位傳遞給第二個類型參數。假設我們還想省略id欄位，我們可以這樣做：

Pick

Pick實用程序類型與Omit類型完全相反。我們無需說出要省略的欄位，而是指定要從其他類型使用的欄位。

使用我們之前使用的相同UserRow：

假設我們只需要從資料庫行中選擇電子郵件鍵。我們可以像這樣使用Pick創建這樣的類型：

Pick這里的第一個參數指定了新類型所基於的類型。第二個是我們想要包含的鍵。

這將等同於以下內容：

我們還可以使用字元串聯合來選擇多個欄位：

Partial

使用相同的UserRow示例，假設我們想創建一個新類型，該類型與我們的資料庫客戶端可以用來將新數據插入用戶表中的對象相匹配，但有一個小細節：我們的資料庫具有所有欄位的默認值，所以，我們是不需要通過其中任何一個。

為此，我們可以使用Partial實用程序類型來選擇性地包括基本類型的所有欄位。

我們現有的類型UserRow具有所需的所有屬性：

要創建所有屬性都是可選的新類型，我們可以使用Partial實用程序類型，如下所示：

這與擁有這樣的UserRowInsert完全相同：

實用程序類型是一個很好的資源，因為它們提供了一種比從TypeScript中的基本類型創建類型更快的方法來構建類型。

總結

創建我們自己的自定義類型來表示我們自己的代碼中使用的數據結構，可以為我們的項目提供靈活且有用的TypeScript解決方案。除了從整體上提高我們自己代碼的類型安全性之外，將我們自己的業務對象類型化為代碼中的數據結構將增加代碼庫的整體文檔，並在與團隊成員一起工作時改善我們自己的開發人員體驗相同的代碼庫。

Typescript依賴於一些軟體包，因此在腳本運行後運行軟體包管理器npminstall

您還可以在此處了解有關Svelte的Typescript支持的更多信息，它還描述了如何為現有項目手動進行設置

添加依賴

在App.svelte中引入

router.js

具體跳轉可參照如下寫法：

添加tailwindcss包並生成tailwind.config.js配置文件

Typescript設置已經附帶了svelte-preprocess，所以大多數設置已經為我們完成了，

但是我們仍然需要告訴它使用postcss和其他一些軟體包。

創建一個postcss.config.js文件，注意這里的名稱很重要，因為postcss-load-config將在尋找該文件。

目前為止，svelte稍微成熟點的ui應該就是這個了

ts的項目一般不會直接運行，需要編譯成js文件去運行，但是編譯後的js文件與我們直接輸出的ts文件有出入，這對於我們調試造成很大的麻煩。

官方參考文檔：

注意事項：

官方參考文檔：

注意事項：