0
  • 聊天消息
  • 系統(tǒng)消息
  • 評論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會(huì)員中心
創(chuàng)作中心

完善資料讓更多小伙伴認(rèn)識(shí)你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

鴻蒙TypeScript入門學(xué)習(xí)第2天【TypeScript安裝】

jf_46214456 ? 來源:jf_46214456 ? 作者:jf_46214456 ? 2024-03-27 15:22 ? 次閱讀
加入交流群
微信小助手二維碼

掃碼添加小助手

加入工程師交流群

1、TypeScript 安裝

本文介紹 TypeScript 環(huán)境的安裝。

我們需要使用到 npm 工具安裝,如果你還不了解 npm,可以參考我之前文檔。

2、NPM 安裝 TypeScript

如果你的本地環(huán)境已經(jīng)安裝了 npm 工具,可以使用以下命令來安裝。

使用國內(nèi)鏡像:

npm config set registry https://registry.npmmirror.com

安裝 typescript:

npm install -g typescript

安裝完成后我們可以使用 tsc 命令來執(zhí)行 TypeScript 的相關(guān)代碼,以下是查看版本號(hào):

$ tsc -v
Version 3.2.2

然后我們新建一個(gè) app.ts 的文件,代碼如下:

var message:string = "Hello World" console.log(message)

通常我們使用 .ts 作為 TypeScript 代碼文件的擴(kuò)展名。

然后執(zhí)行以下命令將 TypeScript 轉(zhuǎn)換為 JavaScript 代碼:

tsc app.ts

cke_5294.png

這時(shí)候在當(dāng)前目錄下(與 app.ts 同一目錄)就會(huì)生成一個(gè) app.js 文件,代碼如下:

var message = "Hello World"; console.log(message);

使用 node 命令來執(zhí)行 app.js 文件:

$ node app.js 
Hello World

TypeScript 轉(zhuǎn)換為 JavaScript 過程如下圖:

cke_9107.png


3、Visual Studio Code 介紹

很多 IDE 都有支持 TypeScript 插件,如:Visual Studio,Sublime Text 2,WebStorm / PHPStorm,Eclipse 等。

本章節(jié)主要介紹 Visual Studio Code,Visual Studio Code 是一個(gè)可以運(yùn)行于 Mac OS X、Windows 和 Linux 之上的,針對于編寫現(xiàn)代 Web 和云應(yīng)用的跨平臺(tái)源代碼編輯器,由 Microsoft 公司開發(fā)。

鴻蒙OS開發(fā)更多內(nèi)容↓點(diǎn)擊HarmonyOSOpenHarmony技術(shù)
鴻蒙技術(shù)文檔開發(fā)知識(shí)更新庫gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md在這。或+mau123789學(xué)習(xí),是v喔

搜狗高速瀏覽器截圖20240326151547.png

4、Windows 上安裝 Visual Studio Code

1、下載 [Visual Studio Code]

cke_15825.png

2、雙擊 VSCodeSetup.exe 圖標(biāo) 安裝。

cke_20025.png

3、安裝完成后,打開 Visual Studio Code 界面類似如下:

cke_22612.png

4、 我們可以在左側(cè)窗口中點(diǎn)擊當(dāng)前編輯的代碼文件,選擇 open in command prompt (在終端中打開),這時(shí)候我們就可以在屏幕的右側(cè)下半部分使用 tsc 命令來執(zhí)行 TypeScript 文件代碼了。

cke_25970.png

5、Mac OS X 安裝 Visual Studio Code

Mac OS X 安裝配置 Visual Studio Code 可以查看: 官網(wǎng)

Linux 安裝 Visual Studio Code

Linux 安裝配置 Visual Studio Code 可以查看:官網(wǎng)

審核編輯 黃宇

聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請聯(lián)系本站處理。 舉報(bào)投訴
  • Linux
    +關(guān)注

    關(guān)注

    87

    文章

    11500

    瀏覽量

    213350
  • 鴻蒙
    +關(guān)注

    關(guān)注

    59

    文章

    2587

    瀏覽量

    43924
收藏 人收藏
加入交流群
微信小助手二維碼

掃碼添加小助手

加入工程師交流群

    評論

    相關(guān)推薦
    熱點(diǎn)推薦

    tscircuit - 電路開發(fā)的 React 范式? 用TypeScript、React和 AI工具構(gòu)建電子產(chǎn)品

    TypeScript、React 和 AI 工具構(gòu)建電子產(chǎn)品。
    的頭像 發(fā)表于 04-30 18:18 ?653次閱讀
    tscircuit - 電路開發(fā)的 React 范式?   用<b class='flag-5'>TypeScript</b>、React和 AI工具構(gòu)建電子產(chǎn)品

    KaihongOS操作系統(tǒng):ArkTS語言基礎(chǔ)

    應(yīng)用開發(fā)中使用的TypeScript超集,提供了一套豐富的API來構(gòu)建應(yīng)用界面和邏輯。 ArkTS與TypeScript ArkTS基于TypeScript進(jìn)行擴(kuò)展,因此TypeScript
    發(fā)表于 04-23 06:31

    鴻蒙北向開發(fā)OpenHarmony5.0 DevEco Studio開發(fā)工具安裝與配置

    本文介紹OpenHarmony5.0 DevEco Studio開發(fā)工具安裝與配置,鴻蒙北向開發(fā)入門必備!由觸覺智能Purple Pi OH鴻蒙開發(fā)板演示。搭載了瑞芯微RK3566四核
    的頭像 發(fā)表于 03-28 18:05 ?771次閱讀
    <b class='flag-5'>鴻蒙</b>北向開發(fā)OpenHarmony5.0 DevEco Studio開發(fā)工具<b class='flag-5'>安裝</b>與配置

    鴻蒙北向開發(fā)OpenHarmony4.1 DevEco Studio開發(fā)工具安裝與配置

    OpenHarmony4.1 DevEco Studio開發(fā)工具安裝與配置,鴻蒙北向開發(fā)入門必備!
    的頭像 發(fā)表于 02-07 17:35 ?751次閱讀
    <b class='flag-5'>鴻蒙</b>北向開發(fā)OpenHarmony4.1 DevEco Studio開發(fā)工具<b class='flag-5'>安裝</b>與配置

    【瑞薩RA2L1入門學(xué)習(xí)2. PWM呼吸燈

    .燒錄程序: 3.實(shí)驗(yàn)圖片: 經(jīng)過這兩的使用,發(fā)現(xiàn)e2studio中的stacks頁面還是挺好用的,可以拖拽函數(shù),編寫程序更加方便快捷。在stacks頁面還能看到用到了哪些堆棧,非常的贊。 本人第一次使用該開發(fā)板,作為入門
    發(fā)表于 01-30 21:55

    #新年新氣象,大家新年快樂!#AIGC入門鴻蒙入門

    、功能強(qiáng)大等特點(diǎn),能夠在物聯(lián)網(wǎng)時(shí)代為用戶提供更加便捷、高效的服務(wù)。 2.開發(fā)環(huán)境搭建: 下載并安裝DevEco Studio,這是華為官方為鴻蒙系統(tǒng)開發(fā)提供的集成開發(fā)環(huán)境。 配置開發(fā)環(huán)境,包括
    發(fā)表于 01-13 10:46

    AIGC入門鴻蒙入門

    、小巧、功能強(qiáng)大等特點(diǎn),能夠在物聯(lián)網(wǎng)時(shí)代為用戶提供更加便捷、高效的服務(wù)。 2. 開發(fā)環(huán)境搭建: 下載并安裝DevEco Studio,這是華為官方為鴻蒙系統(tǒng)開發(fā)提供的集成開發(fā)環(huán)境。 配置開發(fā)環(huán)境,包括
    發(fā)表于 01-13 10:32

    瑞薩 FPB-RA6E2 評估板入門學(xué)習(xí)

    瑞薩 FPB-RA6E2 評估板入門學(xué)習(xí)
    的頭像 發(fā)表于 12-11 09:22 ?719次閱讀
    瑞薩 FPB-RA6E<b class='flag-5'>2</b> 評估板<b class='flag-5'>入門</b><b class='flag-5'>學(xué)習(xí)</b>

    HarmonyOS Next原生應(yīng)用開發(fā)-從TS到ArkTS的適配規(guī)則(十五)

    。對于數(shù)組來說,可以使用常規(guī)的for循環(huán)。TypeScript let a: string[] = [\'1.0\', \'2.0\', \'3.0\']; for (let i in a
    發(fā)表于 08-19 16:13

    HarmonyOS Next原生應(yīng)用開發(fā)-從TS到ArkTS的適配規(guī)則(十四)

    變量、函數(shù)參數(shù)傳遞時(shí)的逗號(hào)分隔符不同。TypeScript for (let i = 0, j = 0; i < 10; ++i, j += 2) { // ... } let x
    發(fā)表于 08-16 10:20

    HarmonyOS Next原生應(yīng)用開發(fā)-從TS到ArkTS的適配規(guī)則(十三)

    ArkTS不支持解構(gòu)賦值。可使用其他替代方法,例如,使用臨時(shí)變量。TypeScript let [one, two] = [1, 2]; // 此處需要分號(hào) [one, two] = [two, one
    發(fā)表于 08-12 09:42

    HarmonyOS Next原生應(yīng)用開發(fā)-從TS到ArkTS的適配規(guī)則(十)

    。如果其中任何一個(gè)元素的類型無法根據(jù)上下文推導(dǎo)出來(例如,無類型的對象字面量),則會(huì)發(fā)生編譯時(shí)錯(cuò)誤。 TypeScript let a = [{n: 1, s: \'1\'}, {n: 2, s
    發(fā)表于 07-29 16:02

    HarmonyOS Next原生應(yīng)用開發(fā)-從TS到ArkTS的適配規(guī)則(九)

    TypeScript let o1 = {n: 42, s: \'foo\'}; let o2: Object = {n: 42, s: \'foo\'}; let o3: object = {n
    發(fā)表于 07-25 11:26

    HarmonyOS Next原生應(yīng)用開發(fā)-從TS到ArkTS的適配規(guī)則(六

    TypeScript class C { static s: string static { C.s = \'aa\' } static { C.s = C.s + \'bb\' } } ArkTS
    發(fā)表于 07-18 15:16

    HarmonyOS Next原生應(yīng)用開發(fā)-從TS到ArkTS的適配規(guī)則(五)

    一、使用具體的類型而非any或unknown 規(guī)則:arkts-no-any-unknown 級別:錯(cuò)誤 ArkTS不支持any和unknown類型。顯式指定具體類型。 TypeScript let
    發(fā)表于 07-17 17:24

    電子發(fā)燒友

    中國電子工程師最喜歡的網(wǎng)站

    • 2931785位工程師會(huì)員交流學(xué)習(xí)
    • 獲取您個(gè)性化的科技前沿技術(shù)信息
    • 參加活動(dòng)獲取豐厚的禮品