VS2022怎么搭建基于TypeScript的React應(yīng)用?
我要評(píng)論TypeScript是JavaScript的超集，為JS帶來(lái)了靜態(tài)類型支持，這可以幫助我們寫出更清晰可靠的接口，帶來(lái)更好的IDE提示。
那么如何在Visual Studio 2022中創(chuàng)建基于TypeScript的React應(yīng)用呢？下面我們就來(lái)看看詳細(xì)的教程。
微軟Microsoft Visual Studio 2026 v18.5.11716 企業(yè)版/專業(yè)版/社區(qū)版 64位 正式版(附key)
- 類型：編程工具
- 大?。?/span>20.3MB
- 語(yǔ)言：多國(guó)語(yǔ)言
- 時(shí)間：2026-04-24
打開Windows 10系統(tǒng)下已安裝的Visual Studio 2022開發(fā)工具，如下圖所示：
打開Visual Studio 2022啟動(dòng)頁(yè)面后，選擇“創(chuàng)建新項(xiàng)目”，如下圖所示：
在創(chuàng)建新項(xiàng)目頁(yè)面中，瀏覽選擇 “Standalone TypeScript React Project”，然后點(diǎn)擊“下一步”，如下圖所示：
填寫項(xiàng)目名稱，瀏覽項(xiàng)目保存位置，記得不要勾選“將解決方案和項(xiàng)目放在同一目錄中”，然后點(diǎn)擊“創(chuàng)建”，如下圖所示：
此時(shí)會(huì)打開一個(gè)命令提示窗口，通過自動(dòng)執(zhí)行命令
npm install react react-dom react-scripts cra-template-typescript
來(lái)創(chuàng)建項(xiàng)目模板，并生成項(xiàng)目初始文件，如下圖所示：
此時(shí)項(xiàng)目的結(jié)構(gòu)如下圖所示：
依次點(diǎn)擊菜單欄中的“調(diào)試”->“開始執(zhí)行（不調(diào)試）”，如下圖所示：
此時(shí)會(huì)自動(dòng)打開一個(gè)命令提示符，運(yùn)行npm start，如下圖所示：
成功啟動(dòng)后，通過訪問本地localhost下的3000端口，可以看到初始頁(yè)面，如下圖所示：
以上就是VS2022中創(chuàng)建基于TypeScript的React應(yīng)用的圖文教程，希望大家喜歡，請(qǐng)繼續(xù)關(guān)注腳本之家。
相關(guān)推薦：
VS2015怎么解決scanf函數(shù)的C4996錯(cuò)誤?
VS2017怎么創(chuàng)建創(chuàng)建空的ASP.NET Core Web項(xiàng)目?
相關(guān)文章
vs2022怎么修改字符集? VisualStudio2022修改默認(rèn)字符集的教程
vs2022怎么修改字符集？vs2022中默認(rèn)的字符集是可以修改的，該怎么更換呢？下面我們就來(lái)看看VisualStudio2022修改默認(rèn)字符集的教程2022-04-29
VS2019程序包管理設(shè)置在哪? VisualStudio打開程序包管理設(shè)置的技巧
VS程序包管理設(shè)置在哪？VisualStudio想要設(shè)置程序包管理，這個(gè)功能在哪里設(shè)置呢？下面我們就來(lái)看看VisualStudio打開程序包管理設(shè)置的技巧2022-04-29
vs怎么查找標(biāo)簽頁(yè)? visual studio快速打開標(biāo)簽頁(yè)鏈接的技巧
vs怎么查找標(biāo)簽頁(yè)？visual studio中想要查找標(biāo)簽頁(yè)，該怎么操作呢？下面我們就來(lái)看看visual studio快速打開標(biāo)簽頁(yè)鏈接的技巧2022-04-28
vs怎么修改當(dāng)前的SDK版本? Visual Studio指定SDK版本的技巧
vs怎么修改當(dāng)前的SDK版本？運(yùn)行程序的時(shí)候， 我們可以指定版本進(jìn)行編譯的，該怎么修改sdk版本呢？下面我們就來(lái)看看Visual Studio指定SDK版本的技巧2022-04-08
vs的自動(dòng)窗口在哪里? Visual Studio設(shè)置窗口自動(dòng)隱藏的技巧
vs的自動(dòng)窗口在哪里？Visual Studio中的窗口是可以自動(dòng)隱藏的，但是需要自己設(shè)置，下面我們就來(lái)看看Visual Studio設(shè)置窗口自動(dòng)隱藏的技巧2022-03-21
vs怎么編寫java Script項(xiàng)目? VisualStudio創(chuàng)建java Script文件的技巧
vs怎么編寫java Script項(xiàng)目？VisualStudio中想要?jiǎng)?chuàng)建java項(xiàng)目，該怎么操作呢？下面我們就來(lái)看看VisualStudio創(chuàng)建java Script文件的技巧，詳細(xì)請(qǐng)看下文介紹2022-03-21
VS怎么從現(xiàn)有代碼中創(chuàng)建項(xiàng)目? visualstudio創(chuàng)建一個(gè)新項(xiàng)目的技巧
VS怎么從現(xiàn)有代碼中創(chuàng)建項(xiàng)目？VS想要?jiǎng)?chuàng)建項(xiàng)目，該怎么充現(xiàn)有代碼中創(chuàng)建項(xiàng)目呢？下面我們就來(lái)看看visualstudio創(chuàng)建一個(gè)新項(xiàng)目的技巧，詳細(xì)請(qǐng)看下文介紹2022-03-15
VS怎么創(chuàng)建遠(yuǎn)程存儲(chǔ)庫(kù)? VisualStudio創(chuàng)建遠(yuǎn)程存儲(chǔ)庫(kù)的技巧
VS怎么創(chuàng)建遠(yuǎn)程存儲(chǔ)庫(kù)？vs創(chuàng)建存儲(chǔ)庫(kù)的時(shí)候，可以選擇遠(yuǎn)程存儲(chǔ)庫(kù)，該怎么實(shí)現(xiàn)嗯？下面我們就來(lái)看看VisualStudio創(chuàng)建遠(yuǎn)程存儲(chǔ)庫(kù)的技巧2022-03-15
VisualStudio怎么創(chuàng)建樣式表文件? vs默認(rèn)樣式表模板的使用方法
VisualStudio怎么創(chuàng)建樣式表文件？想要?jiǎng)?chuàng)建樣式表文件，可以通過自帶的樣式表模板類創(chuàng)建，下面我們就來(lái)看看vs默認(rèn)樣式表模板的使用方法2022-03-14
vs2017怎么創(chuàng)建職工管理類文件? viusalstudio新建職工管理類的技巧
vs2017怎么創(chuàng)建職工管理類文件？vs2017中想要?jiǎng)?chuàng)建一個(gè)職工管理文件，該怎么創(chuàng)建呢？下面我們就來(lái)看看viusalstudio新建職工管理類的技巧2022-03-09
