TypeScript学习笔记

• 第一章：TypeScript初体验

• JavaScript是什么？

js是一种运行在客户端中的编程语言，但是Node.js能够让Javascript实现服务器端/桌面端编程

• TypeScript是什么？

Ts是Js的超集，就是说Ts是在Js的基础上添加了类型(Type)系统；设计Ts是为了可以开发大型应用

• Ts相比Js的优势

1. 类型化思维方式
2. 类型系统提高了代码可读性，并使维护和重构代码更加容易
3. 补充了枚举、接口等开发大型应用时Js缺失的功能

• 开发工具

1. 写代码的工具：VScode
2. 运行Ts/Js代码的工具:Node.js
3. 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(事件名称, 事件处理程序)