0
  • 聊天消息
  • 系統(tǒng)消息
  • 評(pí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 工具,可以使用以下命令來安裝。

使用國(guó)內(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 之上的,針對(duì)于編寫現(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)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請(qǐng)聯(lián)系本站處理。 舉報(bào)投訴
  • Linux
    +關(guān)注

    關(guān)注

    87

    文章

    11207

    瀏覽量

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

    關(guān)注

    57

    文章

    2302

    瀏覽量

    42689
收藏 人收藏

    評(píng)論

    相關(guān)推薦

    鴻蒙開發(fā):【從TypeScript到ArkTS的適配規(guī)則】

    ArkTS通過規(guī)范約束了TypeScript(簡(jiǎn)稱TS)中過于靈活而影響開發(fā)正確性或者給運(yùn)行時(shí)帶來不必要額外開銷的特性
    的頭像 發(fā)表于 05-14 09:37 ?1825次閱讀
    <b class='flag-5'>鴻蒙</b>開發(fā):【從<b class='flag-5'>TypeScript</b>到ArkTS的適配規(guī)則】

    鴻蒙TypeScript學(xué)習(xí)21:【聲明文件】

    TypeScript 作為 JavaScript 的超集,在開發(fā)過程中不可避免要引用其他第三方的 JavaScript 的庫。
    的頭像 發(fā)表于 04-19 15:02 ?506次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>學(xué)習(xí)</b>21<b class='flag-5'>天</b>:【聲明文件】

    鴻蒙TypeScript學(xué)習(xí)20:【模塊】

    TypeScript 模塊的設(shè)計(jì)理念是可以更換的組織代碼。 模塊是在其自身的作用域里執(zhí)行,并不是在全局作用域,這意味著定義在模塊里面的變量、函數(shù)和類等在模塊外部是不可見的,除非明確地使用 export 導(dǎo)出它們。類似地,我們必須通過 import 導(dǎo)入其他模塊導(dǎo)出的變量、函數(shù)、類等。
    的頭像 發(fā)表于 04-18 15:19 ?681次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>學(xué)習(xí)</b><b class='flag-5'>第</b>20<b class='flag-5'>天</b>:【模塊】

    鴻蒙語言TypeScript學(xué)習(xí)18:【泛型】

    泛型(Generics)是一種編程語言特性,允許在定義函數(shù)、類、接口等時(shí)使用占位符來表示類型,而不是具體的類型。
    的頭像 發(fā)表于 04-16 14:56 ?330次閱讀
    <b class='flag-5'>鴻蒙</b>語言<b class='flag-5'>TypeScript</b><b class='flag-5'>學(xué)習(xí)</b><b class='flag-5'>第</b>18<b class='flag-5'>天</b>:【泛型】

    鴻蒙TypeScript學(xué)習(xí)17:【對(duì)象】

    對(duì)象是包含一組鍵值對(duì)的實(shí)例。 值可以是標(biāo)量、函數(shù)、數(shù)組、對(duì)象等
    的頭像 發(fā)表于 04-15 15:33 ?602次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>學(xué)習(xí)</b><b class='flag-5'>第</b>17<b class='flag-5'>天</b>:【對(duì)象】

    鴻蒙語言TypeScript學(xué)習(xí)16:【類】

    TypeScript 支持面向?qū)ο蟮乃刑匦?,比?類、接口等。
    的頭像 發(fā)表于 04-15 09:29 ?952次閱讀
    <b class='flag-5'>鴻蒙</b>語言<b class='flag-5'>TypeScript</b><b class='flag-5'>學(xué)習(xí)</b><b class='flag-5'>第</b>16<b class='flag-5'>天</b>:【類】

    鴻蒙TypeScript學(xué)習(xí)13:【元組】

    元組中允許存儲(chǔ)不同類型的元素,元組可以作為參數(shù)傳遞給函數(shù)。
    的頭像 發(fā)表于 04-11 14:43 ?421次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>學(xué)習(xí)</b><b class='flag-5'>第</b>13<b class='flag-5'>天</b>:【元組】

    鴻蒙TypeScript入門學(xué)習(xí)11【Array(數(shù)組)】

    數(shù)組對(duì)象是使用單獨(dú)的變量名來存儲(chǔ)一系列的值。 數(shù)組非常常用。
    的頭像 發(fā)表于 04-09 14:38 ?1019次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>入門</b><b class='flag-5'>學(xué)習(xí)</b><b class='flag-5'>第</b>11<b class='flag-5'>天</b>【Array(數(shù)組)】

    鴻蒙TypeScript 開發(fā)學(xué)習(xí)9:【TypeScript Number】

    TypeScript 與 JavaScript 類似,支持 Number 對(duì)象。 Number 對(duì)象是原始數(shù)值的包裝對(duì)象。
    的頭像 發(fā)表于 04-07 18:02 ?750次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>TypeScript</b> 開發(fā)<b class='flag-5'>學(xué)習(xí)</b><b class='flag-5'>第</b>9<b class='flag-5'>天</b>:【<b class='flag-5'>TypeScript</b> Number】

    鴻蒙TypeScript入門學(xué)習(xí)8:【TypeScript 函數(shù)】

    函數(shù)是一組一起執(zhí)行一個(gè)任務(wù)的語句。 您可以把代碼劃分到不同的函數(shù)中。如何劃分代碼到不同的函數(shù)中是由您來決定的,但在邏輯上,劃分通常是根據(jù)每個(gè)函數(shù)執(zhí)行一個(gè)特定的任務(wù)來進(jìn)行的。
    的頭像 發(fā)表于 04-03 14:54 ?375次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>入門</b><b class='flag-5'>學(xué)習(xí)</b><b class='flag-5'>第</b>8<b class='flag-5'>天</b>:【<b class='flag-5'>TypeScript</b> 函數(shù)】

    鴻蒙TypeScript學(xué)習(xí)7:【TypeScript 循環(huán)】

    有的時(shí)候,我們可能需要多次執(zhí)行同一塊代碼。一般情況下,語句是按順序執(zhí)行的:函數(shù)中的第一個(gè)語句先執(zhí)行,接著是第二個(gè)語句,依此類推。 編程語言提供了更為復(fù)雜執(zhí)行路徑的多種控制結(jié)構(gòu)。
    的頭像 發(fā)表于 04-02 14:28 ?788次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>學(xué)習(xí)</b><b class='flag-5'>第</b>7<b class='flag-5'>天</b>:【<b class='flag-5'>TypeScript</b> 循環(huán)】

    鴻蒙TypeScript入門學(xué)習(xí)5:【TypeScript 運(yùn)算符】

    運(yùn)算符用于執(zhí)行程序代碼運(yùn)算,會(huì)針對(duì)一個(gè)以上操作數(shù)項(xiàng)目來進(jìn)行運(yùn)算。
    的頭像 發(fā)表于 04-01 16:18 ?420次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>入門</b><b class='flag-5'>學(xué)習(xí)</b><b class='flag-5'>第</b>5<b class='flag-5'>天</b>:【<b class='flag-5'>TypeScript</b> 運(yùn)算符】

    鴻蒙TypeScript入門學(xué)習(xí)6:【條件語句】

    條件語句用于基于不同的條件來執(zhí)行不同的動(dòng)作。 TypeScript 條件語句是通過一條或多條語句的執(zhí)行結(jié)果(True 或 False)來決定執(zhí)行的代碼塊。
    的頭像 發(fā)表于 04-01 13:51 ?704次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>入門</b><b class='flag-5'>學(xué)習(xí)</b><b class='flag-5'>第</b>6<b class='flag-5'>天</b>:【條件語句】

    鴻蒙TypeScript入門學(xué)習(xí)4:【TS變量聲明】

    變量是一種使用方便的占位符,用于引用計(jì)算機(jī)內(nèi)存地址。 我們可以把變量看做存儲(chǔ)數(shù)據(jù)的容器。
    的頭像 發(fā)表于 03-29 14:49 ?1326次閱讀

    鴻蒙TypeScript開發(fā)入門學(xué)習(xí)3:【TS基礎(chǔ)類型】

    任意值是 TypeScript 針對(duì)編程時(shí)類型不明確的變量使用的一種數(shù)據(jù)類型,它常用于以下三種情況。
    的頭像 發(fā)表于 03-28 15:02 ?469次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>TypeScript</b>開發(fā)<b class='flag-5'>入門</b><b class='flag-5'>學(xué)習(xí)</b><b class='flag-5'>第</b>3<b class='flag-5'>天</b>:【TS基礎(chǔ)類型】