TypeScript环境安装与VScode编辑器的使用

说明大背景环境,我用的是window10系统。

1.安装node.js 。

去官网下载安装包。

虽然我去的是官网,但是不知为何下载了个不知名的东西,后来又找了个链接才下载正确了。

实际上就是一个.msi的文件。我用的版本:node-v18.19.0-x64。避免你掉坑我直接放个链接吧:

https://download.csdn.net/download/alayeshi/89408377

然后直接进行安装,安装完成后去CMD里敲个:node -v 如果能看到版本号说明安装成功了,

再敲个:npm -v 依然能看到版本号说明彻底成功了。如下图:

2.下载VS code编辑器,

之后在编辑器里安装插件 prettier- code fomatter

3.安装typescript

在VScode编辑器里,终端--新建终端

然后看到下方终端页面,输入:npm install typescript -g

安装成功后,测试进行编译。

要测试首先得会使用VSCODE编辑器。下面就讲如何使用编辑器新建TS文件。

4.如何使用VS code编辑器

首先新建一个文件夹在硬盘里,作为一个项目,比如我在桌面新建一个文件夹,名叫:vscode;

在VScode编辑器里选择 文件--打开文件夹 ,找到刚建的文件夹名

5.新建的TS脚本

命名为:helloworld

在打开的编辑器中选择新建文件的图标按钮进行新建文件,可以看得出新建的文件是没有名字的也没有类型,这时候点击右侧的选择语言,会弹出一个面板,面板里有很多语言可供选择,选择TS的语言即可。

代码内容如下:

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

6.运行TS代码:

在下面终端界面敲命令:node helloworld.ts

然后发现报错了,因为TS不能直接在浏览器和node环境下运行。

想要正常运行该代码,需要再次敲命令:tsc helloworld.ts

然后发现生成了一个JS的文件。

这下就可以敲命令:node helloworld.js  进行运行了。毕竟是JS了肯定是可以运行了,果然是可以输出log的,代码中的log内容是123,没问题.

7.简便的运行方式,安装ts-node

不用每次运行js后再运行ts,安装ts-node,方法如下:npm i -g ts-node

安装完成后。

修改log内容后再次运行,

这次的命令是ts的了,不再使用js,

命令:ts-node helloworld.ts

可以看出log发生了变化

至此TS的环境搭建完成。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/23961.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

最大矩形问题

柱状图中最大的矩形 题目 分析 矩形的面积等于宽乘以高,因此只要能确定每个矩形的宽和高,就能计算它的面积。如果直方图中一个矩形从下标为 i 的柱子开始,到下标为 j 的柱子结束,那么这两根柱子之间的矩形(含两端的柱…

能把试卷上的字消除的软件有哪些?推荐三款好用的

能把试卷上的字消除的软件有哪些?在数字化时代,我们越来越依赖科技手段来解决生活中的各种问题。其中,试卷上的字消除问题,就是一个备受关注的痛点。幸运的是,现在市面上已经出现了多款能够轻松消除试卷上字迹的软件&a…

力扣hot100:295. 数据流的中位数(两个优先队列维护中位数)

LeetCode:295. 数据流的中位数 这个题目最快的解法应该是维护中位数,每插入一个数都能快速得到一个中位数。 根据数据范围,我们应当实现一个 O ( n l o g n ) O(nlogn) O(nlogn)的算法。 1、超时—插入排序 使用数组存储,维持数…

【WEB自动化面试02--学习过程的问题及解决】

day01 1、报错获取不到浏览器二进制文件:需要指定浏览器路径及驱动路径。 第一次使用谷歌浏览器驱动,找不到二进制文件报错: selenium.common.exceptions.WebDriverException: Message: unknown error: cannot find Chrome binary Stacktra…

短视频矩阵源码----如何做正规开发规则分享:

一、什么是SaaS化服务技术开发? (短视频矩阵系统是源头开发的应该分为3个端口---- 总后台控制端、总代理端口,总商户后台) SaaS是软件即服务(Software as a Service)的缩写。它是一种通过互联网提供软件应…

Vue2(0基础入门)

环境准备 安装脚手架 vuecli: npm install -g vue/clivite: npm init vuelatest-g 全局安装,任意目录都可以使用vue脚本 进入目录创建项目: 在目录的终端输入:vue ui安装devtool(这个网页是安装好了自动跳转的) 运行项目: …

代码随想录第27天|贪心算法part1

455.分发饼干 先给孩子和饼干排序&#xff0c;每次选取一个最大的饼干给一个最大胃口的孩子&#xff0c;直到饼干分完或者遍历完孩子 class Solution { public:int findContentChildren(vector<int>& g, vector<int>& s) {sort(g.begin(), g.end());sort(…

Vue3【三】 使用TS自己编写APP组件

Vue3【三】 使用TS自己编写APP组件 运行截图 目录结构 注意目录层级 文件源码 APP.vue <template><div class"app"><h1>你好世界!</h1></div> </template><script lang"ts"> export default {name:App //组…

JavaScript的核心语法

JavaScript JavaScript&#xff1a;JavaScript的组成&#xff1a;核心语法&#xff1a;Hello&#xff1a;变量&#xff1a;JS的基本数据类型&#xff1a;特殊点&#xff1a; 数组&#xff1a;流程控制语句&#xff1a;函数&#xff1a;函数的重载&#xff1a;函数的递归:预定义…

离散数学答疑 3

&#xff5e;A&#xff1a;A的补集 有时候空集是元素&#xff0c;有时候就是纯粹的空集 A-B的定义&#xff1a; 笛卡尔积&#xff1a; 求等价关系&#xff1a;先求划分再一一列举 不同划分&#xff1a;分几块。一块&#xff1a;两块&#xff1a;三块&#xff1a;分别计算 Ix是…

自然语言处理(NLP)—— 主题建模

1. 主题建模的概念 主题建模&#xff08;Topic Modeling&#xff09;是一种用于发现文档集合&#xff08;语料库&#xff09;中的主题&#xff08;或称为主题、议题、概念&#xff09;的统计模型。在自然语言处理和文本挖掘领域&#xff0c;主题建模是理解和提取大量文本数据隐…

「动态规划」如何求最小路径和?

64. 最小路径和https://leetcode.cn/problems/minimum-path-sum/description/ 给定一个包含非负整数的m x n网格grid&#xff0c;请找出一条从左上角到右下角的路径&#xff0c;使得路径上的数字总和为最小。说明&#xff1a;每次只能向下或者向右移动一步。 输入&#xff1a;…

ctfshow-web入门-命令执行(web37-web40)

目录 1、web37 2、web38 3、web39 4、web40 命令执行&#xff0c;需要严格的过滤 1、web37 使用 php 伪协议&#xff1a; ?cphp://input post 写入我们希望执行的 php 代码&#xff1a; <?php system(tac f*);?> 拿到 flag&#xff1a;ctfshow{5c555d9a-6f55…

EXCEL多sheet添加目录跳转

EXCEL多sheet添加目录跳转 背景 excel中有几十个sheet&#xff0c;点下方左右切换sheet太耗时&#xff0c;希望可以有根据sheet名超链接跳转相应sheet&#xff0c;处理完后再跳回原sheet。 方案一 新建目录sheet&#xff0c;在A1写sheet名&#xff0c;右键选择最下方超链接…

问题:材料题请点击右侧查看材料问题 查看材料 #学习方法#经验分享#学习方法

问题&#xff1a;材料题请点击右侧查看材料问题 查看材料 A.Colleges may reduce their enrollment. B.Top universities become increasingly competitive. C.Universities become selective in student admission. D.Colleges invest less in academy and infrastructure…

el-input中change事件造成的坑

el-input中change事件造成的坑 一、change事件定义二、如果仅回车时候触发 一、change事件定义 仅在输入框失去焦点或用户按下回车时触发 二、如果仅回车时候触发 <el-inputv-model.trim"questionInput"placeholder"请输入你的问题&#xff0c;按回车发送&…

智慧视觉怎么识别视频?智慧机器视觉是通过什么步骤识别视频的?

智慧视觉功能怎么识别视频&#xff1f;智慧视觉是搭载在智能设备比如手机、AI盒子、机器视觉系统上的一个应用程序或特性&#xff0c;采用计算机视觉和人工智能的技术来识别图像或视频中的内容。如果想了解视频识别&#xff0c;就要明白智慧视觉功能会涉及的以下几个关键步骤和…

pxe自动装机

概念 pxe是c/s模式。允许客户端通过网络从远程服务器&#xff08;服务端&#xff09;下载引导镜像&#xff0c;加载安装文件&#xff0c;实现自动化安装操作系统。 无人值守&#xff1a;安装选项不需要人为干预&#xff0c;可以自动化实现。 pxe的优点&#xff1a;1.规模化&…

机器人阻抗控制中的机械阻抗模型

机器人阻抗控制中的机械阻抗模型主要涉及到通过修改机器人与环境接触作业的动力学模型&#xff0c;使其等效为一个期望的阻抗&#xff08;弹簧-质量-阻尼&#xff09;模型。以下是对机械阻抗模型在机器人阻抗控制中的详细解释&#xff1a; 阻抗控制原理&#xff1a; 机器人阻抗…

Python——泰坦尼克号数据分析

目录 🧾1.数据集(部分数据) ✏️ 2、导入数据集与必要模块 ⌨️ 3.数据预处理 1️⃣ isnull函数查看有无缺失值 2️⃣fillna函数填充缺失值 📍 Age字段使用平均值填充缺失值 📍 Embarked字段填充缺失值 3️⃣ 删除缺失值较多的字段 📊 4.数据可视化 1️⃣ di…