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
的深入体验了.