当前位置: 首页 > 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; 第七章 …...

arcgis怎么选取某个指定区域地方的数据,比如从全国乡镇数据选取长沙市乡镇数据

一共5个步骤&#xff0c;没一句废话&#xff0c;耐心看完。看完你就会在任何软件选取指定范围的数据了。 一、如图&#xff0c;先将数据加载到arcgis里面&#xff0c;我们要选取里面长沙市的范围数据。 二、选取长沙市的语句 “市” like ‘长沙%’ 切记&#xff0c;切记&…...

二、链表(1)

203.移除链表元素 创建一个虚拟哨兵头节点&#xff0c;就不用考虑原本头结点要不要删除 # Definition for singly-linked list. # class ListNode: # def __init__(self, val0, nextNone): # self.val val # self.next next class Solution:def remove…...

KAFKA搭建教程

KAFKA搭建教程 期待您的关注 KAFKA学习笔记 帮助更多人 目录 KAFKA搭建教程 1.下载Kafka并解压 2.添加环境变量 3.修改 server.properties 文件 4.将kafka复制到其它节点 5.修改node1、node2节点的broker.id 6.将master的环境变量同步到node1、 node2 7.启动zookeeper…...

Linux网络——套接字与UdpServer

目录 一、socket 编程接口 1.1 sockaddr 结构 1.2 socket 常见API 二、封装 InetAddr 三、网络字节序 四、封装通用 UdpServer 服务端 4.1 整体框架 4.2 类的初始化 4.2.1 socket 4.2.2 bind 4.2.3 创建流式套接字 4.2.4 填充结构体 4.3 服务器的运行 4.3.1 rec…...

SpringBoot源码深度解析

今天&#xff0c;聊聊SpringBoot的源码&#xff0c;本博客聊的版本为v2.0.3.RELEASE。目前SpringBoot的最新版为v3.3.2&#xff0c;可能目前有些公司使用的SpringBoot版本高于我这个版本。但是没关系&#xff0c;因为版本越新&#xff0c;新增的功能越多&#xff0c;反而对Spri…...

【Qt】常用控件

文章目录 QWidgetenabledgeometrywindow framewindowTitlewindowIconqrc资源管理windowOpacitycursorfonttoolTipfocusPolicystyleSheet 按钮类PushButtonRadioButtonCheckBoxSignals 显示类LabelLCDNumberProgressBarCalendar 输入类LineEditTextEditComboBoxSpinBoxDateTimeE…...

electron 主进程和渲染进程通信

在Electron中,主进程(main process)和渲染进程(renderer process)之间的通信是非常重要的,因为Electron应用通常会将用户界面(由Web技术如HTML, CSS, 和JavaScript构建)和原生功能(如系统对话框、文件I/O等)分开处理。主进程管理应用的生命周期和创建渲染进程,而渲染…...

【ARM】MDK-解决CMSIS_DAP.DLL missing报错

【更多软件使用问题请点击亿道电子官方网站】 1、 文档目标 记录解决CMSIS_DAP.DLL missing的报错情况&#xff0c;对应相关报错信息&#xff0c;供后续客户参考&#xff0c;快速解决客户问题。 2、 问题场景 客户进行硬件调试时&#xff0c;发现Target设置内有CMSIS_DAP.DL…...

CSS 的环境变量函数env()

在CSS中&#xff0c;env() 函数并不是传统意义上的“环境变量”函数&#xff0c;如你在编程语言中可能遇到的那样。相反&#xff0c;env() 是CSS中的一个函数&#xff0c;它用于访问由宿主环境&#xff08;如浏览器&#xff09;提供给CSS的自定义属性&#xff08;也称为环境变量…...

数学建模--国赛备赛---TOPSIS算法

目录 1.准备部分 1.1提交材料 1.2MD5码相关要求 2.TOPSIS算法 2.1算法概述 2.2基本概念 2.3算法核心思想 2.4拓展思考 3.适用赛题 3.1适用赛题说明 3.2适用赛题举例 4.赛题分析 4.1指标的分类 4.2数据预处理 4.2.1区间型属性的变换 4.2.2向量规范化 4.3数据加…...

殡葬网站建设/whois查询

JEPF软件快速开发平台学习心得之请假单功能的完成&#xff08;一&#xff09;首先我也是点一次接触这个软件快速开发平台&#xff0c;我在学习这个平台的同时简单记录下我对这个平台是如何一步步熟悉或者是上手的&#xff0c;也有简单的一点总结和学习心得&#xff0c;希望对你…...

创业做招商加盟类网站赚钱/黄山网站seo

制作帮助文档页面不是随便点击几个按钮并且将其实现到现有网站那么容易&#xff0c;实际上&#xff0c;就像是建立了一个全新到网站&#xff0c;只是将它集成到了你现有的网站中&#xff0c;需要从各个方面去考虑怎么制作。它是网站的一部分&#xff0c;客户每次有一些关于公司…...

云虚拟主机 wordpress/郑州seo优化阿亮

转载自&#xff1a; 用 jQuery 和 Bootstrap 在 WordPress 中添加进度条 - 丘壑博客​bestscreenshot.com需求昨天整理了一下Genesis的系列教程的翻译进度&#xff0c;汇总成了一个页面 神级 WordPress 主题框架 Genesis 从入门到精通 。 今天突然想放一个进度条&#xff0c;可…...

电脑制作网站总么做/网站功能开发

做项目时遇到使用若依框架生成代码时&#xff0c;发现生成页面中下拉框属性有值时无法回显到页面上&#xff0c;并且在rules里面添加required信息&#xff0c;无法完成校验&#xff0c;页面也不显示红星。排查发现是代码生成时漏掉了prop属性绑定。 添加对应prop属性 <el-fo…...

涿州住房和城乡建设局网站/关键词的优化和推广

上一篇文章分享了相机的自动对焦&#xff0c;了解了应该如何去选择对焦区域对焦点和如何使用相机的自动对焦模式。今天&#xff0c;要分享的是不少摄影者想要知道的问题&#xff1a;拍摄时&#xff0c;相机应该优先选择自动对焦&#xff0c;还是手动对焦&#xff1f;手动对焦上…...

上海cms模板建站/销售策略和营销策略

所谓隔代通信就是A 与C的通信 A -> B -> C代码实例 A.vue <template><div id"app"><!-- 此处监听了事件&#xff0c;可以在C组件中直接触发 --><b-childnameToB"nameToB" nameToC"nameToC" buttonClick"butto…...