Ts初体验
ts基础学习及快速调试
准备工作
-
准备工作
- 全局安装
ts:npm install -g typescript
- 全局安装
-
创建一个目录, 命名自定义, 这里名称为
type-demo -
初始化一个
npm包管理文件和node_module:npm init -y -
初始化一个ts项目的配置文件:
tsc --init, 会自动生成tsconfig.json文件. -
然后, 目录格式按下所示:
src:ts文件放置目录js:ts编译转成js文件的放置目录.index.html: 这里使用html格式, 来查看转成js的结果.
下面列出各文件中的内容:
ts文件:day01.ts
(() => {
function sendMsg(str: string) {
return "hello" + str;
}
let text = 'world';
console.log(sendMsg(text));
})
html文件:index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!-- 把转译后的js引入 -->
<script src="../js/index.js"></script>
<body>
</body>
</html>
tsconfig.json配置文件: 在tsc --init创建后, 该文件中就已经有内容了, 我们这里只用修改一两个属性即可:输出目录outDir和是否使用严格模式strict
/* 输出的目标目录*/
"outDir": "./js", /* Redirect output structure to the directory. */
/* 严格模式是否开启. */
"strict": false, /* Notable all strict type-checking options. */
写代码和调试
-
代码当然是在
.ts文件, -
调试的步骤:
-
Terminal=>Run Build Task=>tsc:watch - type-demo/tsconfig.json, 这时,js目录下, 就会自动生成day01.js文件(文件名和你的ts文件名一致) -
这时, 在Terminal中, 会有提示信息出现.出现该提示,则
ts文件没有语法错误,
-
让
index.html在浏览器中打开, 这时, 在浏览器的调试器当中, 你会看到
-
-
到这里就大功告成啦, 然后, 你去修改
ts文件里面的内容, 可以看到调试器中也会自动更新, 这样就可以开始ts的深入体验了.