TypeScript之Web开发_typescript webapp开发

前言：这一块记录的是以前所学的内容，复习及温习最新所学的内容

浏览器中运行TS

注意：浏览器中只能运行 JS，无法直接运行 TS，因此，需要将 TS 转化为 JS 然后再运行

浏览器中运行 TS 的步骤：

1. 使用命令 tsc index.ts 将 ts 文件转化为 js 文件。

2. 在页面中，使用 script 标签引入生成的 js 文件（注意是 js 文件）。

问题：每次修改 ts 文件后，都要重新运行 tsc 命令将 ts 转化为 js 。

解决方式：使用 tsc 命令的监视模式。

tsc --watch index

解释： --watch 表示启用监视模式，只要重新保存了 ts 文件，就会自动调用 tsc 将 ts 转化为 js。

类型断言 

问题：调用 querySelector() 通过 id 选择器获取 DOM 元素时，拿到的元素类型都是 Element。

因为无法根据 id 来确定元素的类型，所以，该方法就返回了一个宽泛的类型：元素（Element）类型。

不管是 h1 还是 img 都是元素。

导致新问题：无法访问 img 元素的 src 属性了。

因为：Element 类型只包含所有元素共有的属性和方法（比如：id 属性）

解决方式：使用类型断言，来手动指定更加具体的类型（比如，此处应该比 Element 类型更加具体）

语法：

值 as 更具体的类型

比如：

let img = document.querySelector('#image') as HTMLImageElem

解释：我们确定 id="image" 的元素是图片元素，所以，我们将类型指定为 HTMLImageElement。

技巧：通过 console.dir() 打印 DOM 元素，在属性的最后面，即可看到该元素的类型。

获取元素和innerText的练习

要求：给所有p标签的内容前面，添加‘【自己的索引】’

即，

      天青色等烟雨 -> [0]天青色等烟雨

    而我在等你   -> [1]而我在等你

 

document.querySelectorAll('p').forEach((item,index)=>{
  item.innerText=`[${index}] ${item.innerText}`
})

 操作样式

类样式（classList）的操作有三种：

// 添加
dom.classList.add('a', 'b')
// 移除
dom.classList.remove('b', 'c')
// 判断是否存在
let has = dom.classList.contains('a')

 操作事件

移除事件总结： 

当 DOM 元素的事件不再使用时，就可以通过 removeEventListener 方法移除事件。

注意：添加和移除的事件处理程序必须是同一个，否则无法移除！

function handleClick() {} btn.addEventListener('click', handleClick) btn.removeEventListener('click', handleClick)

如果事件只需要触发一次，可以在添加事件时，通过 once 属性来实现。

btn.addEventListener('click', function () {}, { once: tr

函数声明形式的事件处理程序说明

总结：

函数声明在当前 ts 文件中的任意位置都有定义

总结：
函数声明在当前 ts 文件中的任意位置都有定义

fn() // 先调用函数
function fn() {} // 再声明

在函数声明形式的事件处理程序中，使用事件对象时，应该指定参数类型。

btn.addEventListener('click', handleClick)
function handleClick(event: MouseEvent) {