TypeScript(2)

1.数组

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

let names: string[] = ['张三', '李四', '王五']

注：数组中，通常是相同类型的数据

1.创建数组

let names: string[] = []

表示一个空数组,数组的类型注解是由两部分组成：类型 [],此处表示字符串类型的数组（只能出现字符串类型）

let names: string[] = ['张三','李四']
console.log(names)

语法二

let ages: number[] =new Array(20,30)
console.log(ages)

2.数组长度和索引

数组长度：表示数组中元素的个数，通过数组的length属性来获取
获取数组的长度

console.log(ages.length) // 2

数组索引：数组的序号（下标），数组中元素与索引意义对应
注意:数组索引是从0开始的

// 数组名称[索引]
console.log(ages[1]) // 30

3.存值和取值

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

ages[1] = 40
console.log(ages) // 20, 40

先获取，再存值

添加元素
存值的语法是：数组名称[索引] = 新值,根据索引是否存在，有两种可能：1修改元素 2添加元素

ages[ages.length] = 200
console.log(ages) // 20,40,200

4.遍历数组

遍历数组，就是把数组中的所有元素挨个取值一次

for(let i:number = 0; i< ages.length; i  ) {
	console.log(ages[i])
}

案例：求数组元素和

 let nums: number[] = [1,2,3,4,5,6]
 let sum: number = 0
  for(let i: number=0;i<nums.length;i  ) {
      sum  = nums[i]
  }
  console.log(sum) // 21

案例：找出数组中的最大值

let nums2: number[] = [11, 23, 4 ,45, 6]
let max: number = nums[0]
for(let i = 1; i<nums2.length;i  ) {
    max = nums2[i] > max ? nums2[i] : max
}
console.log(max)  // 45

2.函数

使用函数来封装相似的代码，在需要的时候调用函数，相似的代码不再重复写
函数的使用分为两步： 1.声明函数 2.调用函数
声明函数

function 函数名称() {
	函数体
}

函数名称：推荐以动词开头，因为函数表示做一件事情，实现一个功能
函数体： 表示要实现功能的代码，复用的代码
调用函数

函数名称()

只有调用函数之后，函数才会执行

函数参数
函数参数可以增加函数的灵活性、通用性，针对相同的功能，能够适应更多的数据（值）

形参和实参
1.形参：声明函数时指定的参数，放在声明还是的小括号中

function getMax(nums: number[]){}

指定函数可接收的数据
2.实参：调用函数时传入的参数，放在调用函数的小括号中

getMax([1,2,3,4])

根据具体的功能，函数参数可以有多个，参数之间使用逗号(,)来分隔
实参和形参按照顺序，一个一个地对应
实参必须符合形参的类型要求，否则会报错

 function fn(name: string, age: number) {
   console.log(name, age)
 }
 fn('张三', 20)

function getMax(nums: number[]): void {
     let max: number = nums[0]
     for(let i = 1; i<nums2.length;i  ) {
         max = nums[i] > max ? nums[i] : max
     }
     console.log(max)
 }
 let nums2: number[] = [11, 23, 4 ,45, 6]
 getMax(nums2)

函数返回值
将函数内部计算的结果返回，以便于使用改结果继续参与其他的计算
如果没有指定函数的返回值，那么，函数返回值的默认类型就是void，空

function fn(): 类型注解 {
	return 返回值
}

return 关键字
1.将函数内部的计算结果返回
2.终止函数代码执行，return后面的代码不会执行
3.return只能在函数中使用，否则会报错
4.return可以单独使用（后面可以不跟内容），用来刻意终止函数的执行

案例: 打印两个数组中最大值的和

function getMax(nums: number[]): number {
    let max: number = nums[0]
    for(let i = 1; i<nums2.length;i  ) {
        max = nums[i] > max ? nums[i] : max
    }
    // console.log(max)
    return max
}
let nums1: number[] = [11, 23, 4 ,45, 6]
let nums2: number[] = [11, 99, 4 ,45, 6]
let sums: number = getMax(nums1)   getMax(nums2) 
console.log(sums)

变量的作用域
一个变量的作用域指的是：代码中定义变量的区域，它决定了变量的使用范围
在TS（或JS）中，函数可以形成作用域，叫做函数作用域
根据范文的不同，变量可以分为两种：局部变量与全局变量
局部变量：表示在函数内部声明的变量，该变量只能在函数内部使用
全局变量：表示在函数外部声明的变量，可以全局使用

2.对象

1.对象基本使用

TS中的对象，也是由特征和行为组成的，有各自专业的名称：属性（特征）和方法（行为）
理解TS中对象：一组相关属性和方法的集合，并且是无序的

{
	name: '张三',
	age: 20,
	sing: funtion() {
		console.log('张三在唱歌')
	}
}

对象在描述事物（一组相关数据）时，更加清晰，明了

let 对象名 = {
	键1: 值1，
	键2: 值2
}

如果一个函数是单独出现的，没有与对象关联，称为函数；否则称为方法

接口
对象的类型注解: 建立一种七月，约束对象的结构

let person: {
     name: string
	 age: number
	 } = {
     name: '张三',
     age: 20
 }
 console.log(person)

对象方法的类型注解

let person: {
   name: string
      age: number
      sing: () => void
      sum: (num1: number, num2:number) => number
     } = {
     name: '张三',
     age: 20,
     sing: function() {
         console.log(this.name '在唱歌')
     },
      sum: function(num1: number, num2:number) => {
      	return num1   num2
      }
 }
 console.log(person)

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

2.接口的使用

直接在对象名称后面写类型注解的坏处：1.代码结构不简洁 2.无法复用类型注解
接口:为对象的类型注解命名，并为代码建立契约来约束对象的结构

interface IUser {
	name: string
	age: number
}
let p1: IUser = {
	name: '张三',
	age: 22
}

3.对象取值和存值

获取对象中的属性，称为：访问属性
获取对象中的方法，称为：访问方法
通过点语法（.），就可以访问对象的属性

interface IUser {
       name: string
       age: number
       sing: (name: string) => void
}
 let p1: IUser = {
     name: '张三',
     age: 20,
     sing: function(name) {
         console.log(name   '在唱歌')
     }
 }
 console.log(p1.name)
 p1.sing(p1.name)

设置新的值，必须符合该属性的类型要求

3.内置对象

编程语言自带或第三方提供

1.数组对象

1.length属性:获取数组长度

let names: string[] = ['张三', '李四']
console.log(names.length) // 2

2.push方法，往数组中添加一个元素

names.push('王五')

3.数组对象-forEach
遍历数组

names.forEach(function(item, index){
	// item 元素
	// index 索引
})
// 此处的回调函数，作为forEach的实参传入 实参不应该指定类型注解

4.数组对象-some
遍历数组，查找是否有一个满足条件的元素（如果有，就可以停止循环）
循环特点：根据回调函数的返回值，决定是否停止循环，如果返回true，就停止，返回false，继续循环

let has: boolean = name.some(function(){
	return name === '张三'
})

4.类型推论

在TS中，某些没有明确指出类型的地方，类型推论会被帮助提供类型
发生类型推论的两种场景 1.声明变量并初始化时 2.决定函数返回值时

let age: number = 18 ->  let age = 18
function getMax(num1: number, num2: number) {
	return num1   num2
}

5.类型断言

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

类型断言，来手动指定更加具体的类型
值 as 更具体的类型

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

通过console.dir()打印DOM对象，来查看该元素的类型

这篇好文章是转载于：学新通技术网