說明大背景環境,我用的是window10系統。
1.安裝node.js 。
去官網下載安裝包。
雖然我去的是官網,但是不知為何下載了個不知名的東西,后來又找了個鏈接才下載正確了。
實際上就是一個.msi的文件。我用的版本:node-v18.19.0-x64。避免你掉坑我直接放個鏈接吧:
https://download.csdn.net/download/alayeshi/89408377
然后直接進行安裝,安裝完成后去CMD里敲個:node -v 如果能看到版本號說明安裝成功了,
再敲個:npm -v 依然能看到版本號說明徹底成功了。如下圖:
2.下載VS code編輯器,
之后在編輯器里安裝插件 prettier- code fomatter
3.安裝typescript
在VScode編輯器里,終端--新建終端
然后看到下方終端頁面,輸入:npm install typescript -g
安裝成功后,測試進行編譯。
要測試首先得會使用VSCODE編輯器。下面就講如何使用編輯器新建TS文件。
4.如何使用VS code編輯器
首先新建一個文件夾在硬盤里,作為一個項目,比如我在桌面新建一個文件夾,名叫:vscode;
在VScode編輯器里選擇 文件--打開文件夾 ,找到剛建的文件夾名
5.新建的TS腳本
命名為:helloworld
在打開的編輯器中選擇新建文件的圖標按鈕進行新建文件,可以看得出新建的文件是沒有名字的也沒有類型,這時候點擊右側的選擇語言,會彈出一個面板,面板里有很多語言可供選擇,選擇TS的語言即可。
代碼內容如下:
interface Poit{
x:number;
y:number;}function tsDemo(data:Poit){
console.log('123');return data.x+data.y;}tsDemo({x:1,y:2});
6.運行TS代碼:
在下面終端界面敲命令:node helloworld.ts
然后發現報錯了,因為TS不能直接在瀏覽器和node環境下運行。
想要正常運行該代碼,需要再次敲命令:tsc helloworld.ts
然后發現生成了一個JS的文件。
這下就可以敲命令:node helloworld.js? 進行運行了。畢竟是JS了肯定是可以運行了,果然是可以輸出log的,代碼中的log內容是123,沒問題.
7.簡便的運行方式,安裝ts-node
不用每次運行js后再運行ts,安裝ts-node,方法如下:npm i -g ts-node
安裝完成后。
修改log內容后再次運行,
這次的命令是ts的了,不再使用js,
命令:ts-node helloworld.ts
可以看出log發生了變化
至此TS的環境搭建完成。