js向ts的轉變


---恢復內容開始---

TypeScript簡單使用

1.安裝方法

暫時up只用了vsCode和WebStorm實現,推薦這兩種編譯器===破解方式自行解決

安裝好對應的編譯器后需要安裝node;安裝方法比較簡單

安裝好后再dos界面打出node -v,彈出 v10.16.0(up下的版本號),及表示安裝完成


以下up直接用WebStorm實現

安裝好后再對應的編輯器下打開控制台輸入npm install typescript -g安裝typescript包,安裝好后輸入tsc --version如果現實對應的版本號即表示安裝完成

安裝過程也可以在dos界面實現=>推薦使用

如果在mac系統下,輸入sudo npm install typescript -g進行安裝

2.編寫第一個Hello World 文件

初始化項目:進入你的編程文件夾后,可以使用npm init -y來初始化項目,生成package.json文件。

創建tsconfig.json文件,在終端中輸入tsc --init:它是一個TypeScript項目的配置文件,可以通過讀取它來設置TypeScript編譯器的編譯參數。

安裝@types/node,使用npm install @types/node --dev-save進行安裝。這個主要是解決模塊的聲明文件問題。

編寫HelloWorld.ts文件,然后進行保存,代碼如下。

 var a:string = "HelloWorld"
 console.log(a)

在Vscode的任務菜單下,打開運行生成任務,然后選擇tsc:構建-tsconfig.json,這時候就會生成一個helloWorld.js文件

在終端中輸入node helloWorld.js就可以看到結果了。

 


WebStorm實現=>up使用的是2019.1.3版本

 

第一步,點擊<custom>

 

 

 

 

 

 

 

第二步,輸入配置信息即可

 

在對應的站點下創建一個新的文件夾,再創建一個typescript子文件夾,用於開發ts用,同事創建一個package.json文件

在ts文件夾下創建一個ts文件,由於webstorm會自動再ts下生成一個.js&&.js.map文件,打開后可以看到js里面的是原生js代碼

此時可以用html使用產生的js文件,也可以在node環境下使用,打開Terminal,輸入node fileName.js就可以在控制台看到自己寫的代碼運行后的結果

也可以在對應的ts文件夾下右擊打開npm環境,在對應的ts文件中編寫完代碼后保存后如果沒有報錯,此時run不會啟動,如果代碼出錯那么在保存后(Ctrl+s)run會彈出警告框


總結:**雖然簡單,但是小伙伴們一定要動手操作,如果不操作,或者開發環境配置不好,


up覺得webstorm開發ts相較於vscode較方便

 

 

---恢復內容結束---


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM