在vscode上直接运行typescript的操作方法

 更新时间:2023年12月05日 15:03:24   作者:嚣张农民  
在学习typescript的过程中发现在vscode上不能很好地的输出typescript的运行结果,需要先将typescript编译为javascript,在通过node执行js文件得到结果,这篇文章给大家介绍如何在vscode上直接运行typescript,感兴趣的朋友一起看看吧

如何在vscode上直接运行typescript

在学习typescript的过程中发现在vscode上不能很好地的输出typescript的运行结果,需要先将typescript编译为javascript,在通过node执行js文件得到结果,执行过程如下

执行准备操作
1.全局安装ts-node包

npm install ts-node -g

2.在vscode商店安装Code Runner插件
点击右上角运行按钮即可看到输出控制面板运行结果

3.解决乱码方案:
设置 > Extensions,找到 Run Code configuration,勾上 Run In Terminal选项,设置完可以支持输入及解决输出乱码问题。

补充:

使用vscode编写并运行typescript代码

1.安装vsCode

Visual Studio Code - Code Editing. Redefined

2.安装nodejs

下载 | Node.js 中文网

3.打开vscode,在vscode里面打开终端(快捷键是ctrl+~)
   查看是否成功安装node和npm:
   node -v
   npm -v
   在终端中输入如下命令并运行:
   npm install -g typescript
   检查是否成功安装(typescript)的命令:tsc -v

   运行流程:

手动编译和运行ts代码:
    1.编译  tsc 文件名(包含扩展名)
    2.运行  node 文件名(包含扩展名)

vscode 自动编译和运行ts代码:
     1.生成配置文件: tsc --init
      2.修改配置文件:tsconfig.json  ("outDir":"./js" ,“strict":false)
      3.启动监视任务 :terminal->run task...->show all task..->tsc:watch - tsconfig.json

运行:
快捷键:F5或ctrl+F5
选择: run->star debugging

参考:
typescript从入门到熟练,使用vscode编写

到此这篇关于如何在vscode上直接运行typescript的文章就介绍到这了,更多相关vscode运行typescript内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Openlayers实现长度测量的方法

    Openlayers实现长度测量的方法

    在Openlayers中,使用ol/sphere模块的getDistance函数可以计算两点间的大圆距离,绘制线路时,通过监听绘制事件和几何对象的变化,可实时更新距离,同时getLength函数帮助获取整条线路的长度,这些功能主要用于地理信息系统中的距离测量和地图制作
    2024-11-11
  • js函数的引用, 关于内存的开销

    js函数的引用, 关于内存的开销

    函数的引用, 对于内存的开销分析,需要的朋友可以参考下
    2012-09-09
  • 一款JavaScript压缩工具:X2JSCompactor

    一款JavaScript压缩工具:X2JSCompactor

    一款JavaScript压缩工具:X2JSCompactor...
    2007-06-06
  • 微信小程序实现上传多个文件 超过10个

    微信小程序实现上传多个文件 超过10个

    这篇文章主要为大家详细介绍了微信小程序实现上传多个文件,超过10个,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • JS中setTimeout()的用法详解

    JS中setTimeout()的用法详解

    setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method
    2013-04-04
  • 计算黄金分割的javascript代码

    计算黄金分割的javascript代码

    计算黄金分割的javascript代码...
    2007-07-07
  • 原生js实现商品放大镜效果

    原生js实现商品放大镜效果

    本文主要分享了原生js实现商品放大镜效果的示例代码。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 原生JavaScript实现随机点名表

    原生JavaScript实现随机点名表

    这篇文章主要为大家详细介绍了原生JavaScript实现随机点名表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • 详解ES6中的 Set Map 数据结构学习总结

    详解ES6中的 Set Map 数据结构学习总结

    这篇文章主要介绍了详解ES6中的 Set Map 数据结构学习总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 简介alert()与console.log()的不同

    简介alert()与console.log()的不同

    alert()和console.log()在程序中经常会用到,大家知道他们的区别吗,接下来,通过本文给大家介绍alert()与console.log()的不同,需要的朋友可以参考下
    2015-08-08

最新评论