0. 寫在最前：
本文章內(nèi)
- 所有WS代表WebStorm；
- 所有TS代表TypeScript。
1. 前言
首先呢，我也算是TS的初學(xué)者。相信作為過來人都清楚，新手剛剛上手TS的時(shí)候，配置環(huán)境是多么痛苦的一件事情。并且，我就很好奇，為什么網(wǎng)上教程、參考文檔、甚至專業(yè)書籍，鋪天蓋地都是使用的是VScode編寫的。（難道它，，，免費(fèi)？?。?/p>
我為什么寫這篇文章呢？主要是網(wǎng)上對于這方面的資料真的好少??！基本上都是VScode的。其次，也是我在使用過程中因?yàn)榄h(huán)境配置有問題導(dǎo)致WS在輸出的時(shí)候遇到了問題。比如，后面的GitHub問題單——There is redundant content output in the terminal console when running TS files。
所以，正好寫一篇文章總結(jié)一下，期望能夠幫助到大家。
2. 開篇第一句
先說結(jié)論：千萬別裝WS插件庫中的Run Configuration for TypeScript。這是萬惡之源?。。?/p>
* 注：點(diǎn)擊上方插件的名稱，可跳轉(zhuǎn)到插件介紹頁
?文章來源：http://www.zghlxwxcb.cn/news/detail-706709.html
?3. 此插件造成的問題——輸出時(shí)異常
下面我舉個(gè)例子：
console.info('Hello ts')
console.info('123')
console.info('321')
console.info('111')
?
大家看到了，第二行的輸出信息前多了這么一串信息。經(jīng)過證實(shí)，這，就是插件造成的。
?4. 如何配置
關(guān)于如何配置的問題，我建議大家還是詳細(xì)閱讀官方文檔——ws_ts_run_debug_server_side_ts_node。真的。雖說官方文檔全都是英文，但是慢慢讀能讀懂。然后跟著配置就好了。我這里根據(jù)我的實(shí)際情況簡述一下：
大體上來看3大步：
- 安裝ts-node
- 為ts-node創(chuàng)建一個(gè)自定義Node.js運(yùn)行/調(diào)試配置
- 運(yùn)行一個(gè)TypeScript文件
其中運(yùn)行沒啥好說的，就點(diǎn)擊一下開始按鈕就行了。所以這一點(diǎn)跳過。我們著重說說第一第二點(diǎn)。（其實(shí)官網(wǎng)教程里都有）
4.1 官網(wǎng)教程
4.1.1 安裝ts-node
4.2?為ts-node創(chuàng)建一個(gè)自定義Node.js運(yùn)行/調(diào)試配置
?這樣，就解決啦！輸出都正常了呢！
4.2 我的辦法
因?yàn)槲移谕屗械捻?xiàng)目都能夠共享使用我npm安裝的包，所以我通過配置全局node環(huán)境來實(shí)現(xiàn)。
4.2.1 安裝nodejs
從官網(wǎng)上下載生產(chǎn)力需求的nodejs版本。這里不是重點(diǎn)。所以略去。
4.2.2?配置WebStorm配置項(xiàng)
4.2.3 使用npm init初始化項(xiàng)目
使用npm init的目的就是創(chuàng)建一個(gè)package.json文件。
4.2.4 執(zhí)行效果
?
5 結(jié)語
但這樣配置只能臨時(shí)使用，新建一個(gè)項(xiàng)目以后，配置項(xiàng)就丟失了。我還沒有研究出如何全局都可以用。如果我找到方法了，我會(huì)更新帖子。同樣歡迎各位幫我指正錯(cuò)誤。文章來源地址http://www.zghlxwxcb.cn/news/detail-706709.html
到了這里，關(guān)于【解決方案】使用WebStorm運(yùn)行TypeScript文件（基于ts-node）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
