从安装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
在这里插入图片描述
7.接着给VsCode安装yarn,如下:

npm install -g yarn

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

yarn serve

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

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

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

相关推荐

  1. 【Flutter】基础教程安装发布

    2024-07-19 06:06:04       29 阅读
  2. TypeScript深度解析:入门实践学习笔记

    2024-07-19 06:06:04       28 阅读
  3. SpringBoot 整合 Redis 全面教程配置使用

    2024-07-19 06:06:04       49 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-19 06:06:04       66 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-19 06:06:04       70 阅读
  3. 在Django里面运行非项目文件

    2024-07-19 06:06:04       57 阅读
  4. Python语言-面向对象

    2024-07-19 06:06:04       68 阅读

热门阅读

  1. 【乐吾乐2D可视化组态编辑器】生命周期

    2024-07-19 06:06:04       18 阅读
  2. SQLite 事务

    2024-07-19 06:06:04       19 阅读
  3. C++ STL partition用法

    2024-07-19 06:06:04       20 阅读
  4. Vue 3路由详解:从基础配置到高级技巧

    2024-07-19 06:06:04       19 阅读
  5. MQTT 固定报头中的剩余长度介绍

    2024-07-19 06:06:04       21 阅读
  6. uniapp自定义tabBar

    2024-07-19 06:06:04       21 阅读