TypeScript教程(一)在vscode中的配置TypeScript环境

news2025/1/11 16:25:45

TypeScript教程(一)在vscode中的配置TypeScript环境

文章目录

  • TypeScript教程(一)在vscode中的配置TypeScript环境
  • 一、前言
  • 二、具体步骤
    • 1、Node.js安装
    • 2、TypeScript安装
    • 3、helloworld

一、前言

未来的开发者们请上座,随着时代的发展web网页的发展越来越丰富,掌握TypeScript显得更加有必要。

二、具体步骤

1、Node.js安装

安装Node.js:首先,确保您已经安装了Node.js。您可以从Node.js官方网站(https://nodejs.org)下载并安装适合您操作系统的版本。
在这里插入图片描述

2、TypeScript安装

npm 切换淘宝镜像源

npm config set registry https://registry.npm.taobao.org/

查询镜像使用状态

npm config get registry

npm 安装TypeScript

npm i -g typescript

查询typescript的版本

tsc -V

截止这里typescript就安装进行你的环境了,下面安装vscode中的typescript的扩展

安装TypeScript扩展:打开VS Code,点击左侧的扩展图标(四个方块),搜索并安装"TypeScript"扩展。
在这里插入图片描述

3、helloworld

创建TypeScript项目:在VS Code中,打开一个文件夹作为您的TypeScript项目的根目录。然后打开终端
打开终端快捷按键
ctrl+`

初始化TypeScript配置:在终端窗口中,运行以下命令来初始化TypeScript配置文件(tsconfig.json):

npx tsc --init

这将在您的项目根目录下创建一个名为tsconfig.json的文件,用于配置TypeScript编译器的选项。

编写TypeScript代码:创建一个新的.ts文件,并在其中编写TypeScript代码。

function say(world:string){
    console.log(world);
}
say('hello world!');

编译和运行TypeScript代码:在终端窗口中输入

ts-node <filename>.ts

在这里插入图片描述

这将使用TypeScript编译器将.ts文件编译为JavaScript文件(.js),然后使用Node.js运行生成的JavaScript文件。

这样,您就可以在VS Code中配置和运行TypeScript代码了。您可以在tsconfig.json文件中配置更多的TypeScript选项,例如目标版本、输出目录等。有关更多详细信息,请参阅TypeScript官方文档(https://www.typescriptlang.org/docs)。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1399826.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

EasyRecovery2024电脑数据恢复工具好不好用?

Ontrack是我们综述中的第一个产品&#xff0c;由于该软件的功效和广度&#xff0c;我认为它完全基于业务。有一个具有基本功能的免费版本和一系列付费版本&#xff0c;不仅可以恢复文件&#xff08;免费版和家庭版&#xff09;&#xff0c;还可以创建磁盘映像/从 CD 和 DVD 恢复…

如何自学Python:一份详细的指南

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;有感而谈⛺️稳中求进&#xff0c;晒太阳 引言 Python是一种广泛使用的高级编程语言&#xff0c;以其简洁明了的语法和强大的功能而受到许多程序员的喜爱。无论是数据分析、网络开发&#…

基于JavaWeb+SSM+Vue基于微信小程序的在线投稿系统的设计和实现

基于JavaWebSSMVue基于微信小程序的在线投稿系统的设计和实现 滑到文末获取源码Lun文目录前言主要技术系统设计功能截图 滑到文末获取源码 Lun文目录 目录 1系统概述 1 1.1 研究背景 1 1.2研究目的 1 1.3系统设计思想 1 2相关技术 2 2.1微信小程序 2 2.2 MYSQL数据库 3 2.3 u…

11、Kafka ------ Kafka 核心API 及 生产者API 讲解

目录 Kafka核心API 及 生产者API讲解★ Kafka的核心APIKafka包含如下5类核心API&#xff1a; ★ 生产者APIKafka 的API 文档 ★ 使用生产者API发送消息 Kafka核心API 及 生产者API讲解 官方文档 ★ Kafka的核心API Kafka包含如下5类核心API&#xff1a; Producer API&#x…

ESP32-HTTP_webServer库(Arduino)

ESP32-HTTP 介绍 ESP32是一款功能强大的微控制器&#xff0c;具有丰富的网络和通信功能。其中之一就是支持HTTP协议&#xff0c;这使得ESP32可以用于创建Web服务器。 HTTP是什么&#xff1f; HTTP&#xff08;Hyper Text Transfer Protocol&#xff09;&#xff0c;即超文本传…

如何快速打开github

作为一个资深码农&#xff0c;怎么能不熟悉全球最大的同性交友社区——github呢&#xff0c;但头疼的是github有时能打开&#xff0c;有时打不开&#xff0c;这是怎么回事&#xff1f; 其实问题出在github.com解析DNS上&#xff0c;并不是需要FQ。下面提供一个方法&#xff0c;…

前端打同一个包可以从测试晋升到生产的配置方案

前端打同一个包从测试晋升到生产环境的方案&#xff0c;是一种高效、可靠且易于维护的部署方式。在这种方案中&#xff0c;前端代码在开发完成后&#xff0c;经过测试验证无误后&#xff0c;可以直接打包部署到生产环境&#xff0c;无需进行额外的配置或修改。这样可以减少部署…

HarmonyOS 应用开发入门

HarmonyOS 应用开发入门 前言 DevEco Studio Release版本为&#xff1a;DevEco Studio 3.1.1。 Compile SDK Release版本为&#xff1a;3.1.0&#xff08;API 9&#xff09;。 构建方式为 HVigor&#xff0c;而非 Gradle。 最新版本已不再支持 &#xff08;”Java、JavaScrip…

已解决Error:AttributeError: module ‘numpy‘ has no attribute ‘complex‘

文章目录 引言报错分析解决方案1&#xff1a;降低NumPy版本解决方案2&#xff1a;更改NumPy源码 结尾 引言 在Python编程的世界里&#xff0c;NumPy无疑占据着举足轻重的地位&#xff0c;它承担着处理大规模数值计算的重要任务。然而&#xff0c;与所有强大工具一样&#xff0…

晶振负载电容公式,怎么计算?

晶振&#xff0c;或称晶体振荡器&#xff0c;是电子设备中的关键元件&#xff0c;尤其在时序电路中扮演着重要角色。晶振的性能直接影响到整个电路的稳定性和精度。在晶振设计中&#xff0c;负载电容是一个重要的参数。理解如何计算负载电容对于正确配置和使用晶振至关重要。今…

Find My卡片正成为消费电子香饽饽,伦茨科技ST17H6x可以帮到您

今年CES许多公司发布支持苹果Find My的卡片产品&#xff0c;这种产品轻薄可充电&#xff0c;放在钱包、背包或者手提包可以防丢查找&#xff0c;在智能化加持下&#xff0c;防丢卡片使得人们日益关心自行车的去向。最新的防丢卡片与苹果Find My结合&#xff0c;智能防丢&#x…

Chatgpt+Comfyui绘图源码说明及本地部署文档

其他文档地址&#xff1a; ChatgptComfyui绘图源码运营文档 ChatgptComfyui绘图源码线上部署文档 一、源码说明 1、源码目录说明 app_home&#xff1a;app官网源码chatgpt-java&#xff1a;管理后台服务端源码、用户端的服务端源码chatgpt-pc&#xff1a;电脑网页前端源码cha…

Halcon 边缘提取

文章目录 算子Halcon edges_image 示例Halcon frei_amp 示例Halcon kirsch_amp示例Halcon sobel_amp示例Halcon sobel_amp 算子示例Halcon sobel_dir 算子示例Halcon close_edges关闭图像间隙示例Halcon close_edges_length关闭图像间隙示例 算子 edges_image 对于图像进行边缘…

64 C++对象模型探索。类对象占用空间问题分析

0.没有任何成员变量的空类&#xff0c;实际上占用空间为1字节。 这是因为当你的使用代码实例化一个类的时候&#xff0c;tea对象就有了空间&#xff0c;&tea是有地址的&#xff0c;那么你这个地址至少要占用1个字节才合理。 Teacher tea; 就像我们买房子&#xff0c;你的…

爬虫接口获取外汇数据(汇率,外汇储备,贸易顺差,美国CPI,M2,国债利率)

akshare是一个很好用的财经数据api接口&#xff0c;完全免费&#xff01;&#xff01;和Tushare不一样。 除了我标题显示的数据外&#xff0c;他还提供各种股票数据&#xff0c;债券数据&#xff0c;外汇&#xff0c;期货&#xff0c;宏观经济&#xff0c;基金&#xff0c;银行…

JDK 动态代理(Spring AOP 的原理)(面试重点)

代理模式 也叫委托模式.定义&#xff1a;为其他对象提供⼀种代理以控制对这个对象的访问.它的作⽤就是通过提供⼀个代理类,让我们 在调⽤⽬标⽅法的时候,不再是直接对⽬标⽅法进⾏调⽤,⽽是通过代理类间接调⽤&#xff0c;在某些情况下,⼀个对象不适合或者不能直接引⽤另⼀个对…

Stream toList不能滥用以及与collect(Collectors.toList())的区别

Stream toList()返回的是只读List原则上不可修改&#xff0c;collect(Collectors.toList())默认返回的是ArrayList,可以增删改查 1. 背景 在公司看到开发环境突然发现了UnsupportedOperationException 报错&#xff0c;想到了不是自己throw的应该就是操作collection不当。 发…

Jetbrains Writerside 使用教程

系列文章目录 前言 一、入门 Writerside 是基于 IntelliJ 平台的 JetBrains 集成开发环境。使用它可以编写、构建、测试和发布技术文档。 如果你想将 Writerside 作为另一个 JetBrains IDE 的插件&#xff0c;请参阅 Writerside 作为插件。 1.1 安装 Writerside&#xfeff;…

vue路由-全局前置守卫

1. 介绍 详见&#xff1a;全局前置守卫网址 使用场景&#xff1a; 对于支付页&#xff0c;订单页等&#xff0c;必须是登录的用户才能访问的&#xff0c;游客不能进入该页面&#xff0c;需要做拦截处理&#xff0c;跳转到登录页面 全局前置守卫的原理&#xff1a; 全局前置…

QT+opencv源码编译

时间记录&#xff1a;2024/1/20 一、版本介绍 QT5.12.7cmake3.22.0opencv4.5.4 二、编译步骤 &#xff08;1&#xff09;下载opencv源码&#xff0c;然后安装&#xff0c;opencv的安装即对源码的解压过程&#xff0c;解压后的文件目录如下 &#xff08;2&#xff09;openc…