成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

用typescript寫(xiě)靜態(tài)頁(yè)面

canger / 899人閱讀

摘要：在中調(diào)用庫(kù)以調(diào)用一個(gè)庫(kù)為例識(shí)別庫(kù)需要一個(gè)接口文件，的接口文件已經(jīng)做好了，只需在終端眾即可安裝其余步驟與以往寫(xiě)時(shí)一樣，在中引入，在中引入編譯后的文件以上就是在靜態(tài)頁(yè)面中的應(yīng)用。

typescript有許多的優(yōu)點(diǎn)，對(duì)于已經(jīng)上手angular開(kāi)發(fā)的朋友想必都會(huì)很熟悉。那么，如果想在其其他非angular框架環(huán)境下使用typescript需要哪些步驟呢？

以下內(nèi)容，我們將以一個(gè)靜態(tài)頁(yè)面為例，簡(jiǎn)述搭建typescript編譯環(huán)境步驟，并且講解如何在typescript中調(diào)用js庫(kù)

編譯環(huán)境

首先建立項(xiàng)目目錄結(jié)構(gòu)

全局安裝typescript npm i typescript -g。安裝完成后在運(yùn)行 tsc -v 可以查看安裝的typescript版本，即安裝成功

在根目錄手動(dòng)建立tsconfig.json文件，或者終端中輸入tsv --init自動(dòng)生成tsconfig文件，該文件用來(lái)配置typescript編譯設(shè)置。修改后的tsconfig內(nèi)容如下：

{
    "compilerOptions": {
        "target": "es5",
        "noImplicitAny": false,
        "module": "commonjs",
        "removeComments": true,
        "sourceMap": false,
        "outDir": "build"
    },
    "exclude": [
        "node_modules"
    ]
}
我們將編譯后的目標(biāo)格式設(shè)定為es5,采用commonjs文件模塊，將編譯后的目標(biāo)文件輸出到build文件夾

在終端中輸入tsc -w即可開(kāi)始監(jiān)聽(tīng)ts文件的變化，文件保存后將會(huì)同步編譯輸出到目標(biāo)文件夾中。

在typescript中調(diào)用js庫(kù) 
以調(diào)用一個(gè)canvas庫(kù)fabric為例

typescript識(shí)別js庫(kù)需要一個(gè)接口文件（.d.ts），fabricjs的接口文件已經(jīng)做好了，只需在終端眾npm i @types/fabric --save即可安裝

其余步驟與以往寫(xiě)js時(shí)一樣，在html中引入fabricjs，在html中引入編譯后的js文件 

以上就是typescript在靜態(tài)頁(yè)面中的應(yīng)用。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94036.html

相關(guān)文章

  • 從 JavaScript 到 TypeScript - 模塊化和構(gòu)建

    摘要：不過(guò)，相對(duì)于靜態(tài)類型檢查帶來(lái)的好處，這些代價(jià)是值得的。當(dāng)然少不了的模塊化標(biāo)準(zhǔn)，雖然到目前為止和大部分瀏覽器都還不支持它。本身支持兩種模塊化方式，一種是對(duì)的模塊的微小擴(kuò)展，另一種是在發(fā)布之前本身模仿的命名空間。有一種情況例外。 TypeScript 帶來(lái)的最大好處就是靜態(tài)類型檢查，所以在從 JavaScript 轉(zhuǎn)向 TypeScript 之前，一定要認(rèn)識(shí)到添加類型定義會(huì)帶來(lái)額外的工作量...

    Jonathan Shieber 評(píng)論0 收藏0

  • 前端常用技術(shù)概述--Less、typescript與webpack

    摘要：前言講起前端，我們就不能不講與，在這兩種技術(shù)廣泛應(yīng)用的今天，他們的擴(kuò)展也是層出不窮，的擴(kuò)展有等，的超集有等。如下注意你的樣式文件一定要在引入前先引入。截止目前，已經(jīng)發(fā)布了最新的版本。 前言：講起前端，我們就不能不講CSS與Javascript，在這兩種技術(shù)廣泛應(yīng)用的今天，他們的擴(kuò)展也是層出不窮，css的擴(kuò)展有Less、Sass、Stylus等，js的超集有Typescript等。今天我們就簡(jiǎn)...

    番茄西紅柿 評(píng)論0 收藏0

  • Vue + TypeScript + Element 項(xiàng)目實(shí)踐(簡(jiǎn)潔時(shí)尚博客網(wǎng)站)及踩坑記

    摘要：前言本文講解如何在項(xiàng)目中使用來(lái)搭建并開(kāi)發(fā)項(xiàng)目，并在此過(guò)程中踩過(guò)的坑。具有類型系統(tǒng)，且是的超集，在年勢(shì)頭迅猛，可謂遍地開(kāi)花。年將會(huì)更加普及，能夠熟練掌握，并使用開(kāi)發(fā)過(guò)項(xiàng)目，將更加成為前端開(kāi)發(fā)者的優(yōu)勢(shì)。 showImg(https://segmentfault.com/img/remote/1460000018720573); 前言 本文講解如何在 Vue 項(xiàng)目中使用 TypeScript...

    luckyyulin 評(píng)論0 收藏0

  • Flow - JS靜態(tài)類型檢查工具

    摘要：介紹是個(gè)的靜態(tài)類型檢查工具，由出品的開(kāi)源碼項(xiàng)目，問(wèn)世只有一年多，是個(gè)相當(dāng)年輕的項(xiàng)目?，F(xiàn)在，提供了另一個(gè)新的選項(xiàng)，它是一種強(qiáng)靜態(tài)類型的輔助檢查工具。 showImg(https://segmentfault.com/img/bVH6mL?w=1200&h=675); 本章的目標(biāo)是提供一些Flow工具的介紹與使用建議。Flow本質(zhì)上也只是個(gè)檢查工具，它并不會(huì)自動(dòng)修正代碼中的錯(cuò)誤，也不會(huì)強(qiáng)制...

    seanHai 評(píng)論0 收藏0

  • 「每日一瞥

    摘要：即使中沒(méi)有錯(cuò)誤，仍然會(huì)執(zhí)行，這一點(diǎn)一般都是知道的。我們認(rèn)為這是正確的前進(jìn)道路，兼具戰(zhàn)略性和務(wù)實(shí)性降低使用門檻開(kāi)發(fā)人員遷移到的障礙之一是從到的并不輕松的遷移。下一步將通過(guò)一系列功能和插件為的平滑過(guò)渡提供支持，并以此回饋社區(qū)。 showImg(https://segmentfault.com/img/remote/1460000017516912?w=1200&h=630); useSt...

    XboxYan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<