当前位置: 首页 > news >正文

从安装Node到TypeScript到VsCode的配置教程

从安装Node到TypeScript到VsCode的配置教程


1.下载Node安装包, 链接
在这里插入图片描述
2.双击安装包,选择安装路径,如下:
在这里插入图片描述
3.一直点击下一步,直至安装结束即可:
在这里插入图片描述
这个时候,node会默认配置好环境变量,并且可以在命令行中检查安装的版本以及npm的版本,如下图:
在这里插入图片描述
在这里插入图片描述
4.下载安装VsCode, 链接,下载后安装,一路默认选项即可,如下图:
在这里插入图片描述
在这里插入图片描述

5.安装VsCode中文简体语言包,如下:
在这里插入图片描述
安装完成后,重启VsCode后就可以将语言切换成中文了。
在这里插入图片描述
6.安装TypeScript,打开VsCode,打开终端,如下:
首先给npm设置资源安装库的地址,如下:
地址一:https://registry.npm.taobao.org/typescript
地址二:https://registry.npmmirror.com
如果使用该地址报了以下错误:

npm error request to https://registry.npm.taobao.org/typescript failed, reason: certificate has expired

则需要切换别的库地址,命令如下:

设置:npm config set registry https://registry.npmmirror.com
查看:npm config get registry

安装TypeScript,命令如下:

npm install typescript -g

安装完成后,查看ts安装版本报错,如下:
在这里插入图片描述
处理起来也很简单,找到windows power shell,以管理员身份打开,输入以下命令:

set-ExecutionPolicy Remotesigned

如下图:
在这里插入图片描述
在这里插入图片描述
测试一下,创建一个HelloWord.ts,代码如下:

interface Poit {x: number;y: number;}function tsDemo(data: Poit) {console.log('123');return data.x + data.y;}tsDemo({ x: 1, y: 2 });

此时需要安装 ts-node,命令如下:

npm i -g ts-node
然后在VsCode终端中输入以下命令运行HelloWord.ts,如下:

ts-node HelloWord.ts

输出结果为:123
在这里插入图片描述
插播一下,如果操作了上述还不行的话,那就得去查看一下node的这两个文件夹安装在了哪里,如下:
在这里插入图片描述
找到这个路径,如下:

D:\Program Files\nodejs\node_global
D:\Program Files\nodejs\node_cahce

将以上两个路径配置到环境变量中即可,当然需要给用户级别的和系统级别的Path都要配置,如下:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

7.接着给VsCode安装yarn,如下:

npm install -g yarn

安装成功后,在终端编译项目时可能会报错,如下:

yarn serve

在这里插入图片描述
此时可以看出,是webpack没有安装,使用如下命令:

npm install webpack -g
yarn add -D webpack-cli //webpack-cli 脚手架

安装完成后再执行 yarn serve就可以正常编译项目代码了,如下:
在这里插入图片描述
结束。

相关文章:

从安装Node到TypeScript到VsCode的配置教程

从安装Node到TypeScript到VsCode的配置教程 1.下载Node安装包, 链接 2.双击安装包,选择安装路径,如下: 3.一直点击下一步,直至安装结束即可: 这个时候,node会默认配置好环境变量,并且…...

Jackson详解

文章目录 一、Jackson介绍二、基础序列化和反序列化1、快速入门2、序列化API3、反序列化API4、常用配置 三、常用注解1、JsonProperty2、JsonAlias3、JsonIgnore4、JsonIgnoreProperties5、JsonFormat6、JsonPropertyOrder 四、高级特性1、处理泛型1.1、反序列化List泛型1.2、反…...

【算法】字符串

快乐的流畅:个人主页 个人专栏:《算法神殿》《数据结构世界》《进击的C》 远方有一堆篝火,在为久候之人燃烧! 文章目录 引言一、最长公共前缀二、最长回文子串三、二进制求和四、字符串相乘 引言 字符串题,大多数是模…...

Python酷库之旅-第三方库Pandas(037)

目录 一、用法精讲 116、pandas.Series.div方法 116-1、语法 116-2、参数 116-3、功能 116-4、返回值 116-5、说明 116-6、用法 116-6-1、数据准备 116-6-2、代码示例 116-6-3、结果输出 117、pandas.Series.truediv方法 117-1、语法 117-2、参数 117-3、功能 …...

iOS 左滑返回事件的控制

0x00 视图结构 1-根视图 1.1-控制器A 1.1.1-控制器B 1.1.1.1-控制器C 0x01 控制 通过设置 self.navigationController.interactivePopGestureRecognizer.enabled 为 YES 或 NO 来控制当面界面,是否能左滑返回 在 控制器B 的生命周期方法内,设置属性 s…...

= null 和 is null;SQL中关于NULL处理的4个陷阱;三值逻辑

一、概述 1、NULL参与的所有的比较和算术运算符(>,,<,<>,<,>,,-,*,/) 结果为unknown&#xff1b; 2、unknown的逻辑运算(AND、OR、NOT&#xff09;遵循三值运算的真值表&#xff1b; 3、如果运算结果直接返回用户&#xff0c;使用NULL来标识unknown 4、如…...

拖拽上传(预览图片)

需求 点击上传图片&#xff0c;或直接拖拽图片到红色方框里面也可上传图片&#xff0c;上传后预览图片 效果 实现 <!DOCTYPE html> <html lang"zh-cn"><head><meta charset"UTF-8"><meta name"viewport" content&…...

Oracle 12c新特性 In-Memory Column Store

Oracle 12c引入了一项重要的特性——In-Memory Column Store&#xff08;简称IM或In-Memory&#xff09;&#xff0c;这一特性极大地提升了数据库在处理分析型查询时的性能。以下是关于Oracle 12c In-Memory特性的详细介绍&#xff1a; 一、基本概念 In-Memory Column Store&…...

【数据结构】二叉树———Lesson2

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f4a5;&#x1f4a5;个人主页&#xff1a;奋斗的小羊 &#x1f4a5;&#x1f4a5;所属专栏&#xff1a;C语言 &#x1f680;本系列文章为个人学习…...

mongodb数据导出与导入

一、先去检查mongodump mongodump --version 如果报 mongodump version: built-without-version-string 或者其他的较老的版本&#xff0c;直接去下载最新的【传送门】 【以Ubuntu18.04为例】 安装工具 假设你下载的是 .tgz 文件&#xff08;适用于 Linux 系统&#xff09;&am…...

电路学习——经典运放电路之滞回比较器(施密特触发器)(2024.07.18)

参考链接1: 电子设计教程29&#xff1a;滞回比较器&#xff08;施密特触发器&#xff09; 参考链接2: 滞回比较器电路详细分析 参考链接3: 比较器精髓&#xff1a;施密特触发器&#xff0c;正反馈的妙用 参考链接4: 比较器反馈电阻选多大&#xff1f;理解滞后效应&#xff0c;轻…...

NVIDIA Container Toolkit 安装与配置帮助文档(Ubuntu,Docker)

NVIDIA Container Toolkit 安装与配置帮助文档(Ubuntu,Docker) 本文档详细介绍了在 Ubuntu Server 22.04 上使用 Docker 安装和配置 NVIDIA Container Toolkit 的过程。 概述 NVIDIA 容器工具包使用户能够构建和运行 GPU 加速容器。即可以在容器中使用NVIDIA显卡。 架构图如…...

JavaWeb day01-HTML入门

Web前端 课程安排 HTML、CSS简介 HTML快速入门 实现标题排版 新闻标题样式...

驱动框架——CMSIS第一部分 RTE驱动框架介绍

一、介绍CMISIS 什么是CMSIS&#xff08;cortex microcontrol software interface standard一种软件标准接口&#xff09;&#xff0c;官网地址&#xff1a;https://arm-software.github.io/CMSIS_6/latest/General/index.html 包含的core、driver、RTOS、dsp、nn等部分&…...

Debezium日常分享系列之:Debezium2.7版本PostgreSQL数据库连接器

Debezium日常分享系列之:Debezium2.7版本PostgreSQL数据库连接器 一、概述二、连接器的工作原理安全快照初始快照的默认工作流程行为临时快照触发临时增量快照触发临时阻塞快照增量快照增量快照流程Debezium 如何解决具有相同主键的记录之间的冲突快照窗口触发增量快照具有附加…...

保障信息系统安全保护等级调整期间的安全性

保障信息系统安全保护等级调整期间的安全性&#xff1a; 策略与实践 在当今数字化时代&#xff0c;信息系统已成为企业和组织运营的核心支撑。为了适应不断变化的业务需求和安全威胁环境&#xff0c;信息系统安全保护等级的调整成为必要之举。然而&#xff0c;这一调整过程可能…...

实战:shell编程之全量命令练习

概叙 槽点~~~~~~~&#xff01; 往期shell相关文章回顾&#xff0c;有兴趣的可以自行阅读和练习。 科普文&#xff1a;一文搞懂Vim-CSDN博客 科普文&#xff1a;jvm笔记-CSDN博客 科普文&#xff1a;一天学会shell编程-CSDN博客 科普文&#xff1a;Linux服务器巡检小结_lin…...

在 CentOS 7 上编译安装 Python 3.11

安装必要的依赖 首先&#xff0c;你需要安装一些开发工具和库&#xff0c;以便编译 Python 和 OpenSSL&#xff1a; yum -y groupinstall "Development tools" yum install -y wget gcc-c pcre pcre-devel zlib zlib-devel libffi-devel zlib1g-dev openssl-devel …...

Qt 4.8.7 + MSVC 中文乱码问题深入分析

此问题很常见&#xff0c;然而网上关于此问题的分析大多不够深刻&#xff0c;甚至有错误&#xff1b;加之Qt5又更改了一些编码策略&#xff0c;而很多文章并未提及版本问题&#xff0c;或是就算提了&#xff0c;读者也不重视。这些因素很容易让读者产生误导。今日我彻底研究透了…...

IDEA的常见代码模板的使用

《IDEA破解、配置、使用技巧与实战教程》系列文章目录 第一章 IDEA破解与HelloWorld的实战编写 第二章 IDEA的详细设置 第三章 IDEA的工程与模块管理 第四章 IDEA的常见代码模板的使用 第五章 IDEA中常用的快捷键 第六章 IDEA的断点调试&#xff08;Debug&#xff09; 第七章 …...

Gemini提示词反推教程!“图生图”来了

看到一张心仪的室内设计图&#xff0c;却不知道如何描述它的高级美&#xff1f; 其实&#xff0c;每一张令人惊艳的图片背后&#xff0c;都有一套隐藏的代码。今天&#xff0c;我们要分享一套“保姆级”教程&#xff1a;利用 MetaChat 平台上的 Gemini 3.1 Pro 充当你的私人审美…...

Windows下OpenClaw安装指南:对接ollama GLM-4.7-Flash模型

Windows下OpenClaw安装指南&#xff1a;对接ollama GLM-4.7-Flash模型 1. 为什么选择OpenClaw GLM-4.7-Flash组合 作为一个长期在Windows环境下折腾AI工具的开发者&#xff0c;我一直在寻找一个既能保持本地数据隐私&#xff0c;又能灵活对接各类开源模型的自动化框架。Open…...

OpenClaw异常处理:配置nanobot自动重试失败任务

OpenClaw异常处理&#xff1a;配置nanobot自动重试失败任务 1. 为什么需要自动重试机制 上周我让OpenClaw执行一个简单的夜间数据收集任务时&#xff0c;遇到了一个令人头疼的问题。凌晨3点&#xff0c;网络突然波动导致任务中断&#xff0c;而当我早上打开电脑时&#xff0c…...

Offline-First数据同步策略:解决网络中断的智能方案

Offline-First数据同步策略&#xff1a;解决网络中断的智能方案 【免费下载链接】offline-first :electric_plug: Everything you need to know to create offline-first web apps. 项目地址: https://gitcode.com/gh_mirrors/of/offline-first 在当今移动优先的时代&am…...

OpenClaw自动化测试:Qwen3.5-9B执行Python脚本与结果校验

OpenClaw自动化测试&#xff1a;Qwen3.5-9B执行Python脚本与结果校验 1. 为什么选择OpenClaw做自动化测试&#xff1f; 去年接手一个数据清洗工具链项目时&#xff0c;我遇到了一个典型痛点&#xff1a;每次代码更新后&#xff0c;都需要手动执行十几个测试用例&#xff0c;比…...

OpenClaw跨平台脚本:nanobot统一管理mac与Windows文件

OpenClaw跨平台脚本&#xff1a;nanobot统一管理mac与Windows文件 1. 为什么需要跨平台文件管理 在日常工作中&#xff0c;我经常需要在macOS和Windows双系统间切换。最让我头疼的就是文件路径的兼容性问题——macOS使用正斜杠/而Windows使用反斜杠\。每次写脚本都要为不同平…...

银河麒麟V4.0.2-sp4服务器到手后,这三步网络配置(IP/DNS/源)一个都不能少

银河麒麟V4.0.2-sp4服务器网络配置实战指南&#xff1a;从零搭建稳定运行环境 刚拿到一台预装银河麒麟V4.0.2-sp4操作系统的服务器时&#xff0c;许多运维工程师常会陷入"有设备却用不起来"的困境——无法远程连接、软件包安装失败、系统更新卡壳&#xff0c;这些问题…...

wflow工作流设计器:5分钟快速上手的企业流程自动化完整指南

wflow工作流设计器&#xff1a;5分钟快速上手的企业流程自动化完整指南 【免费下载链接】wflow workflow 工作流设计器&#xff0c;企业OA流程设计。表单流程设计界面操作超级简单&#xff01;&#xff01;普通用户也能分分钟上手&#xff0c;不需要专业知识。本设计器支持可视…...

【专栏二:深度学习】-【一张图讲清楚:什么是向前传输和向后传输】

文章目录前言一、输入数据&#xff1a;训练从样本开始二、向前传播&#xff1a;模型先算出一个预测结果三、先把第一个公式讲明白&#xff1a;为什么会有 z Wx b&#xff1f;四、只有线性计算还不够&#xff0c;所以还需要激活函数1. ReLU2. Sigmoid五、预测结果&#xff1a;…...

EN50155以太网交换机的X键位M12插座在PCB板上同一高度方法

在轨道交通车载EN50155以太网交换机的PCB设计中&#xff0c;X键位M12插座&#xff08;千兆/万兆接口&#xff09;常需多个并排或阵列布局。由于X编码插座引脚数较多&#xff08;8芯&#xff09;且结构复杂&#xff0c;确保所有插座在PCB板上的同一高度&#xff08;共面性&#…...