0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙TypeScript入门学习第2天【TypeScript安装】

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-03-27 15:22 次阅读

1、TypeScript 安装

本文介绍 TypeScript 环境的安装。

我们需要使用到 npm 工具安装,如果你还不了解 npm,可以参考我之前文档。

2、NPM 安装 TypeScript

如果你的本地环境已经安装了 npm 工具,可以使用以下命令来安装。

使用国内镜像:

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

安装 typescript:

npm install -g typescript

安装完成后我们可以使用 tsc 命令来执行 TypeScript 的相关代码,以下是查看版本号:

$ tsc -v
Version 3.2.2

然后我们新建一个 app.ts 的文件,代码如下:

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

通常我们使用 .ts 作为 TypeScript 代码文件的扩展名。

然后执行以下命令将 TypeScript 转换为 JavaScript 代码:

tsc app.ts

cke_5294.png

这时候在当前目录下(与 app.ts 同一目录)就会生成一个 app.js 文件,代码如下:

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

使用 node 命令来执行 app.js 文件:

$ node app.js 
Hello World

TypeScript 转换为 JavaScript 过程如下图:

cke_9107.png


3、Visual Studio Code 介绍

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

本章节主要介绍 Visual Studio Code,Visual Studio Code 是一个可以运行于 Mac OS X、Windows 和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器,由 Microsoft 公司开发。

鸿蒙OS开发更多内容↓点击HarmonyOSOpenHarmony技术
鸿蒙技术文档开发知识更新库gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md在这。或+mau123789学习,是v喔

搜狗高速浏览器截图20240326151547.png

4、Windows 上安装 Visual Studio Code

1、下载 [Visual Studio Code]

cke_15825.png

2、双击 VSCodeSetup.exe 图标 安装。

cke_20025.png

3、安装完成后,打开 Visual Studio Code 界面类似如下:

cke_22612.png

4、 我们可以在左侧窗口中点击当前编辑的代码文件,选择 open in command prompt (在终端中打开),这时候我们就可以在屏幕的右侧下半部分使用 tsc 命令来执行 TypeScript 文件代码了。

cke_25970.png

5、Mac OS X 安装 Visual Studio Code

Mac OS X 安装配置 Visual Studio Code 可以查看: 官网

Linux 安装 Visual Studio Code

Linux 安装配置 Visual Studio Code 可以查看:官网

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • Linux
    +关注

    关注

    87

    文章

    10990

    浏览量

    206736
  • 鸿蒙
    +关注

    关注

    55

    文章

    1630

    浏览量

    42120
收藏 人收藏

    评论

    相关推荐

    鸿蒙TypeScript学习第20天:【模块】

    TypeScript 模块的设计理念是可以更换的组织代码。 模块是在其自身的作用域里执行,并不是在全局作用域,这意味着定义在模块里面的变量、函数和类等在模块外部是不可见的,除非明确地使用 export 导出它们。类似地,我们必须通过 import 导入其他模块导出的变量、函数、类等。
    的头像 发表于 04-18 15:19 437次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>学习</b>第20天:【模块】

    鸿蒙语言TypeScript学习第18天:【泛型】

    泛型(Generics)是一种编程语言特性,允许在定义函数、类、接口等时使用占位符来表示类型,而不是具体的类型。
    的头像 发表于 04-16 14:56 102次阅读
    <b class='flag-5'>鸿蒙</b>语言<b class='flag-5'>TypeScript</b><b class='flag-5'>学习</b>第18天:【泛型】

    鸿蒙TypeScript学习第17天:【对象】

    对象是包含一组键值对的实例。 值可以是标量、函数、数组、对象等
    的头像 发表于 04-15 15:33 346次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>学习</b>第17天:【对象】

    鸿蒙语言TypeScript学习第16天:【类】

    TypeScript 支持面向对象的所有特性,比如 类、接口等。
    的头像 发表于 04-15 09:29 468次阅读
    <b class='flag-5'>鸿蒙</b>语言<b class='flag-5'>TypeScript</b><b class='flag-5'>学习</b>第16天:【类】

    鸿蒙TypeScript学习第13天:【元组】

    元组中允许存储不同类型的元素,元组可以作为参数传递给函数。
    的头像 发表于 04-11 14:43 126次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>学习</b>第13天:【元组】

    鸿蒙TypeScript学习第12天【Map对象】

    Map 对象保存键值对,并且能够记住键的原始插入顺序。 任何值(对象或者原始值) 都可以作为一个键或一个值。
    的头像 发表于 04-10 15:47 104次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>学习</b>第12天【Map对象】

    鸿蒙TypeScript 开发学习第9天:【TypeScript Number】

    TypeScript 与 JavaScript 类似,支持 Number 对象。 Number 对象是原始数值的包装对象。
    的头像 发表于 04-07 18:02 438次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>TypeScript</b> 开发<b class='flag-5'>学习</b>第9天:【<b class='flag-5'>TypeScript</b> Number】

    鸿蒙TypeScript入门学习第8天:【TypeScript 函数】

    函数是一组一起执行一个任务的语句。 您可以把代码划分到不同的函数中。如何划分代码到不同的函数中是由您来决定的,但在逻辑上,划分通常是根据每个函数执行一个特定的任务来进行的。
    的头像 发表于 04-03 14:54 173次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>入门</b><b class='flag-5'>学习</b>第8天:【<b class='flag-5'>TypeScript</b> 函数】

    鸿蒙TypeScript学习第7天:【TypeScript 循环】

    有的时候,我们可能需要多次执行同一块代码。一般情况下,语句是按顺序执行的:函数中的第一个语句先执行,接着是第二个语句,依此类推。 编程语言提供了更为复杂执行路径的多种控制结构。
    的头像 发表于 04-02 14:28 443次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>学习</b>第7天:【<b class='flag-5'>TypeScript</b> 循环】

    鸿蒙TypeScript入门学习第5天:【TypeScript 运算符】

    运算符用于执行程序代码运算,会针对一个以上操作数项目来进行运算。
    的头像 发表于 04-01 16:18 89次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>入门</b><b class='flag-5'>学习</b>第5天:【<b class='flag-5'>TypeScript</b> 运算符】

    鸿蒙TypeScript入门学习第6天:【条件语句】

    条件语句用于基于不同的条件来执行不同的动作。 TypeScript 条件语句是通过一条或多条语句的执行结果(True 或 False)来决定执行的代码块。
    的头像 发表于 04-01 13:51 429次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>入门</b><b class='flag-5'>学习</b>第6天:【条件语句】

    鸿蒙TypeScript入门学习第4天:【TS变量声明】

    变量是一种使用方便的占位符,用于引用计算机内存地址。 我们可以把变量看做存储数据的容器。
    的头像 发表于 03-29 14:49 751次阅读

    鸿蒙开发之ArkTS基础知识

    一、ArkTS简介 ArkTS是HarmonyOS优选的主力应用开发语言。它在TypeScript(简称TS)的基础上,匹配了鸿蒙的ArkUI框架,扩展了声明式UI、状态管理等相应的能力,让开
    的头像 发表于 01-24 16:44 609次阅读
    <b class='flag-5'>鸿蒙</b>开发之ArkTS基础知识

    【触觉智能 Purple Pi OH 开发板体验】二、鸿蒙系统APP应用例程学习HDC使用学习

    两年开发鸿蒙APP也是使用的这两种语言进行开发。当下看TypeScript程序还能说勉强看懂,但是当下开发程序就没那个实力了,需要之后在抽时间学习。技术更新的也确实是快啊!!! 二、天气预报程序开发
    发表于 08-31 11:13

    TypeScript之父也搞大模型:推出TypeChat

    C# 和 TypeScript 之父 Anders Hejlsberg 今天宣布了全新的开源项目 ——TypeChat,它通过 AI 在自然语言和应用程序模式 (application schema),以及 API 之间构建了一座 “桥梁”,能用新颖有趣的方式使用 TypeScr
    的头像 发表于 07-24 09:27 582次阅读
    <b class='flag-5'>TypeScript</b>之父也搞大模型:推出TypeChat