typescript

ts命令行使用

1
2
tsc xxx.ts // 将ts代码转换成js代码
tsc --watch xxx.ts // 自动把最新的ts代码转换为js代码

语法点

数据类型

　　typescript中的数据类型分为两大类：1、原始数据（基本数据类型）；2、对象类型（复杂数据类型）。
　　常用的基本数据类型有5个：number/string/boolean/undefined/null.

string

　　表示一个string时可以使用单引号也可以使用双引号。

undefined和null

　　共同点：都只有一个值，值为类型本身。
　　undefined类型的值为：undfined。
　　null类型的值为：null。

1
2
let u: undefined = undefined;
let n: null = null;

　　undefined：表示声明但未赋值的变量值（找不到值）

1
2
let u: undefined;
console.log(u);   // 变量u的值为undefined

　　null：表示声明了变量并已赋值，值为null（能找到，值就是null）。

list列表遍历

1
2
3
4
5
let list = document.querySelectorAll('.a);
list.forEach(function(item, index)){
	let p = item as HTMLParagraphElement;
	p.innerText += index;
})

VS插件

live server：自动刷新页面

DOM

　　dom是专门用来操作网页内容的一些JS对象，是ts用来控制网页内容的中间件：document.xxxx

DOM操作

选择DOM元素

document.querySelector(selector)

【document对象】：文档对象（整个页面），是操作页面内容的入口对象
【selector对象】：是一个CSS选择器（标签、类、id选择器等）
【作用】：查询（获取）与选择器参数匹配的DOM元素，但是，只能获取到第一个，推荐使用id选择器（唯一）。
【例如】：let title = document.querySelector(‘#title’)
【问题】：调用querySelector()通过id选择器获取DOM元素时，拿到的元素类型都是Element。因为无法根据id来确定元素的类型，所以，该方法就返回了一个宽泛的类型：元素（Element）类型，不管h1还是img都是元素。
【导致新问题】：无法访问img元素的src属性了，因为Element类型只包含所有元素共有的属性和方法（比如：id属性）。
【解决方式】：使用类型断言，来手动指定更加具体的类型（比如，此处应该比Element类型更加具体）。
【语法】：值 as 更加具体的类型。
【比如】：let img = document.querySelector(‘#image’) as HTMLImageElement
【解释】：我们确定id=”image”的元素是图片元素，所以，我们将类型指定为HTMLElement。
【技巧】：通过console.dir()打印DOM元素，在属性的最后面，即可看到该元素的类型。

document.querySelectorAll(selector)

【作用】：获取所有与选择器参数匹配的DOM元素，返回值是一个列表
【推荐】：使用class选择器
【示例】：let list = document.querySelectorAll(‘.a)
【解释】：获取页面中所有class属性包含a的元素

操作文本内容

【读取】：dom.innerText
【设置】：dom.innerText = ‘xxx’
【追加】：dom.innerText += ‘xxx’

操作样式

【dom.style属性】：行内样式操作，可以设置每一个样式属性（比如，字体大小、文字颜色等）
【读取】：dom.style.样式名称
【设置】：dom.style.样式名称 = 样式值
【说明】：所有的样式名称都与CSS相通，但命名规则为驼峰命名发。
【比如】：p.style.fontSize = ‘30px’

【dom.classList属性】：类样式操作，也就是操作类名，比如，添加类名、移除类名等。
【常用方法】：添加、移除、判断是否存在

【添加】：dom.classList.add(类名1, 类名2, …)
【参数表示】：要添加的类名，可以同时添加多个
【比如】：

1
2
<p calss="a"></p>;
dom.classList.add('b', 'c'); // 添加class样式 ==> class="a b c"

【移除】：dom.classList.remove(类名1, 类名2, …)
【参数表示】：要移除的类名，可以同时移除多个
【比如】：

1
2
<p calss="a b c"></p>
dom.classList.remove('b', 'c'); // 移除class样式 ==> class="a"

【判断类名是否存在】：let has = dom.classList.contains(类名)
【参数表示】：要判断是否存在的类名
【比如】：

1
2
3
<p calss="a"></p>
dom.classList.contains('a'); // true
dom.classList.contains('b'); // false

操作事件

　　在浏览网页时，我们经常会通过移入鼠标、点击鼠标、敲击键盘等操作，来使用网站提供的功能。如果要让我们自己实现这样的功能，就需要通过操作事件来实现了。实际上，移入鼠标、点击鼠标、敲击键盘等，都是常见的DOM事件。

操作事件的两个方法：
addEventListener添加（绑定）事件。
removeEventListener移除（解绑）事件。

addEventListener添加事件

【作用】：给DOM元素添加事件。
【使用】：dom.addEventListener(事件名称, 事件处理程序)
【事件名称】：字符串，比如：’click’（鼠标点击事件）、’mouseenter’（鼠标进入事件）。
【事件处理程序】：回调函数，指定要实现的功能，该函数会在触发事件时调用。
【示例】：鼠标点击按钮，打印内容。

1
2
3
4
let btn = document.querySelector('#btn') as HTMLButtonElement;
btn.addEventListener('click', function(){
	console.log('鼠标点击事件触发了');
})

事件对象（event），是事件处理程序（回调函数）的参数。
表示与当前事件相关的信息，比如：事件类型（type）、触发事件的DOM元素（target）等。

1
2
3
4
5
let btn = document.querySelector('#btn') as HTMLButtonElement;
btn.addEventListener('click', function(event){
	console.log(event.type); // click
	console.log(event.target); // btn元素
})

removeEventListener移除事件

【作用】：移除给DOM元素添加的事件，移除后，事件就不再触发了。
【使用】：dom.removeEventListener(事件名称, 事件处理程序)
【事件名称】：同添加事件的第一个参数。
【事件处理程序】：必须要跟添加事件的事件处理程序是同一个，否则无法移除！
【正确方式】：

1
2
3
function handleClick(){}
btn.addEventListener('click', handleClick);
btn.removeEventListener('click', handleClick);

【说明】：添加和移除事件时，事件处理程序时同一个，都是函数handleClick。
【错误演示】：

1
2
btn.addEventListender('click', function(){});
btn.removeEventListener('click', function(){});

【注意】：以上两个函数虽然长的一样，却是不同的函数（双胞胎，不是同一个人）。

如果事件只能触发一次，可以在添加事件时处理。
处理方式：传入第三个参数，将once属性设置为true。
例如：btn.addEventListener(‘click’, function(){}, {once: true});
once：如果值为true，会在触发事件后，自动将事件移除，达到只触发一次的目的。

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

  1. 可以先使用函数，再声明函数。

    1
    2
    btn.addEventListener('click', handleClick);
    function handleClick(){};

    【原因】：函数声明在当前TS文件中的任意位置都有定义
    【示例】：

    1
    2
    fn();
    function fn(){};

  2. 使用事件对象时，应该指定类型注解，否则，访问事件对象的属性时没有任何提示。

    1
    2
    3
    4
    btn.addEventListener('click', handleClick);
    function handleClick(event: MouseEvent) {
    	console.log(event.type);
    }

【技巧】：可以使用原始方式（匿名回调函数）查看参数类型

html

VS快捷键使用

! + 'tab' : 快速填充html基本代码内容

css

待补充。。。

问题

  在ts中使用到的node module需要随着html文件上传吗？