学习typescript第一课
搭建typescript的开发环境
首先我们要初始化整个项目
--
这个时候我们项目下会多出一个tsconfig.json的配置文件
我们新建一个demo.ts的文件输入以下代码
console.log('Hello World');
document.write('这是我学习typescript第一课');
因为我们的项目ts文件最终会生成为es5版本的js文件,所以我们得设置一个编译后的文件位置
打开tsconfig.json文件
找到outDir这个配置项,将其设置成以下格式
"outDir": "scripts/",
这样我们讲编译后的js文件放置在根目录下/scripts文件夹中
因为我们的js文件放置在浏览器中运行,所以我们得需要一个index.html文件,代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="scripts/demo.js"></script>
</head>
<body>
</body>
</html>
再然后我们就需要安装我们的lite-server这么一个工具
cnpm i lits-server -g
编译ts文件,输入
tsc
启动服务
lite-server
打开浏览器即可看到效果,
两条命令太麻烦,想要一条命令,输入以下命令
cnpm init
然后根据提示输入所询问内容,将会在项目中生成一个package.json
然后在package.json中修改scripts配置项为
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start":"tsc && lite-server"
}
现在我们启动服务只需npm run即可
cnpm run start
但是我们并不推荐这样做