index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script src="./page.ts"></script> </body> </html>
page.ts
$(function () { $('body').html('<div>121212</div>'); new $.fn.init() })
執行 npm start("start": "parcel ./src/index.html")。這個時候瀏覽器彈出了111，但是編輯器還是會報錯，提示 Cannot find name '$'. Do you need to install type definitions for jQuery? Try `npm i @types/jquery`。讓我們安裝 @types/jquery。因為在 ts 里面直接引用了 js，所以不能正確的識別，這個時候需要去寫個類型注解文件，幫助去打通 ts 和 js 的鴻溝
之前我們是安裝別人寫好的 .d.ts 文件。這次我們自己去寫
page.d.ts
// 聲明一個全局變量，叫做 $，接收一個函數，返回值是 void // declare var $: (param: () => void) => void; interface JqueryInstance { html: (html: string) => JqueryInstance } // 函數重載 declare function $(readyFunc: () => void): void;// 定義全局函數 $可以接收一個函數，函數重載 declare function $(selector: string): JqueryInstance;// 定義全局函數 $可以接收一個字符串，函數重載 // 如何對對象進行定義，以及對類進行類型定義，以及命名空間的嵌套 declare namespace $ { // $.fn.init namespace fn{ class init{} } } // 使用 interface 的語法，實現函數重載 // interface JQuery{ // (readyFunc: () => void): void; // (selector: string): JqueryInstance // }// 直接這樣寫 ts 文件的 $ 還是會報錯的，還需要定義 // declare var $: JQuery;