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

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

Python爬虫实战:研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案

在大数据时代&#xff0c;海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构&#xff0c;在处理大规模数据抓取任务时展现出强大的能力。然而&#xff0c;随着业务规模的不断扩大和数据抓取需求的日益复杂&#xff0c;传统…...

WebRTC调研

WebRTC是什么&#xff0c;为什么&#xff0c;如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理 威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...

用 Rust 重写 Linux 内核模块实战:迈向安全内核的新篇章

用 Rust 重写 Linux 内核模块实战&#xff1a;迈向安全内核的新篇章 ​​摘要&#xff1a;​​ 操作系统内核的安全性、稳定性至关重要。传统 Linux 内核模块开发长期依赖于 C 语言&#xff0c;受限于 C 语言本身的内存安全和并发安全问题&#xff0c;开发复杂模块极易引入难以…...

Java设计模式:责任链模式

一、什么是责任链模式&#xff1f; 责任链模式&#xff08;Chain of Responsibility Pattern&#xff09; 是一种 行为型设计模式&#xff0c;它通过将请求沿着一条处理链传递&#xff0c;直到某个对象处理它为止。这种模式的核心思想是 解耦请求的发送者和接收者&#xff0c;…...

统计按位或能得到最大值的子集数目

我们先来看题目描述&#xff1a; 给你一个整数数组 nums &#xff0c;请你找出 nums 子集 按位或 可能得到的 最大值 &#xff0c;并返回按位或能得到最大值的 不同非空子集的数目 。 如果数组 a 可以由数组 b 删除一些元素&#xff08;或不删除&#xff09;得到&#xff0c;…...

CSP信奥赛C++常用系统函数汇总

# CSP信奥赛C常用系统函数汇总## 一、输入输出函数### 1. cin / cout&#xff08;<iostream>&#xff09; cpp int x; cin >> x; // 输入 cout << x << endl;// 输出 优化&#xff1a;ios::sync_with_stdio(false); 可提升速度 2. scanf() /…...