typescript + amd tips

focusj 發布于2019-08-20 18:25 / 1421人閱讀

摘要：配合規范的更輕量純前端打開方式曾經數年以前，就嘗試無奈至今一直有幾個小問題沒有處理必須要這樣的方式寫代碼，才能有提示由于，必須要打包項目，才能把以方式剔除必須要下安裝各種庫的才能到提示文件經常會想，既然很麻煩，怎么使用無所謂，加個工具鏈也能

typescript 配合 amd 規范的更輕量、"純" 前端打開方式

曾經數年以前，就嘗試 typescript 無奈至今一直有幾個小問題沒有處理:

0 必須要?import * as $ from "jquery" 這樣的方式寫代碼，才能有提示
1 由于0，必須要 webpack 打包項目，才能把 jquery 以 external 方式剔除
2 必須要 node_modules 下安裝各種庫的 d.ts 才能?resolve?到提示文件

經常會想，既然很麻煩，怎么使用無所謂，加個 webpack 工具鏈也能忍，html 提前引入腳本方式要放棄，一點點妥協之后，項目才能跑起來，對 npm 和 webpack 的重度依賴終究是個梗！

于是突然有一天發現了如下解法：

import * as $ from "jquery"

使用代碼不變，才能有提示

require.config({
    baseUrl: "./",
    paths: {
        "jquery": "../lib/jquery.min",
    },
    shim: {
        "jquery": {
            exports: "$"
        },
    }
})

這里同時加入 paths 和 shim，從而支持了 script 引入和 require 加載

html 正常使用 script 全局引入，我用了百度的 esl 加載器 requirejs 同理

"paths": {
  "jquery": ["typing/jquery/index.d.ts"]
},

tsconfig 配置后，可以把 @types/jquery 的申明文件放在自定義項目目錄./typing/ 里了

且你可以自定義靜態化的處理 typing 下的 d.ts 文件!
且你可以自定義靜態化的處理 typing 下的 d.ts 文件!
且你可以自定義靜態化的處理 typing 下的 d.ts 文件!

重事3遍，d.ts 和模塊名的正確對應后，vscode 提示完美!

至此，任意一個前端項目僅需要依賴一個 tsc 編譯 typescript 就可以輕量的完美運行了，

終于可以優雅的寫 ts 了，爽！

由于依賴太少，大家可以根據需要定制自己的方案！

GPU云服務器云服務器 TypeScript typescript javascript tip tips

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/84478.html

RDD的前端背包

摘要：中文最小字體問題添加屬性以取消瀏覽器的自動調整會使原本應該調整的地方失效原本就是專為了移動端設置的屬性，桌面端不適應已修復建議通過縮小來獲得小字體。暫時先堆在一起，等某條目里面的內容超過十條了，就單列出去。更新歷史： 17.7.24 =ADD= typescript —> interface =ADD= alof awsome net 17.7.23 =ADD=...

Pandaaa 2019-08-29 11:33 評論0 收藏0
RDD的前端背包

摘要：中文最小字體問題添加屬性以取消瀏覽器的自動調整會使原本應該調整的地方失效原本就是專為了移動端設置的屬性，桌面端不適應已修復建議通過縮小來獲得小字體。暫時先堆在一起，等某條目里面的內容超過十條了，就單列出去。更新歷史： 17.7.24 =ADD= typescript —> interface =ADD= alof awsome net 17.7.23 =ADD=...

csRyan 2019-08-20 12:15 評論0 收藏0
RDD的前端背包

摘要：中文最小字體問題添加屬性以取消瀏覽器的自動調整會使原本應該調整的地方失效原本就是專為了移動端設置的屬性，桌面端不適應已修復建議通過縮小來獲得小字體。暫時先堆在一起，等某條目里面的內容超過十條了，就單列出去。更新歷史： 17.7.24 =ADD= typescript —> interface =ADD= alof awsome net 17.7.23 =ADD=...

jifei 2019-08-01 15:56 評論0 收藏0
從 JavaScript 到 TypeScript - 模塊化和構建

摘要：不過，相對于靜態類型檢查帶來的好處，這些代價是值得的。當然少不了的模塊化標準，雖然到目前為止和大部分瀏覽器都還不支持它。本身支持兩種模塊化方式，一種是對的模塊的微小擴展，另一種是在發布之前本身模仿的命名空間。有一種情況例外。 TypeScript 帶來的最大好處就是靜態類型檢查，所以在從 JavaScript 轉向 TypeScript 之前，一定要認識到添加類型定義會帶來額外的工作量...

Jonathan Shieber 2019-08-20 15:38 評論0 收藏0
如何使用TypeScript和Webpack編寫網頁應用

摘要：所以，如果你也考慮開始使用，不妨也看一下。使用模塊中，模塊的使用方法與一致。安裝好定義文件之后，如果使用等對支持較好的編輯器，則會提供更加強大的代碼提示功能。如果使用配合的，則可以方便地構建瀏覽器可以運行的代碼。 TypeScript所做的，是在JavaScript的基礎上加入了類型，TypeScript編譯器將TypeScript編譯成JavaScript，可以在瀏覽器或者nodej...

Codeing_ls 2019-08-19 18:19 評論0 收藏0