-
第一章:TypeScript初体验
-
JavaScript是什么?
js是一种运行在客户端中的编程语言,但是Node.js能够让Javascript实现服务器端/桌面端编程
-
TypeScript是什么?
Ts是Js的超集,就是说Ts是在Js的基础上添加了类型(Type)系统;设计Ts是为了可以开发大型应用
-
Ts相比Js的优势
- 类型化思维方式
- 类型系统提高了代码可读性,并使维护和重构代码更加容易
- 补充了枚举、接口等开发大型应用时Js缺失的功能
-
开发工具
- 写代码的工具:VScode
- 运行Ts/Js代码的工具:Node.js
- typescript:用来解析TS的工具包,提供tsc命令,实现TS->JS的转化,因为TS代码不能直接在Node.js里面运行的
-
执行TS代码的方法
法一:在终端输入
tsc xxx.ts
node xxx.ts
法二:使用ts-node包,ts-node包中命令ts-node,用来执行TS代码
在终端输入ts-node xxx.ts
-
第二章:变量与数据类型
-
变量是什么?
变量使用啦存储数据的容器
-
undefined、null
undefined:表示申明但未赋值的变量值
null:表示申明了变量并已赋值,值为null
-
第三章:对象
-
对象是什么?
一组无序的属性和方法的集合
-
对象的类型注解?
对象的结构化类型(类型注解):建立一种契约,约束对象的结构
-
接口是什么?为什么要使用接口?
接口interface:为对象的类型注解命名,并为代码建立契约类约束对象的结构
使用接口的原因:因为直接在对象名称后面写类型注解会使得代码不够简洁,而且无法复用类型注解
-
第四章:内置对象
-
内置对象是什么?
TS/JS自带的一些基础对象,提供了TS开发时所需的基础或必要的能力
-
回调函数?
方法里的参数如果时一个函数,这种函数称为回调函数;回调函数不应该指定类型注解:因为forEach方法可以根据当前数组的类型,自动推导出回调函数中参数的类型
-
第五章:WEB开发基础
-
浏览器中的内容自动更新:
VScode安装Live Server插件
-
浏览器中运行TS:
1.使用tsc xxx.ts将ts文件转换成js文件
2.在页面中,使用script标签引入生成的js文件
问题:每次修改ts文件后都要重新运行tsc命令将ts转换成js文件,好繁琐
解决:使用tsc命令的监视模式:tsc --watch xxx.ts
-
第六章:DOM
-
DOM是什么?
DOM:
文档对象模型;
是浏览器提供的,专门用来操作网页内容的一些JS对象;
是为了让我们可以使用JS/TS代码来操作页面内容,让页面动起来,从而实现WEB开发;
与HTML的关系:浏览器根据HTML内容创建相应的DOM对象,即每个HTML标签都有对应的DOM对象
获取元素的方法:
1.querySelector(selector)作用:获取某一个DOM元素:
document.querySelector(selector) : 查询与选择器参数匹配的DOM元素
docuemnet对象:文档对象(整个页面),是操作页面内容的入口对象
selector参数:是一个CSS选择器(标签,类,id选择器等)
此时 推荐使用id选择器
2.querySelectorAll(selector)作用:同时获取多个DOM元素
此时 推荐使用class选择器
-
类型断言
调用querySelector(selector)通过id选择器获取DOM元素时,拿到的元素类型都是Element;而Element类型只包含所有元素共有的属性和方法,从而就导致无法访问,比如 img 元素的 src属性了
所以我们要使用类型断言,手动指定更加具体的类型 (如果不知道当前元素的类型,就可以通过console.dir()打印DOM对象,来查看该元素的类型),这样就可以访问DOM元素的一些特有的属性了
DOM操作
操作文本内容:
先设置类型断言
dom.innerText
操作样式:
行内操作样式:dom.style 属性,比如字体大小,文字颜色等
类样式操作:dom.classList 属性,比如添加类名、移除类名
dom.classList.add:添加
dom.classList.remove:移除
dom.classList.contains:包含
操作事件
添加事件 dom.addEventListener(事件名称, 事件处理程序)