盘点 TypeScript 的基础认识二

Posted 2023-02-21 ZZZ --- jh

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了盘点 TypeScript 的基础认识二相关的知识，希望对你有一定的参考价值。

TypeScript

数组

概述

数组是用于存放多个数据的集合.

注意: 数组中,通常是相同类型的数据.

语法

类型注解的组成: 类型+[]; (推荐)

[](中括号)表示数组. 如果数组中没有内容就是一个空数组.如果有内容要用逗号隔开
```
// 表示字符串类型的数组(只能出现字符串类型)
let name2:string[] = [];
```
let name3:string[] = new Array()

数组的长度和索引

概念: 数组的长度表示数组中元素的个数,通过数组的length属性来获取; 数组的索引表示数组中元素的序号.

eg: let name2:string[] = ['1','2','3']; console.log(name2.length); //3

数组的长度length和最大索引之间的关系: 最大索引为length-1

注意: 数组索引是从0开始的.

取值

语法: 数组名称[索引]

eg: let name2:string[] = ['张三','李四','王五']; console.log(name2[1]); //李四

存值

如果要修改数组中某个元素的值就用使用数组存值.

语法: 数组名称[索引] = 新值

技巧:先获取到要修改的元素然后在存值.

eg: name2[2] = '赵六'; //[ '张三', '李四', '赵六' ]

添加元素

如果索引存在就表示修改元素; 如果索引不存在就表示添加元素

语法: 数组名称[数组长度] = 新值

eg: let name2:string[] = ['张三','李四','王五']; name2[3] = '赵六'; console.log(name2) //[ '张三', '李四', '王五', '赵六' ]

遍历数组

概念: 就是把数组中的所有元素挨个获取一次.

使用`for循环遍历数组

let num:number[] = [1,2,3];
for(let i:number=0; i<num.length; i++)
  console.log(num[i]); //1  2  3

注意: 数组索引是从0开始的,所以计数器i的默认值为0.

注意: 应该根据数组长度来计算,公式为数组长度减一,也就是num.length-1.

函数

概述

函数就是声明一次但却可以调用任意多次的一段代码.

意义

实现代码重用,提升开发效率

使用

声明函数 — function 函数名称() 函数体
调用函数 — 函数名称()

注意: 只有调用函数后,函数中的代码才会执行.

函数参数

函数参数的作用: 增加了函数的灵活性,调用性,针对相同的功能能够适应更多的数据

分为形参和实参两部分

函数有多个参数时,多个参数之间用逗号分隔

形参

概念: 声明函数指定的参数,放在声明函数的小括号中.

语法: 形参名称:类型注解,类似于变量声明但是没有赋值

作用:指定函数可接收数据

function str(strName:string)

实参

概念: 调用函数时传入的参数,放在调用函数的小括号中.

作用: 用来赋值给形参

str('声声慢')

注意: 实参和形参按照顺序一一对应的.

function fn(name:string,age:number)
  console.log(name+age); //张三18

fn('张三',18)

注意: 实参必须符合形参的类型要求否则会报错.

function fn(name:string)
  console.log(name);

fn(18) //报错

技巧: 调用函数时, 鼠标放在函数名称上,会显示该函数的参数以及类型

返回值

作用:

将函数内部计算的结果返回,以便于使用该结果继续参与其他的计算.

注意: 如果没有指定函数的返回值,name函数返回值的默认类型为void(空,什么都没有)

基本使用

指定返回值类型 — function fn():类型注解

eg: function fn():number
指定返回值 — function fn():类型注解return 返回值

eg: function fn():numberreturn 18

注意: 返回值必须符合返回值额理性要求,否则会报错
return

将函数内部的计算结果返回;

终止函数代码执行;

只能在函数中使用,否则会报错;

可以单独使用(后面不跟内容),用来刻意终止函数的执行

变量作用域

一个变量的作用域指的是代码中定义变量的区域,它决定了变量的使用范围.

在TS(或JS)中,函数可以形成作用域叫做函数作用域.

分为局部变量和全局变量

局部变量

概念: 表示在函数内部声明的变量,该变量只能在函数内部使用.

function fn()
  // 变量num是局部变量
  let num:number = 1;
  console.log(num); //1

fn()
// console.log(num); //报错

全局变量

概念: 表示在函数外部声明的变量,该变量在当前ts文件的任何地方都可以使用.

// 变量num是全局变量
let num:number = 2;
function fn()
  console.log(num); //2

fn();
console.log(num); //2

对象

理解

一组相关属性(特征)和方法(行为)的集合,并且是无序的. 也可以说就是用来描述一个事物或一组相关数据的

eg: name:'易烊千玺',sex:'男',sing:function()

创建对象

表示对象
对象中的属性和方法采用键值对的形式,键值之间用冒号来配对

let person = 键1:值1, 键2:值2
键(key) --> 名称, 值(value) --> 具体的数据
多个键值对之间,通过逗号来分隔

属性和方法的区别: 值是不是函数,如果是就称为方法;否则就是普通属性

let person = 
    sayHi:function()
        console.log("大家好,我是一个方法")

注意: 函数用作方法时可以省略function后面的函数名称,也叫做匿名函数
如果一个函数时单独出现的,没有与对象关联,称为函数;否则为方法

取值

概念: 拿到对象中的属性或方法并使用

获取对象中的属性称为访问属性

获取对象中的方法并调用称为调用方法

访问属性 —> 通过点语法(.)就可以访问对象中的属性.

let Jackson = name:'易烊千玺',sex:'男';
// 获取到对象的name属性
console.log(Jackson.name);

调用方法 —> 通过点语法(.)先拿到方法名称,然后通过小括号调用方法.

let Jackson = 
  sing:function()
    console.log('大城小爱');
  

// 调用对象的sing方法
Jackson.sing();

存值

概念: 修改(设置)对象中属性的值.

let Jackson = name:'易烊千玺',sex:'男';
// 将对象的name属性的值改为yyqx
// 先通过点语法获取到name属性，然后，将新值'yyqx'赋值给该属性
Jackson.name='yyqx'
console.log(Jackson.name);

注意: 设置的新值也必须符合该属性的类型要求

注意: 几乎不会修改对象中的方法

内置对象

概念: 是TS/JS自带的一些基础对象,提供了TS开发时所需的基础或必要的能力.

内置对象中提供了非常多的方法或属性以满足开发中各种各样的需求.

文档地址: MDN(更标准)/W3school(国内)

数组对象

属性 length – 获取数组长度

let str:string[] = ['易烊千玺','秦霄贤','R1SE'];
console.log(str.length); //3

方法push — 添加元素(在数组最后一项元素的后面添加)

let str:string[] = ['易烊千玺','秦霄贤','R1SE'];
str.push('超话');
// str[3] = '超话';
console.log(str); // [ '易烊千玺', '秦霄贤', 'R1SE', '超话' ]

方法 forEach — 遍历数组

forEach方法的参数是一个函数,这种函数也称为回调函数.

forEach方法的执行过程: 遍历这个数组,为数组的每一项元素调用一次回调函数.

回调函数的两个参数: item(表示数组中的每个元素) 和 index(索引)

let str:string[] = ['易烊千玺','秦霄贤','R1SE'];

// 原来的方式:使用for循环遍历数组
for(let i:number=0; i<str.length; i++)
  console.log('索引为',i,'--- 元素为',str[i]);


// 使用forEach
str.forEach(function(item,index)
  console.log('索引为',index,'--- 元素为',item);
)
/* 索引为 0 --- 元素为 易烊千玺
索引为 1 --- 元素为 秦霄贤
索引为 2 --- 元素为 R1SE */

方法 some — 查找是否有一个满足条件的元素,如果有就可以停止循环了

循环特点: 根据回调函数的返回值,决定是否停止循环,如果返回true就停止,如果返回false就继续循环

// 判断数组中是否包含大于10的数字
let nums:number[] = [1,2,3,23,456,11];
// forEach
let has:boolean = false;
nums.forEach(function(num)
  if(num>10)
    has = true;
    console.log(num);
  
)
// some
nums.some(function(num)
  if(num>10)
    return true;
  
  return false
)

补充: 有两种地方可以不写类型注解

let age: number = 18 // => let age = 18
function sum(num1: number, num2: number): number  return num1 + num2 
// =>
function sum(num1: number, num2: number)  return num1 + num2

Web开发基础

DOM操作

DOM（Document Object Modal）：文档对象模型。

DOM 是浏览器提供的（浏览器特有），专门用来操作网页内容的一些 JS 对象。

目的：让我们可以使用 JS/TS 代码来操作页面（html）内容，让页面“动”起来，从而实现 Web 开发。

HTML：超文本标记语言，用来创建网页结构。

两者的关系：浏览器根据 HTML 内容创建相应的 DOM 对象，也就是：每个 HTML 标签都有对应的 DOM 对象

获取元素

document.querySelector(selector) —> 作用:获取某一个DOM元素

推荐使用id选择器

let title = document.querySelector('#title')

类型断言

概念:手动指定更加具体精确的类型

使用场景: 当你比TS更了解某个值的类型,并且需要指定更具体的类型时.

调用querySelector()通过id选择器获取DOM元素时,拿到的元素类型都是element

因为无法根据id来确定元素的类型,所以该方法就返回了一个宽泛的类型:;元素element类型. 不管h1还是img都是元素.

导致的新问题: 无法访问img元素的src属性了. 因为element类型只包含所有元素共有的属性和方法.

解决方式: 使用类型断言来手动指定更加具体的类型 (比如此处应该element类型更加具体)

语法: 值 as 更具体的类型

eg: let img = document.querySelector('#image') as HTMLImageElement

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

技巧：通过 console.dir() 打印 DOM 元素，在控制台最下面一个属性即可看到该元素的类型。
```
// document.querySelector() 方法的返回值类型为： Element
// 如果是 h1 标签：
let title = document.querySelector('#title') as HTMLHeadingElement
// 如果是 img 标签：
let image = document.querySelector('#image') as HTMLImageElement
```

document.querySelectorAll(selector) —> 作用:同时获取多个DOM元素

推荐使用class选择器

<p class="a">易烊千玺</p>
<p class="b a">千纸鹤</p>
<p class="a c">大城小爱</p>
<p class="c a b">Jackson</p>

let list = document.querySelectorAll('.a');
console.log(list); //NodeList(4) [p.a, p.b.a, p.a.c, p.c.a.b]

操作文本内容

读取： dom.innerText

设置： dom.innerText = '下课'

注意：需要通过类型断言来指定 DOM 元素的具体类型，才可以使用 innerText 属性.

注意：设置内容时，会覆盖原来的内容。

// 实现追加内容
dom.innerText = dom.innerText + ' – 周杰伦' 
// 简化 dome.innerText += ' – 周杰伦'

操作样式

style样式

读取: dom.style.样式名称

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

说明：所有的样式名称都与 CSS 相通，但命名规则为驼峰命名法.
```
dom.style.fontSize = '30px'
dom.style.display = 'none'
```

classList属性(类样式)

添加: dom.classList.add(类名1,类名2,...)

<p class="a"></p>
dom.classList.add('b', 'c') // class="a b c"

移除: dom.classList.remove(类名1,类名2,...)

<p class="a b c"></p>
dom.classList.remove('a', 'c') // class="b"

判断类名是否存在: let has = dom.classList.contains(类名)

<p class="b"></p>
dom.classList.contains('a') // false
dom.classList.contains('b') // true

操作事件

addEventListener 添加事件

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

事件名称：字符串，比如：‘click’（鼠标点击事件）、‘mouseenter’（鼠标进入事件）.

事件处理程序：回调函数，指定要实现的功能，该函数会在触发事件时调用。
```
btn.addEventListener('click', function () 
console.log('鼠标点击事件触发了')
)
```
事件对象（event），是事件处理程序（回调函数）的参数。

表示：与当前事件相关的信息，比如：事件类型（type）、触发事件的 DOM 元素（target）等。
```
btn.addEventListener('click', function (event) 
	console.log(event.type) // click
	console.log(event.target) // btn 元素
)
```
removeEventListener 移除事件

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

注意: 添加和移除的事件处理程序必须是同一个
```
function handleClick() 
btn.addEventListener('click', handleClick)
btn.removeEventListener('click', handleClick)
```
如果事件只需要触发一次，可以在添加事件时处理。

处理方式：传入第三个参数，将 once 属性设置为 true。 btn.addEventListener('click', function () , once: true )

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

注意

数组中,通常是相同类型的数据
数组索引是从0开始的.
只有调用函数后,函数中的代码才会执行
实参和形参按照顺序一一对应的.
实参必须符合形参的类型要求否则会报错.
如果没有指定函数的返回值,name函数返回值的默认类型为void(空,什么都没有)
返回值必须符合返回值额理性要求,否则会报错
return不能在函数外部使用
函数用作方法时可以省略function后面的函数名称,也叫做匿名函数
方法需要调用，所以，通过点语法拿到方法名称后，不要忘记使用小括号调用！
需要通过类型断言来指定 DOM 元素的具体类型，才可以使用 innerText 属性
添加和移除的事件处理程序必须是同一个

总结

它和js的数组,函数,变量,对象等特别相似
数组是用于存放多个数据的集合.包括索引,长度,存值取值,遍历数组
函数就是声明一次但却可以调用任意多次的一段代码.声明函数和调用函数
变量作用域有局部变量和全局变量
对象也有存值取值,内置对象和数组对象
DOM操作可以获取元素,操作文本内容,操作样式,操作事件

以上是关于盘点 TypeScript 的基础认识二的主要内容，如果未能解决你的问题，请参考以下文章

盘点 TypeScript 的基础认识二

#yyds干货盘点# 系统学习 TypeScript——基础类型

TypeScript初认识

#yyds干货盘点#带大家认识Golang中的切片数据类型

入门」全方位盘点和总结调优技术专题指南

TypeScript再认识

盘点 TypeScript 的基础认识 二

TypeScript

数组

概述

语法

数组的长度和索引

取值

存值

添加元素

遍历数组

函数

概述

意义

使用

函数参数

形参

实参

返回值

作用:

基本使用

变量作用域

局部变量

全局变量

对象

理解

创建对象

取值

存值

内置对象

数组对象

Web开发基础

DOM操作

获取元素

类型断言

操作文本内容

操作样式

操作事件

注意

总结

盘点 TypeScript 的基础认识二