ts在項目中的使用-三斜線引入 與 import差別

本次分享内容隻涉及項目初始階段如何引入ts及依賴插件的ts。

ts為類型系統，js沒有類型，為了在開發階段減少錯誤而引入的系統。

ts有單獨的配置檔案，一般放在項目目錄下

<code>tsconfig.json</code>

ts與js運作時兩套系統，雖然有時候代碼是寫在一起的，但他們運作時也是各自運作各自的代碼。

比如 <code>import {clone} from 'lodash'</code>,js系統引入的是clone函數，ts系統引入的是clone函數的類型。

子產品檔案： 含有 export 或者 import 的檔案，檔案名通常為： <code>xx.ts</code>

聲明檔案： 不含實際運作代碼 檔案名通常為 <code>xx.d.ts</code>

聲明檔案中

聲明檔案也可以是子產品檔案，但其不含實際運作代碼，是以導出的都是類型聲明

<code>npm install typescript -D</code>

typescript安裝後，其自帶浏覽器上使用的所有對象的定義檔案，比如dom，标簽等

<code>const div:HTMLDivElement = document.createElement('div')</code>

引入子產品檔案通常使用 import

使用三斜線 reference 引入，有常用兩種方式 path和types

他們差別就是 types 一般引入外部依賴的聲明，path 一般引入自己寫的聲明

比如外部聲明檔案位置為<code>node_modules/@types/b/index.d.ts</code>，内容為<code>type B={age:number}</code>，使用 path 和 types 引入方式如下：

<code>/// &lt;reference path="node_modules/@types/b/index.d.ts" /&gt;</code>

<code>/// &lt;reference types="b" /&gt;</code>

非子產品的聲明檔案引入後為全局類型，可以直接使用

<code>const b:B={age:100}</code>

這兒可以看出，與js檔案引入相比，ts多了一項尋址政策，它中會自動尋找node_modules/@types下的檔案。

“聲明合并”是指編譯器将針對同一個名字的多個獨立聲明合并為單一聲明。 合并後的聲明同時擁有原先多個聲明的特性

常見的使用例子為擴充屬性

點選檢視代碼

所有依賴插件，在官網中有詳細說明如何使用類型。

vite注入了例如<code>import.meta.env.BASE_URL</code>,在import.meta中不存env屬性，是以需要對<code>ImportMeta</code>類型進行補充,

其檔案位置在<code>node_modules/vite/client.d.ts</code>。打開檔案可以看到沒有使用export 或者import。是以其為非子產品聲明，引入需要用到：

<code>/// &lt;reference types="vite/client" /&gt;</code>

vue類型檔案在<code>node_modules/vue/dist/vue.d.ts</code>,打開後可以看到有export 和import關鍵字，所有必須使用import引入,

引入一次後可以在其它檔案子產品檔案使用類型。

<code>import 'vue'</code>

如果有注冊全局元件，就需要對全局元件進行類型擴充。

如下擴充一個Layout元件

當引入一個vue檔案時，js編譯器可以通過,但是ts卻發現找不到。這是因為ts為.ts、.js、.tsx等檔案已定義類型，vue檔案需要手動定義類型

在某些時候，路徑使用别名會很友善，比如将<code>@</code>指向<code>src</code>

使用<code>import data from '@/data'</code>通路src/data.ts，由于ts與js是兩套系統，雖然js能夠正常運作，但ts并不知曉'@/data'路徑指向哪兒，是以需要在tsconfig.json中也配置路徑别名，需要配置compilerOptions.baseUrl與compilerOptions.paths

此處位址轉換 <code>@/data</code> =&gt; <code>${baseUrl}src/data</code> =&gt; <code>./src/data</code>尋找到了正确位址。

使用vscode + volar

volar能夠自動按照tsconfig.json配置調用typescript做類型分析，不必将ts運作內建到項目中。也就是說類型系統由volar運作，js由項目本身運作。

将json轉換成ts

在全局定義中 :<code>declare let a:3</code>

在其他檔案中使用: <code>let a = ''</code> 不報錯原因：declare let a 解釋了一個全局的變量a 他的值是3，在子產品檔案中可以再次定義，就如fn内部能定義一個外部作用域的變量。當直接使用 <code>a = ''</code> 時出現報錯