快捷導(dǎo)航

React+Typescript創(chuàng)建項(xiàng)目的實(shí)現(xiàn)步驟

更新時(shí)間：2023年08月16日 09:38:37 作者：-耿瑞-

通過React組件庫(kù)和TypeScript的強(qiáng)類型特性,開發(fā)者可以創(chuàng)建出具有優(yōu)秀用戶體驗(yàn)和穩(wěn)定性的Web應(yīng)用程序,本文主要介紹了React+Typescript創(chuàng)建項(xiàng)目的實(shí)現(xiàn)步驟,感興趣的可以了解一下

接下來(lái) 我們來(lái)一起探索一下用TypeScript 來(lái)編寫react

這也是一個(gè)非常好的趨勢(shì)，目前也非常多人使用那么我們就先從創(chuàng)建項(xiàng)目開始

首先我們先找一個(gè) 或者之前創(chuàng)建一個(gè)目錄用來(lái)放我們的項(xiàng)目

然后在這個(gè)目錄下直接輸入例如這里我想創(chuàng)建一個(gè)叫 tsReApp 的項(xiàng)目就可以輸入

npx create-react-app tsreapp --template typescript

這個(gè)沒辦法這個(gè)命令是不支持大寫的所以名字就只好將大寫部分換成小寫了

然后我們查看目錄發(fā)現(xiàn)項(xiàng)目就已經(jīng)創(chuàng)建好了這里大家一定要搞清楚 npx的概念他的意思是如果你的項(xiàng)目中有執(zhí)行這個(gè)命令需要的依賴他就用依賴如果沒有他就自己先將依賴裝好再創(chuàng)建

然后我們聊個(gè)題外話官方推薦我們使用 VSCode 一般前端電腦里應(yīng)該都有這個(gè)工具還是非常好用的

然后我們用VSCode打開剛剛創(chuàng)建的項(xiàng)目在 package.json 中我們可以看到啟動(dòng)命令是start

我們直接終端執(zhí)行

npm run start

然后瀏覽器端也正常起來(lái)了

但這個(gè)不得不承認(rèn) Ts項(xiàng)目的編譯速度會(huì)比ES項(xiàng)目會(huì)稍微慢一些

到此這篇關(guān)于React+Typescript創(chuàng)建項(xiàng)目的實(shí)現(xiàn)步驟的文章就介紹到這了,更多相關(guān)React Typescript創(chuàng)建項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

解決React報(bào)錯(cuò)React.Children.only expected to rece
這篇文章主要為大家介紹了React報(bào)錯(cuò)React.Children.only expected to receive single React element child分析解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
react實(shí)現(xiàn)點(diǎn)擊選中的li高亮的示例代碼
本篇文章主要介紹了react實(shí)現(xiàn)選中的li高亮的示例代碼，頁(yè)面上有很多個(gè)li，要實(shí)現(xiàn)點(diǎn)擊到哪個(gè)就哪個(gè)高亮。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2018-05-05
關(guān)于getDerivedStateFromProps填坑記錄
這篇文章主要介紹了關(guān)于getDerivedStateFromProps填坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
React從命令式編程到聲明式編程的原理解析
這篇文章主要介紹了React從命令式編程到聲明式編程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-09-09
React?Native實(shí)際項(xiàng)目中的經(jīng)驗(yàn)和踩坑記錄
在當(dāng)今移動(dòng)應(yīng)用開發(fā)的浪潮中,React Native以其跨平臺(tái)、高效開發(fā)的特點(diǎn)脫穎而出,成為眾多開發(fā)者首選的框架之一,這篇文章主要介紹了React Native實(shí)際項(xiàng)目中的經(jīng)驗(yàn)和踩坑記錄的相關(guān)資料,需要的朋友可以參考下
2026-03-03
React實(shí)現(xiàn)createElement 和 cloneElement的區(qū)別
本文詳細(xì)介紹了React中React.createElement和React.cloneElement兩種方法的定義、用法、區(qū)別及適用場(chǎng)景,具有一定的參考價(jià)值,感興趣的可以了解一下
2024-09-09
React實(shí)現(xiàn)動(dòng)態(tài)輪播圖的使用示例
輪播組件是常見的一種方式,用來(lái)展示圖像、信息或者是廣告,本文就來(lái)介紹一下React實(shí)現(xiàn)動(dòng)態(tài)輪播圖的使用示例,具有一定的參考價(jià)值,感興趣的可以了解一下
2023-12-12
React事件處理和表單的綁定詳解
這篇文章主要介紹了React事件處理和表單的綁定，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
React冒泡和阻止冒泡的應(yīng)用詳解
這篇文章主要介紹了React冒泡和阻止冒泡的應(yīng)用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08
react?express實(shí)現(xiàn)webssh?demo解析
這篇文章主要為大家介紹了詳解react?express實(shí)現(xiàn)webssh?demo解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04