1、TypeScript 环境设置

最新推荐文章于 2023-03-13 11:00:17 发布
最新推荐文章于 2023-03-13 11:00:17 发布
阅读量199 收藏
点赞数
分类专栏： TypeScript 随笔 文章标签： typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011109679/article/details/118656412
版权
本文介绍了如何在Linux系统中通过yum或yarn全局安装TypeScript，并演示了如何使用tsc命令进行编译。此外，讲解了在VSCode和Idea中配置自动编译TS/TSX文件的方法，以及如何通过tsc --init生成tsconfig.json配置文件来指定编译输出目录。参考链接提供了更多关于TypeScript学习的资源。
摘要由CSDN通过智能技术生成

环境设置

安装

yum install -g typescript
#or
yarn global add typescript

编译TypeScript

tsc index.ts

自动编译TS/TSX

编译一个或多个TS文件我们可以使用tsc命令进行编译，这样每次修改TS文件后都需要手动编译。可以配置
VSCode 或
Idea，可自动编译项目中所有的TS文件，需要提供
tsconfig.json 配置文件，配置
outDir属性，指定编译输出目录。

  1. vscode 配置自动编译
    终端->运行任务->typescript->tsc:监视-tsconfig.json 然后就
    可以自动生成代码了
  2. Idea 配置自动编译
    Idea不需配置，保存TS文件后会自动编译

初始化TS配置文件

#生成ts配置文档
tsc --init
#修改tsconfig.json下的outDir，指定编译后的目录，HTML引用的js文件指向这个文件即可

参考文档

https://www.runoob.com/typescript/ts-tutorial.html
https://www.w3cschool.cn/typescript/typescript-tutorial.html

红鹰_Jake
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ieda ts文件报错_Java开发平台IntelliJ IDEA教程：开发，运行和调试TypeScript源代码-IntelliJ IDEA系列教程：-慧都网...
weixin_42608299的博客
01-13 1516
Java开发平台开发，运行和调试TypeScript源代码IntelliJ IDEA是Java语言开发的集成环境，IntelliJ在业界被公认为优秀的Java开发工具之一，尤其在智能代码助手、代码自动提示、重构、J2EE支持、Ant、JUnit、CVS整合、代码审查、 创新的GUI设计等方面的功能可以说是超常的。本系列教程内容为如何将IntelliJ IDEA与您喜欢的语言，平台或框架结合使用。本...
WebStorm开发TypeScript的设置
weixin_40716786的博客
08-18 1875
1、安装node 2、安装typescript (我用yarn 安装的，不是全局安装） yarn addtypescript-d 目录结构如下图 在目录里添加tsconfig.json { "compilerOptions": { "target": "es5", "noImplicitAny": false, "module": "amd", "removeComments": false, "sourceMap": false, ...
Intellij idea设置支持TypeScript
不积跬步，无以至千里；不积小流，无以成江海。
06-15 9136
1.查看本地是否安装typeScript tsc -version 如果没有显示版本，则证明没有安装typeScript 2.安装typeScript npm install -g typescript 注意，需要先安装nodejs 3.打开idea，依次找到如下界面 确定即可 ...
idea调试ts
in_the_road的博客
03-13 1565
3、安装ts依赖包（可以用于打印console）2、全局安装ts-node。1、安装IDEA插件。
Idea如何自动编译TypeScript文件
Blixia的博客
07-13 3026
Idea如何自动编译TypeScript文件1. 在webapp文件夹新建js和ts文件夹2.将ts文件夹在终端中打开（Win则在cmd）3.在ts目录下生成tsconfig.json文件4.修改配置文件5.监视tsconfig文件6.完成 1. 在webapp文件夹新建js和ts文件夹 2.将ts文件夹在终端中打开（Win则在cmd） 3.在ts目录下生成tsconfig.json文件 输入下面代码可以生成tsconfig,json tsc --init 4.修改配置文件 打开tsconfig.j
idea安装插件plugin(主要针对网络连接不上的情况)
热门推荐
duoduo1636546的博客
04-27 3万+
STEP1:ctrl + alt + s 打开settingsSTEP2:在输入框键入 PluginsSTEP3:输入你想要的插件名称，我这边输入的是nodejs,因为最近在学(我这边是安装过的...所以这样显示)。STEP4:点开中下方的前两个按钮（Install plugins; Browse repositories）就可以在线进行下载了敲重点！敲重点！敲重点！本文要讲的是网络不好的情况，即...
IDEA插件开发——React项目插件
Xieisabug
02-26 1万+
IDEA插件开发——React项目插件 设计部分 因为平时在做项目的时候，总是会有一些重复代码的工作量，作为一个有追求的程序员，当然不会让自己一直重复这些劳动。于是，就有了IDEA插件开发这个方案了。IDEA插件开发的资料非常少，大部分都要阅读IDEA的源码来探索。 首先明确我的目标：根据模块和页面名称，自动初始化一系列的页面，其中的变量、类名、文件名等均根据模块名称和页面名称生成。 第二...
webpack+typescript环境配置.zip
04-23
创建 `tsconfig.json` 文件，用于设置 TypeScript 编译选项。例如： ```json { "compilerOptions": { "target": "es5", "module": "commonjs", "lib": ["es6", "dom"], "jsx": "react", "sourceMap": true,...
cocosCreator socket.io typescript环境搭建.rar
06-18
在本文中，我们将深入探讨如何在Cocos Creator中设置socket.io和typescript的开发环境。Cocos Creator是一款强大的2D和3D游戏开发引擎，而socket.io是一个实时通信库，它允许客户端和服务器之间进行双向通信。...
boilerplate-webpack-typescript-react-meteor:Boilerplate通过Meteor，React，Typescript和Webpack设置开发环境
05-04
该样板还设置了Bootstrap，Font-Awesome，并使用了内置的Meteor用户系统模板。 以下是一些参数，为什么您可能会考虑将此堆栈用于更大的代码库： : 先决条件 git，npm，流星 用法1）获取代码 git clone git@github...
搭建自己的React+Typescript环境
十年代码写十年
09-23 492
前言 前阵子在自己学习React，最开始上手使用的creat-react-app来创建自己的项目，2版本之后的create-react-app已经支持了很多功能，比如sass、数据mock、typescript支持等等，也升级了相关依赖babel、webpack到一个最新的版本，具体可以参照Create React App 中文文档，但是它将项目的webpack配置等内容给藏起来了，想要自己配置的...
idea中运行typescript
pgLi
05-07 3430
1、安装Run Configuration for TypeScript插件 2、安装ts-node，并配置tsconfig.json npm i ts-node -D // tsconfig.json { "ts-node": { "compilerOptions": { "module": "commonjs" } }, "compilerOptions": { ... } } ..
Idea调试技巧
muinomarts
03-31 485
Idea调试技巧输入快捷键取消大小写敏感debug调试页面介绍断点对话框调试按钮服务按钮变量查看设置条件断点异常断点临时断点断点回退中断Debug多线程调试 输入快捷键 psvm --------- main方法 sout --------- System.out.println(); 取消大小写敏感 取消大小敏感，在编写代码的时候，代码的自动提示将更加全面和丰富 debug调试页面介绍 调试按钮：调试的主要功能就对应着这几个按钮，鼠标悬停在按钮上可以查看对应的快捷键。在菜单栏Run
intellij idea 15配置typeScript
luyilaosan的博客
05-05 1万+
选择 file—>Settings,进入Settings弹窗。 打开Lanuages&Frameworks,选择Typescript。 配置如下图： 进入网站 https://nodejs.org/en/download/，选择自己的电脑版本下的nodejs应用。 我用的win10,选择如下图： Node interpreter下，选择下载好的nodejs应用即可
vue使用tsx语法必不可缺少的两个插件
weixin_41013537的博客
09-30 916
用vuecli新建项目的时候，再次基础上我们开发的时候如果想用tsx语法，会报错 这是我的tsx语法，报错信息是上面的，下面是安装的插件，按照官方提示已经安装了@vue/babel-plugin-jsx，但还是报错上面的信息，后来经过不断排查，终于发现问题 在此基础上安装一个插件@vue/cli-plugin-babel 到devDependencies 大功告成，再也不会报错啦 ...
TypeScript 安装与使用
YunWisdom
04-10 568
TypeScript 安装与使用 本节介绍 TypeScript 的安装与两种使用方式，大家根据本节所介绍的流程一步步操作，相信很快就能编写自己的 TypeScript 代码。 1. 慕课解释 环境准备： 安装Node.js环境（version: 8.14.0+) 确保npm或者yarn可用 到nodejs官网根据自己的操作系统下载对应 Node.js 版本，Node...
typescript 安装使用，基础类型详解
LGDmar的博客
05-28 392
TypeScript 是JacaScript的超集 (包含js ES567语法),同时也新增了一些语法，例如类型和面向对象的。但是新增的这部分语法不能被浏览器和node.js无法识别并执行的，所以就需要一个工具将ts代码转换成浏览器、node.js识别的代码 安装ts前提要先安装node.js(这里不多说直接官网下载对应版本选择安装路径下一步就好了) node.js安装下载地址https://nodejs.org/zh-cn/ 安装完成 查看对应版本号是否安装成功 node -v 全局安装ts.
yum安装步骤
zhangfan_12871的博客
11-14 7204
rpm -aq|grep yum|xargs rpm -e --nodeps（删除原有yum，若已删除，请忽略） 1.下载yum安装文件：http://mirrors.163.com/（网易开源镜像站） 举个下载路径的栗子：centos→选择版本→readme（复制下载链接）→http://vault.centos.org/6.5/os/x86_64/Packages/→yum-3.2.29-...
VSCode如何配置TypeScript的编译环境
最新发布
04-22
您好，要在VSCode中配置TypeScript的编译环境，需要进行以下几个步骤： 1. 首先，您需要在计算机上安装Node.js和npm。可以通过访问其官方网站 (https://nodejs.org/en/)来下载和安装它们。 2. 接下来，您需要在计算机上全局安装TypeScript。可以在命令行中使用以下命令执行此操作： ``` npm install -g typescript ``` 3. 确认TypeScript已正确安装并确定其版本。可以在命令行中使用以下命令来检查此信息： ``` tsc -v ``` 4. 配置VS Code设置以使用TypeScript。在VS Code中，打开用户设置（通过选择“文件”菜单中的“首选项”和“用户设置”），并添加以下行： ``` "typescript.tsdk": "node_modules/typescript/lib" ``` 这将告诉VS Code启用TypeScript，并设置TypeScript的安装路径。 5. 最后，您需要在项目中创建一个tsconfig.json文件。该文件应该描述TypeScript编译器应如何编译您的代码。在VS Code中，可以通过选择“文件”>“新建文件”>“tsconfig.json”来创建此文件。 在tsconfig.json文件中，您应该定义编译器选项，例如目标ECMAScript版本，输出目录等。 希望这些步骤对您有所帮助，如果您有任何问题或需要更详细的说明，请告诉我。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值