typescript学习笔记
目录：
typescript相比JS的优势
为什么要安装解析JS的工具包？
安装解析TS的工具包
第一个TS文件
简化执行TS的步骤
数据类型
创建对象
对象方法的类型注解
接口使用
将VScode添加至右键菜单
（3）在VScode中新建ts文件：hello.ts（注意：文件后缀名为：.ts）
console.log('hello TS')
解决方案：无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\tsc.ps1,因为在此系统上禁止运行脚本
（2）执行JS：输入 node hello.js（注意：后缀为.js）。MDN（更标准）/W3school(国内)
在浏览器中运行TS
注意：在浏览器中只能运行JS，无法直接运行TS，因此，需要将TS转换为JS再运行。
浏览器中运行TS的步骤：
使用命令 tsc index.ts将TS转换为JS。
在页面中使用script标签引入生成的js文件（注意是js文件）。
示例：
HTML
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在浏览器中运行TStitle>
head>
<body>
<script src="index.js">script>
body>
html>
TS index.ts
function sum(num1: number, num2: number) { return num1 + num2; } let res = sum(1, 2); console.log(`TS代码执行了：${res}`);
问题：每次修改TS文件后，都要重新运行tsc命令将TS转化为JS。
解决方式：使用tsc命令的监视模式。
tsc --watch index.ts
解释： --watch表示启用监视模式，只要重新保存了ts文件，就会自动调用tsc将ts转化为js。
typeScript操作dom
DOM（Document ObjectModal）：文档对象模型。DOM是浏览器提供的（浏览器特有），专门用来操作网页内容的一些JS对象。
目的：让我们可以使用JS/TS代码来操作页面（HTML）内容，让页面“动”起来，从而实现web开发。
HTML：超文本标记语言，用来创建网页结构。
两者的关系：浏览器根据HTML内容创建相应的DOM对象，也就是：每个HTML标签都有对应的DOM对象。
DOM操作的套路（技巧）：先找人后做事。
获取一个DOM元素：
document.querySelector(selector)document对象：文档对象（整个页面），是操作页面内容的入口对象。 selector参数：是一个css选择器（标签、类‘id选择呢器等）
作用：查询（获取）与选择器参数匹配得DOM元素，但是只能获取到第一个。
推荐：使用id选择器（唯一）。
示例：
HTML代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取元素——querySelectortitle>
head>
<body>
<h1 id="title">青花瓷h1>
<p class="c1">天青色等烟雨p>
<p class="c2">而我在等你p>
<script src="index.js">script>
body>
html>
TS代码：
// 示例：获取id为title的DOM元素 // let title = document.querySelector("#title"); // console.log(title);//青花瓷
// 示例：通过标签获取DOM元素 // let p = document.querySelector("p"); // console.log(p);//天青色等烟雨
// 示例：通过class选择器取DOM元素 let _class = document.querySelector(".c2"); console.log(_class);//而我在等你
类型断言
问题：调用querySelector()通过id选择器获取dom元素时，拿到的元素类型都是 Element 。无法访问元素的属性，例如：无法访问img的src属性。因为 Element 类型只包含所有元素共有的属性和方法，比如：id属性、class属性。
解决方式：使用类型断言，来手动指定 更加具体 的类型（比如，此处应该比 Element 类型更加具体）。
语法：
值 as 更具体的类型。
示例：
给上述HTML中加入：
<img src="./img/red.jpg">
TS改为：
let _img = document.querySelector("img") as HTMLImageElement;
console.log(_img.src);//http://xxxx/img/red.jpg
解释：我们选择了图片标签所以确定就是图片元素，所以将类型指定为 HTMLImageElement。
技巧：通过 console.dir() 打印DOM元素，在属性的最后面，即可看到该元素的类型。
打印img后