歡迎來到我專題文章【typescript】，更多干貨內容持續分享中，敬請關注！

本章目標

• 基于webpack4.x從0開始搭建ts的開發環境
• ts中的裝飾器的基本使用

基于webpack4.x從0開始搭建ts的開發環境

webpack4.x已經問世好久了，0配置是一大亮點，but，在配置ts的開發環境時，才明白這就只是一個噱頭而已。下我們一步步的來搭建我們的項目吧

一、創建工程目錄和基本目錄

mkdir ts

cd ts

初始化項目目錄后，我們需要初始化我們的項目配置文件package.json文件。我們在ts目錄下運行

npm init -y

后會生成一個默認的package.json配置文件。

接下來，我們創建ts的配置文件，tsconfig.json，我們運行

tsc --init

即可，在package.json相同目錄會生成一個tsconfig.json文件，這里面默認是對ts的基本配置。

兩個配置文件完成了以后，我們創建一個src目錄

mkdir src

cd src

這里創建了ts的工程目錄，以及webpack4.x默認的目錄src,在src中，我們創建一個index.ts文件，注意這里是.ts文件哦，它將將是我們的程序的主入口文件

二、安裝依賴和基本配置

我們要編譯ts，我們需要在當前目錄下安裝typescript 、ts-loader和webpack

cnpm install typescript ts-loader webpack -D

安裝完成后，我們還不能直接運行webpack命令，因為webpack默認會去找src下的index.js文件為入口文件，而我們創建的是ts文件，并且我們需要手動配置我們的ts-loader

創建webpack.config.js文件。

手動指定我們的入口文件

entry : './src/index.ts'

同時，我們需要將.ts結尾的文件通過ts-loader來處理它。我們需要在module下配置ts的編譯配置，如下：

很簡單的配置，不再過多贅述了

到這里，我們的開發環境就配置好了，接下來我們來打包看下效果

這是index.ts中的內容

編譯成功，然后通過node去執行了打包后的文件，環境配置完成！

ts中的裝飾器的基本使用

環境配置完后以后，我們再來看看ts中的裝飾器。先來看下什么是裝飾器？

顧名思義，裝飾器就是用來修飾其它的事物的。

在ts中，裝飾器就是函數,它可以用來裝飾類。類的屬性，方法以及方法的參數等。這樣說好像有點抽象，沒關系，我先來舉個栗子

我們先來申明一個裝飾器。

這里要注意的是ts中默認不支持裝飾器的語法解析，我們需要手動更新其配置文件tsconfigs.json

我們需要將experimentalDecorators設置為true,默認被注釋掉了，只需要將注釋去掉即可。

申明了一個say的裝飾器，然后我將它修飾在一個類上面，注意，我們通過 @+裝飾器名 直接加在類的前面即可。最后在執行的時候，我們打印了裝飾器中的第一個參數target。結果是[Function Person]

說明了，當前的裝飾器中的第一個參數target 就是我們的要修飾的類對象。

一、裝飾器傳參和應用

要想讓裝飾器能夠傳參，我們在定義裝飾器的時候，內部必須是返回一個函數。像這樣

調用：

注意，這里調用的時候我們傳入了hello ts 參數，我們在裝飾器函數內部可以接收到這個函數。傳參的目的達到了。

我們在Person類中并沒有定義name屬性，我們接下來打印一下最終的結果

從執行結果可以看出來，最終打印出來了 hello ts , 它是我們通過裝飾器傳入的，在裝飾器內部，我們給類的原型對象上添加了一個name屬性，并且賦值為我們傳入的參數 。

也就是說：我們可以不改變類的內部代碼邏輯，通過裝飾器可能實現動態修改類的內部邏輯

同樣的道理，我們也可以在裝飾器中去重寫類的方法成員

二、屬性裝飾器

和類的裝飾器一樣，通過函數的方式去申明，只不過我們需要將裝飾器加在對應的屬性上面

我們接下來打印一下這幾個參數

• params是我們動態傳入的裝飾器的參數
• target是我們修飾的屬性對象
• attr是我們要修飾的屬性名

最后我們可以通過

target[attr] = params;

來改變類的屬性值

可以看到我們已經通過裝飾器修改了類的屬性。

總結：

如何從0-1配置webpack編譯ts的項目

ts中的使用裝飾器需要修改默認配置

類裝飾器和屬性裝飾器的基本用法和傳參

---

這里是【暢哥聊技術】的typescript專題系列。更多內容持續更新中。

總結

以上是生活随笔為你收集整理的如何传入比较器_typescript专题(五) 装饰器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。