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

【TS3】搭建本地开发环境

1、安装Node.js与npm
从Node.js官网下载并安装最新LTS版本,安装完成后通过终端验证
说明:Node.js是TS的运行基础,npm用于包管理

2、安装TypeScript编译器
npm install xxx命令为本地安装,会在当前路径下创建node_modules文件夹,安装的模块都在这里。
npm install -g xxx为全局安装,安装在node.js的默认路径下。
使用npm config get prefix命令可以查看全局安装的默认路径:
可以使用npm config set prefix="xxx"命令来修改全局安装路径,这里的等号两边不能有空格,否则会出现异常。
通过命令行设置npm的全局安装路径和缓存路径:
npm config set prefix="D:/nodejs/node_global"
npm config set cache="D:/nodejs/node_cache"
如果需要使用淘宝镜像源加速下载,可以运行:
npm config set registry https://registry.npmmirror.com
主流镜像源
‌淘宝镜像‌(https://registry.npmmirror.com)
支持npm官方仓库同步,提供更快的下载速度和稳定性。 ‌
‌阿里云镜像‌(https://r.cnpmjs.org)
由阿里云提供,支持同步npm官方仓库,适合企业级用户。 ‌
‌腾讯云镜像‌(https://mirrors.cloud.tencent.com/npm/)
适用于腾讯云用户,提供稳定的下载速度。 ‌
‌华为云镜像‌(https://repo.huaweicloud.com/repository/npm/)
由华为云提供,适合国内用户,访问速度快。 ‌
其他可选方案
‌360 CDN‌(宝塔镜像)    提供丰富的npm包资源,适合网站或博客的包加载。 ‌
‌BootCDN‌(www.bootcdn.cn)
同步CDNJS数据,部分包可能无法找到。 ‌
‌临时使用‌-切换方法
安装命令:npm install [package-name] --registry=https://registry.npmmirror.com ‌
验证:npm config get registry ‌
接着,安装一些全局常用的模块
npm install -g vue-cli
npm install -g webpack
npm install -g cnpm
使用以下命令查看当前配置:
npm config list
npm config get registry

3、输入以下命令来全局安装TypeScript:
npm install -g typescript
tsc --version 或 tsc -v
若出现报错:'tsc' 不是内部或外部命令,也不是可运行的程序或批处理文件。
搜索 查看系统高级设置 点击 环境变量,
然后使用 npm config get prefix  查找npm目录
在环境变量里的系统变量新建变量名: NODE_PATH
找到用户变量和系统变量里的path, 编辑新建在末尾添加上%NODE_PATH%,确定保存。

4、设置VsCode
cmd + shift + p,输入setting
Open Workspace Settings 也会打开UI设置界面;
Open User Settings (JSON) 会打开用户设置 settings.json 文件;
参考: https://blog.csdn.net/qq_34414916/article/details/85156499
Open Workspace Settings (JSON) 会打开工作区设置 settings.json 文件
vscode存在两种设置 settings.json 的方式
User Settings 用户设置:用户级设置,该用户打开的所有vscode共用这个设置
Workspace Settings 工作区设置: 目录下.vscode 隐藏文件夹,
设置文件为.vscode/settings.json,作用于当前工作区或项目,优先级高于用户设置

5、测试HelloWord
新建app.ts文件
输入以下内容
var message:string = "Hello World" 
console.log(message)
打开命令行,进入文件所在目录
执行 tsc app.ts   生成app.js文件
执行 node app.js  输出 Hello World
若出现错误: 因为在此系统上禁止运行脚本,也就是说没有权限。
使用get-ExecutionPolicy查看权限。
输出为Restricted则说明权限不够
使用下列代码提升权限
Set-ExecutionPolicy -Scope CurrentUser
输入RemoteSigned
参考:https://blog.csdn.net/qq_43802768/article/details/124356677

http://www.dtcms.com/a/393857.html

相关文章:

  • MR、AR、VR:技术浪潮下安卓应用的未来走向
  • React搭建应用
  • NVIDIA Dynamo 推理框架
  • 校园网即点即连——校园网自动登录的思路流程
  • C# 设计模式|单例模式全攻略:从基础到高级实现与防御
  • SQL 字符串函数高频考点:LIKE 和 SUBSTRING 的区别
  • 法律文档智能分析系统:NLP+法律知识库的技术实现方案
  • Flutter_学习记录_实现商品详情页Tab点击跳转对应锚点的demo
  • 【大语言模型】作为可微分搜索索引的Transformer记忆体
  • NLP---自然语言处理
  • 多条件查询中的日期交互指南:从前端到后端的顺畅协作
  • 系分论文《论人工智能在网络安全态势感知系统中的分析与设计》
  • 【Kubernetes】(六)Service
  • Coze源码分析-资源库-删除工作流-后端源码-核心技术与总结
  • vue Ai 流试回答实现打字效果
  • 【架构】面向对象六大设计原则
  • ✅ 基于OpenCV与HyperLPR的车牌识别系统 PyQt5可视化 支持多种输入 深度学习毕业设计
  • 深度学习在计算机视觉中的最新进展:范式转变与前沿探索
  • 本地免费使用网页表格控件websheet
  • Spring Boot集成MQTT与单片机通信
  • 【Axios 】web异步请求
  • FreeRTOS实战指南 — 6 临界段保护
  • 关于CFS队列pick_next_task_fair选取下一个任务的分析
  • 【算法笔记】链表相关的题目
  • Netty从0到1系列之Recycler对象池技术【3】
  • 网页开发入门:CSS与JS基础及BS/CS架构解析
  • css单位换算及适配
  • Java制作双脑同步 Hemi-Sync 音频
  • webrtc弱网-ProbeBitrateEstimator类源码分析与算法原理
  • 在OpenHarmony上适配图形显示【4】——rk3568_4.0r_mesa3d适配