React+Typescript創(chuàng)建項(xiàng)目的實(shí)現(xiàn)步驟
接下來(lái) 我們來(lái)一起探索一下用TypeScript 來(lái)編寫(xiě)react
這也是一個(gè)非常好的趨勢(shì)，目前也非常多人使用 那么 我們就先從創(chuàng)建項(xiàng)目開(kāi)始
首先 我們先找一個(gè) 或者 之前創(chuàng)建一個(gè)目錄 用來(lái)放我們的項(xiàng)目
然后 在這個(gè)目錄下直接輸入 例如 這里 我想創(chuàng)建一個(gè)叫 tsReApp 的項(xiàng)目就可以輸入
npx create-react-app tsreapp --template typescript
這個(gè)沒(méi)辦法 這個(gè)命令是不支持大寫(xiě)的 所以 名字就只好將大寫(xiě)部分換成小寫(xiě)了
然后 我們查看目錄 發(fā)現(xiàn)項(xiàng)目就已經(jīng)創(chuàng)建好了 這里 大家一定要搞清楚 npx的概念 他的意思是 如果你的項(xiàng)目中有執(zhí)行這個(gè)命令需要的依賴(lài) 他就用依賴(lài) 如果沒(méi)有 他就自己先將依賴(lài)裝好 再創(chuàng)建
然后 我們聊個(gè)題外話 官方推薦我們使用 VSCode 一般前端電腦里應(yīng)該都有 這個(gè)工具還是非常好用的
然后 我們用VSCode打開(kāi)剛剛創(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實(shí)現(xiàn)基于Antd密碼強(qiáng)度校驗(yàn)組件示例詳解
這篇文章主要為大家介紹了React實(shí)現(xiàn)基于Antd密碼強(qiáng)度校驗(yàn)組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
React利用scheduler思想實(shí)現(xiàn)任務(wù)的打斷與恢復(fù)
這篇文章主要為大家詳細(xì)介紹了React如何利用scheduler思想實(shí)現(xiàn)任務(wù)的打斷與恢復(fù),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2024-03-03
使用React實(shí)現(xiàn)內(nèi)容滑動(dòng)組件效果
這篇文章主要介紹了使用React實(shí)現(xiàn)一個(gè)內(nèi)容滑動(dòng)組件效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05
react實(shí)現(xiàn)簡(jiǎn)單的拖拽功能
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)簡(jiǎn)單的拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家介紹了React中編寫(xiě)CSS實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
React.js入門(mén)實(shí)例教程之創(chuàng)建hello world 的5種方式
React 是近期非常熱門(mén)的一個(gè)前端開(kāi)發(fā)框架。應(yīng)用非常廣泛，接下來(lái)通過(guò)本文給大家介紹React.js入門(mén)實(shí)例教程之創(chuàng)建hello world 的5種方式 ，需要的朋友參考下吧2016-05-05
React實(shí)現(xiàn)多標(biāo)簽在有限空間內(nèi)展示
在業(yè)務(wù)中,需要在一個(gè)卡片組件中展示多個(gè)標(biāo)簽,標(biāo)簽組件高度相同,寬度和出現(xiàn)順序不同,要求標(biāo)簽只能在有限的空間內(nèi)展示,所以本文給大家介紹了React實(shí)現(xiàn)多標(biāo)簽在有限空間內(nèi)展示,需要的朋友可以參考下2023-12-12
React onBlur回調(diào)中使用document.activeElement返回body完美解決方案
這篇文章主要介紹了React onBlur回調(diào)中使用document.activeElement返回body完美解決方案,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
更強(qiáng)大的React 狀態(tài)管理庫(kù)Zustand使用詳解
這篇文章主要為大家介紹了更強(qiáng)大的React 狀態(tài)管理庫(kù)Zustand使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要為大家介紹了ReactJS中不同類(lèi)型的狀態(tài)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12