TypeScript是JavaScript类型的超集,它可以编译成纯JavaScript代码,TypeScript可以在任何浏览器,任何计算机和任何操作系统上运行。
目录
依赖环境
需要先安装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 编程》
有问题欢迎大家留言私信交流,谢谢!