TypeScript 开发环境搭建
创始人
2024-03-25 19:04:24
0

TypeScript是JavaScript类型的超集,它可以编译成纯JavaScript代码,TypeScript可以在任何浏览器,任何计算机和任何操作系统上运行。

目录

依赖环境

 搭建步骤

1.新建一个文件夹

2.初始化一个NPM项目

3.安装typescript 包

4.新建一个tsconfig.json

 5.新建一个index.ts

6.编译生成js文件

7.运行js文件

依赖环境

需要先安装Node.js环境,下载地址:下载 | Node.js

Windows环境下下载msi文件,点击下一步直接安装完成。

 按Win+R键,输入“cmd”字符,按回车键,输入:npm -v。如果返回版本信息,表示安装成功。

 搭建步骤

1.新建一个文件夹

  在命令行输入:

mkdir tsdemo

2.初始化一个NPM项目

在命令行输入:

npm init

先全部默认,按enter键,输入下一项,等到确认yes或者no的时候,输入'y'。生成package.json文件,和其他的node项目是一样的,都需要package.json文件。

3.安装typescript 包

在命令行输入:

npm install --save-dev typescript @types/node

在执行完以上三步之后,其实就可以使用自己喜欢的IDE来打开项目,我这里使用的是WebStorm。换成Visual Studio Code也是一样的。

4.新建一个tsconfig.json

文件内容包括:

{"compilerOptions": {//假定运行环境的API有哪些"lib": ["es2015"],//把代码编程成哪个模块系统"module": "commonjs",//生成的JavaScript代码存放到哪个文件夹中"outDir": "dist",//开启sourcemap方便调试"sourceMap": true,//检查无效代码,强制所有代码都应该正确声明了类型"strict": true,//把代码编译成哪个JavaScript版本"target": "es2015"},
//  在哪个文件夹寻找typescript文件"include": ["src"]
}

 

 5.新建一个index.ts

我们现在可以先新建一个文件夹src,必须和上一步中"include"中配置的名称相同。一般都是src

在src下新建一个index.ts,输入以下内容:

console.log('Hello TypeScript!');

6.编译生成js文件

  可以通过在WebStorm当前文件中右键->选择Compile TypeScript

会在当前根目录下生成dist/index.js文件。旧版本的WebStorm需要刷新一下目录才会出现。 

7.运行js文件

可以看到生成的index.js文件内容:

"use strict";
console.log('Hello TypeScript!');
//# sourceMappingURL=index.js.map

我们在当前index.js文件中右键选择:

可以看到命令行的输出:

 

现在我们就可以开始愉快的TypeScript编程之旅了,虽然这个项目很简单,但是万丈高楼平地起,一砖一瓦皆根基。从这里起步,学习整个TypeScript编程,感受不一样的TypeScript。 

参考:

《TypeScript 编程》 

有问题欢迎大家留言私信交流,谢谢!

相关内容

热门资讯

喜欢穿一身黑的男生性格(喜欢穿... 今天百科达人给各位分享喜欢穿一身黑的男生性格的知识,其中也会对喜欢穿一身黑衣服的男人人好相处吗进行解...
发春是什么意思(思春和发春是什... 本篇文章极速百科给大家谈谈发春是什么意思,以及思春和发春是什么意思对应的知识点,希望对各位有所帮助,...
网络用语zl是什么意思(zl是... 今天给各位分享网络用语zl是什么意思的知识,其中也会对zl是啥意思是什么网络用语进行解释,如果能碰巧...
为什么酷狗音乐自己唱的歌不能下... 本篇文章极速百科小编给大家谈谈为什么酷狗音乐自己唱的歌不能下载到本地?,以及为什么酷狗下载的歌曲不是...
家里可以做假山养金鱼吗(假山能... 今天百科达人给各位分享家里可以做假山养金鱼吗的知识,其中也会对假山能放鱼缸里吗进行解释,如果能碰巧解...
华为下载未安装的文件去哪找(华... 今天百科达人给各位分享华为下载未安装的文件去哪找的知识,其中也会对华为下载未安装的文件去哪找到进行解...
四分五裂是什么生肖什么动物(四... 本篇文章极速百科小编给大家谈谈四分五裂是什么生肖什么动物,以及四分五裂打一生肖是什么对应的知识点,希...
怎么往应用助手里添加应用(应用... 今天百科达人给各位分享怎么往应用助手里添加应用的知识,其中也会对应用助手怎么添加微信进行解释,如果能...
苏州离哪个飞机场近(苏州离哪个... 本篇文章极速百科小编给大家谈谈苏州离哪个飞机场近,以及苏州离哪个飞机场近点对应的知识点,希望对各位有...
客厅放八骏马摆件可以吗(家里摆... 今天给各位分享客厅放八骏马摆件可以吗的知识,其中也会对家里摆八骏马摆件好吗进行解释,如果能碰巧解决你...