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的环境搭建完成。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【第四节】C/C++数据结构之树与二叉树

目录 一、基本概念与术语 二、树的ADT 三、二叉树的定义和术语 四、平衡二叉树 4.1 解释 4.2 相关经典操作 4.3 代码展示 一、基本概念与术语 树(Tree)是由一个或多个结点组成的有限集合T。其中: 1 有一个特定的结点,称为该树的根(root)结点; 2 …

GPT-4o:突出优势 和 应用场景

还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,ech…

centos官方yum源不可用 解决方案(随手记)

昨天用yum安装软件的时候,就报错了 [rootop01 ~]# yum install -y net-tools CentOS Stream 8 - AppStream 73 B/s | 38 B 00:00 Error: Failed to download metadata for repo appstream: Cannot prepare internal mirrorlis…

从零开始:疾控中心实验室装修攻略,让你的实验室一步到位!

在当今充满挑战和变化的世界中,疾病的控制和预防成为了人类生存与发展的重要课题。而疾控中心作为防控疾病的核心机构,其疾控中心实验室设计建设显得尤为重要。下面广州实验室装修公司小编将分享疾控中心实验室设计建设方案,为疾病防控工作提…

“冻干”凭什么好吃不肥喵?既能当零食又可做主食的冻干分享

近年来,冻干猫粮因其高品质而备受喜爱,吸引了无数猫主人的目光,像我这样的资深养猫人早已开始选择冻干喂养。但新手养猫的人,可能会感到迷茫:冻干猫粮到底是什么?冻干可以一直当主食喂吗? 一、…

TqdmWarning: IProgress not found. Please update jupyter and ipywidgets.

jupyter notebook报错 在pycharm的terminal中 安装完成后就不会再报错了

缓存方法返回值

1. 业务需求 前端用户查询数据时,数据查询缓慢耗费时间; 基于缓存中间件实现缓存方法返回值:实现流程用户第一次查询时在数据库查询,并将查询的返回值存储在缓存中间件中,在缓存有效期内前端用户再次查询时,从缓存中间件缓存获取 2. 基于Redis实现 参考1 2.1 简单实现 引入…

电源小白入门学习10——浪涌、防浪涌器件、浪涌保护芯片

浪涌、防浪涌器件、浪涌保护芯片 浪涌浪涌保护器件的分类与原理保险丝TVS二极管新防护电路 浪涌 浪涌,相信不少学习过电子的同学或多或少都通过这个词,但是到底什么是浪涌呢,GPT给我的答案是这样的: 浪涌,也称为瞬态…

MS21112S单通道 LVDS 差分线路接收器

MS21112S 是一款单通道低压差分信号 (LVDS) 线 路接收器。在输入共模电压范围内,差分接收器可以 将 100mV 的差分输入电压转换成有效的逻辑输出。 该芯片可应用于 100Ω 的受控阻抗介质上,进行点对 点基带数据传输。传输介质可以是印刷电路板、…

分水岭算法分割和霍夫变换识别图像中的硬币

首先解释一下第一种分水岭算法: 一、分水岭算法 分水岭算法是一种基于拓扑学的图像分割技术,广泛应用于图像处理和计算机视觉领域。它将图像视为一个拓扑表面,其中亮度值代表高度。算法的目标是通过模拟雨水从山顶流到山谷的过程&#xff0…

数据库存储过程和锁机制

存储过程 存储过程是事先经过编译并存储在数据库中的一段SQL语句的集合,调用存储过程可以简化应用开发人员的很多工作,减少数据在数据库和应用服务器之间的传输,对于提高数据处理的效率是有好处的,存储过程思想上很简单,就是数据库SQL语言层面的代码封装与有重用 …

【动态规划-BM69 把数字翻译成字符串】

题目 BM69 把数字翻译成字符串 描述 有一种将字母编码成数字的方式:‘a’->1, ‘b->2’, … , ‘z->26’。 现在给一串数字,返回有多少种可能的译码结果 分析 特判一个‘0’的情况 后面可以用动态规划: dp[n]为考虑前n个字符时&…

VMware虚拟机与MobaXterm建立远程连接失败

VMware虚拟机与MobaXterm建立远程连接失败 首先可以检查一下是不是虚拟机的ssh服务并不存在 解决方法: 1.更新镜像源 yum -y update 这个过程会有点久,请耐心等待 2.安装ssh yum install openssh-server 3.启动ssh systemctl restart sshd 4.查…

计算机毕业设计基于YOLOv8的头盔检测系统

1、安装Anaconda 官网下载或者哔哩哔哩有的up分享 https://www.anaconda.com/download 版本无所谓,安装位置不要有中文就行 2、创建环境yolov8 winR打开命令行 conda create -n yolov8 python3.9 3、打开源码 下载下来放到你想放的目录,直接用pyCharm或者…

NSSCTF CRYPTO MISC题解(一)

陇剑杯 2021刷题记录_[陇剑杯 2021]签到-CSDN博客 [陇剑杯 2021]签到 下载附件压缩包,解压后得到 后缀为.pcpang,为流量包,流量分析,使用wireshark打开 {NSSCTF} [陇剑杯 2021]签到 详解-CSDN博客 选择统计里面的协议分级 发现流…

go语言接口之接口值

概念上讲一个接口的值,接口值,由两个部分组成,一个具体的类型和那个类型的值。它们 被称为接口的动态类型和动态值。对于像Go语言这种静态类型的语言,类型是编译期的概 念;因此一个类型不是一个值。在我们的概念模型中…

DexCap——斯坦福李飞飞团队泡茶机器人:更好数据收集系统的原理解析、源码剖析

前言 2023年7月,我司组建大模型项目开发团队,从最开始的论文审稿,演变成目前的两大赋能方向 大模型应用方面,以微调和RAG为代表 除了论文审稿微调之外,目前我司内部正在逐一开发论文翻译、论文对话、论文idea提炼、论…

男士内裤怎么选?五款不能错过的超舒适男士内裤

在快节奏的现代都市生活中,男士们同样需要关注内在穿搭的品质与舒适度。一条优质贴身的男士内裤,不仅是日常穿着的舒适保障,更是展现男性精致品味的秘密武器。今天,就让我们一同探讨如何挑选出最适合自己的男士内裤,并…

劝大家:打个工而已,千万不要太老实,上周,我们单位一位兢兢业业,工作了20年的老员工,被公司辞退了...

学习资源已打包,需要的小伙伴可以戳这里 学习资料 在当今社会,职场竞争激烈,每个人都在努力工作,追求自己的目标。然而,随着工作经验的积累和观察的深入,我发现了一些工作中的现象,希望通过本文…

Asp .Net Core 系列:详解鉴权(身份验证)以及实现 Cookie、JWT、自定义三种鉴权 (含源码解析)

什么是鉴权(身份验证)? https://learn.microsoft.com/zh-cn/aspnet/core/security/authentication/?viewaspnetcore-8.0 定义 鉴权,又称身份验证,是确定用户身份的过程。它验证用户提供的凭据(如用户名和…