Typescript学习笔记

最新推荐文章于 2023-09-01 17:54:15 发布

sunshine~~~

最新推荐文章于 2023-09-01 17:54:15 发布

阅读量398

点赞数

本文链接：https://blog.csdn.net/qq_45192089/article/details/114953962

版权

Typescript

1、导读

学习收获：
（1）TypeScript 编程语言：
能够明确Typescript类型系统的优势；
能够掌握Typescript的基础编程能力（比如，变量声明、条件语句、循环语句、函数等）；
能够掌握接口、枚举、类型断言等高级功能；
（2）Web开发：
运用HTML/CSS搭建页面结构和样式；
通过DOM操作网页内容，让页面动起来，实现与页面的交互；
实现自己的下棋游戏；

为以后学习其他前端开发知识做铺垫。

2、Typescript概述

2.1 JS 和TS

1、Javascript

javascript的运行环境：1、浏览器 2、node.js
Node.js让javascript摆脱了浏览器的束缚，可以实现服务端/桌面端编程等。
总结：Javascript既能运行在浏览器中，也可以运行在Node.js中，前后端通吃，无所不能hh。

2、Typescript

Typescript（简称：TS）是Javascript的超集（JS有的TS都有）；
Typescript=Type+Javascript（为JS添加了类型系统）；
Typescript是微软开发的开源编程语言，设计目标是开发大型应用。可以在任何浏览器、任何计算机、任何操作系统上运行。

// Typescript 代码：有明确的类型，即：number（数值类型）
let age:number = 19;

//Javascript 代码：无明确的类型
let age = 19;

3、Typescript相比JS的优势

优势一：类型化思维方式，使得开发更加严谨，提前发现错误，减少该bug的时间；
优势二：类型系统提高了代码可读性，并使维护和重构代码更加容易；
优势三：补充了接口、枚举等开发大型应用时JS缺失的功能；
vue3 源码使用TS重写，TS是趋势。

4、Typescript工具的安装，解析ts–>js,运行ts

在这里插入图片描述

3、Typescript数据类型

Typescript中常用的基本数据类型有5个：分别是：number（数字类型）、string（字符串类型）、boolean（布尔类型）、undefined、null

补充概念：这些类型的值，也叫做字面量，也就是从字面上就能看出来它是什么。

TS中的数据类型分为两个大类：1、原始类型（基本数据类型）；2、对象类型（复杂数据类型）；
复杂数据类型：object（对象、数组）、function函数。

3、Typescript 运算符

4、Typescript 语句

5、Typescript 数组

6、Typescript 函数基础知识

函数，即：声明一次但却可以调用多次的一段代码。
通过将要实现的功能，使用函数封装起来，实现代码复用，提升开发效率。
函数的三种主要内容：参数、函数体、返回值

7、Typescript 函数进阶

1、调试函数
关键点：在哪个位置打断点、如何调试
断点位置：函数调用所在位在这里插入图片描述
置；
2、变量作用域
一个变量的作用域指的是：代码中定义变量的区域，它决定了变量的使用范围。
在TS（或JS）中，函数可以形成作用域，叫做：函数作用域
根据范围的不同，变量可以分成两种：1.局部变量 2.全局变量

8、Typescript 对象

8.1

（1）对象：一组相关属性和方法的集合，并且是无序的。
在TS中，如果要描述一个事物或一组相关的数据，就可以使用对象来实现。
（2）属性和方法的区别就是：值是不是函数，如果是，就称为方法，否则，就是普通属性。
（3）函数用作方法时可以省略function后面的函数名称，也叫做匿名函数。此处的key相当于函数名称，将来通过对象的key就可以调用了。
如果一个函数是单独出现的，没有与对象关联，我们称为函数，否则，称为方法。

8.2 接口

1、对象的类型注解

TS中的对象是结构化的，结构简单来说就是对象有什么属性或方法。
在使用对象前，就可以根据需求，提前设计好对象的结构。
在这里插入图片描述

2、对象方法的类型注解

方法类型注解的关键点：参数类型、返回值在这里插入图片描述

3、接口的使用

直接在对象名称后面写类型注解的坏处：1、代码结构不简洁 2、无法复用类型注解；
接口：为对象的类型注解命名，并为你的代码建立契约来约束对象的结构。
在这里插入图片描述
interface 表示接口，接口名称约定以I开头。
推荐：使用接口来作为对象的类型注解。

8.3 取值和存值

1、取值
取值，即：拿到对象中的属性和方法并使用
获取对象中的属性，称为：访问属性。
获取对象中的方法并调用，称为：调用方法。

2、存值
存值，即修改（设置）对象中的属性的值。设置的新值，也必须符合该属性的类型要求。
注意：几乎不会修改对象中的方法。

8.4 内置对象

对象的两种来源：1、自己创建；2、其他人创建（编程语言自带或第三方）；

内置对象，是TS/JS自带的一些基础对象，提供了TS开发时所需的基础或必要的能力。

数组就是一个内置对象。
内置对象中提供了非常多的方法和属性，以满足开发中各种各样的需求。
在这里插入图片描述

forEach()方法里面的回调函数是作为实参传入的，所以不需要类型注解。

8.5 TS的类型推论

在TS中，某些没有明确指出类型的地方，类型推论会帮助提供类型。
换句话说：由于类型推论的存在，这些地方，类型注解可以省略不写！
发生类型推论的2种常见场景：1、声明变量并初始化时；2、决定函数返回值时；
在这里插入图片描述

9、web开发

9.1 自动刷新浏览器插件

在这里插入图片描述

9.2 在浏览器中运行TS

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

使用VScode：
浏览器中运行TS的步骤：
1、使用命令：tsc index.ts将ts文件转换为js文件；
2、在页面中，使用script标签引入生成的js文件（注意是js文件）

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

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

tsc --watch index.ts

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

使用webstorm：
浏览器中运行TS的步骤：勾选自动编译即可
在这里插入图片描述

9.3 DOM操作

1、概述

DOM（Document Object Modal）:文档对象模型
DOM是浏览器提供的（浏览器特有的），专门用来操作网页内容的一些JS对象。
目的：让我们可以使用JS/TS来操作页面（HTML）内容，让页面“动”起来，从而实现web开发。
HTML:超文本标记语言，用来创建网页结构。
两者之间的关系：浏览器根据HTML，内容创建相应的DOM对象，也就是：每个HTML标签都有对应的DOM对象。

学习四个常用DOM操作：
1、获取DOM元素（DOM对象）；
2、设置样式；
3、设置内容；
4、绑定（解绑）事件；

DOM操作的套路（技巧）：先找人后做事：
找人：获取DOM元素
做事：设置样式、内容、绑定（解绑）事件

2、获取元素

1、获取一个DOM元素

document.querySelector(selector);

document对象：文档对象（整个页面），是操作页面内容的入口对象。
selector参数：是一个CSS选择器（标签、类、id选择器等）。
作用：查询（获取）与选择器参数匹配的DOM元素，但是，只能获取到第一个！
推荐：使用id选择器（唯一）；

2、获取多个DOM元素

document.querySelectorAll(selector);

作用：获取所有与选择器参数匹配的DOM元素，返回值是一个列表；
推荐：使用class选择器

3、TS类型断言

类型断言使用场景：当你比TS更了解某个值的类型，并且需要指定更具体的类型时。

问题：调用querySelector()通过id选择器获取DOM元素时，拿到的元素类型都是Element。
因为无法根据id来确定元素的类型，所以，该方法就返回了一个宽泛的类型：元素（Element）类型。
不管h1还是img都是元素。
导致新问题：无法访问img元素的src属性了。因为Element类型只包含所有元素共有的属性和方法（比如：id属性）。

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

语法：
值 as 更加具体的类型

比如：
let img = document.querySelector("#image") as HTMLImageElement;
解释：我们确定id="image"的元素是图片元素，所以，我们将类型指定为HTMLImageElement.

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

4、操作文本内容

读取：
dom.innerText();

设置：
dom.innerText = “你好”;

~~注意：需要通过类型断言来指定DOM元素的具体类型，才可以使用innerText属性。~~ （经测试，不需要指定DOM元素的类型，也可以使用innerText属性）

5、操作样式

两种方式：
dom.style 属性：行内样式操作，可以设置每一个样式属性（比如，字体大小、文字颜色等）；
dom.classList 属性：类样式操作，也就是操作类名，比如，添加类名、移除类名等。

1、style属性（行内样式）

读取：
dom.style.样式名称

设置：
dom.style.样式名称 = 样式值

说明：所有样式名称都与css相通，但命名规则为驼峰命名法。
dom.style.fontSize = "30px";

2、classList 属性（类样式）
包含三个常用方法：添加、移除、判断是否存在。

添加：
dom.classList.add(类名1，类名2，...);
参数表示：要添加的类名，可以同时添加多个。

移除：
dom.classList.remove(类名1，类名2，...);
参数表示：要移除的类名，可以同时移除多个。

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

6、操作事件

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

6.1 addEventListener 添加（绑定）事件

作用：给DOM元素添加事件

dom.addEventListener(事件名称，事件处理程序);

事件名称：字符串，比如“click（鼠标点击事件）”、“mouseenter（鼠标进入事件）”。
事件处理程序：回调函数，指定要实现的功能，该函数会在触发事件时调用。
事件对象（event），是事件处理程序（回调函数）的参数。
表示：与当前事件相关的信息，比如：事件类型（type）、触发事件的DOM元素（target）等。

6.2 removeEventListener 移除（解绑）事件

作用：移除给DOM元素添加的事件，移除后，事件就不再触发了。

dom.removeEventListener(事件名称，事件处理程序);

事件名称：同添加事件的第一个参数。
事件处理程序：必须要跟添加事件时的事件处理程序是同一个，否则无法移除。
在这里插入图片描述

如果事件只需要触发一次，可以在添加事件时处理。
处理方式：传入第三个参数，将once属性设置为true.

btn.addEventListener("click",function(){},{once:true});

once:如果值为true，会在触发事件后，自动将事件移除，达到只触发一次的目的。

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

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

btn.addEventListener("click",handleClick);
function handleClick(){};

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

// 1.先调用函数
fn()
// 2、再声明函数
function fn(){}

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

btn.addEventListener("click",handleClick);
function handleClick(event:MouseEvent){}

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

sunshine~~~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Typescript学习笔记

Typescript1、导读1、导读学习收获：（1）TypeScript 编程语言：能够明确Typescript类型系统的优势；能够掌握Typescript的基础编程能力（比如，变量声明、条件语句、循环语句、函数等）；能够掌握接口、枚举、类型断言等高级功能；（2）Web开发：运用HTML/CSS搭建页面结构和样式；通过DOM操作网页内容，让页面动起来，实现与页面的交互；实现自己的下棋游戏；为以后学习其他前端开发知识做铺垫。...
复制链接

扫一扫