typescript数据类型

一、数据类型

1.数组类型

1. 明确的指定<数组>的类型注解：
   1. string[]:数组类型，并且数组中存放的字符串类型
   2. Array：数组类型，并且数组中存放的是字符串类型
2. 注意事项：在真实的开发中，数组一般存放相同 类型，不要存放不同的类型

let names: any[] = ['abc', 'cba', 'nba', {}]
names.push('aaa')
names.push(123)

let nums: Array<number> = [123, 456, 789]

2.Object 类型

let info: {
  name: string
  age: number
  height: number
} = {
  name: 'why',
  age: 19,
  height: 1.99,
}

3.函数类型

1. 参数

   在定义一个typescript中的函数时，都要明确的指定参数的类型

   function num(num1: number, num2: number) {
     return num1 + num2
   }
   num(123, 456)
   

2. 返回值

   在定义一个Typescript中的函数时，返回值类型可以明确的指定，也可以自动进行类型推导

   function num(num1: number, num2: number): number {
     return num1 + num2
   }
   num(123, 456)
   

3. 匿名函数参数类型

   1. 这是因为typescript会根据forEach函数的类型以及数组的类型推断出item的类型
   2. 这个过程称之为上下文类型（contextual typing），因为函数执行的上下文可以帮助确定参数和返回值的类型

   let name: string[] = ['abc', 'bca', 'cba']
   // 匿名函数是否需要添加类型注解呢？最后不要添加类型注解
   name.forEach(function (item, index, arr) {})
   

4.对象类型

1. 在对象我们可以添加属性，并且告知typescript该属性需要是什么类型
2. 属性之间可以使用，或者；（分号）来分割，最后一个分隔符是可选的
3. 每个属性的类型部分也是可选的，如果不指定，那么就是any类型

type PointType = {
  x: number
  y: number
  z?: number//可选类型
}
// 对象类型和函数类型结合使用
function pringCoordinate(point: PointType) {
  console.log('x坐标', point.x)
  console.log('y坐标', point.y)
}
pringCoordinate({ x: 1, y: 2 })

5.any类型

1. any类型就表示不限制标识符的任意类型，并且可以在该标识符上面进行任意的操作（在Typescript中回到JavaScript中）0
2. 在某些情况下，我们确实无法确定一个变量的类型，并且可能它会发生一些变化，这个时候我们可以使用any类型（类似于Dart语言中的dynamic类型）。
3. any类型有点像一种讨巧的TypeScript手段：
   1. 我们可以对any类型的变量进行任何的操作，包括获取不存在的属性、方法；
   2. 我们给一个any类型的变量赋值任何的值，比如数字、字符串的值；
4. 如果对于某些情况的处理过于繁琐不希望添加规定的类型注解，或者在引入一些第三方库时，缺失了类型注解，这个时候我们可以使用any：
   1. 包括在Vue源码中，也会使用到any来进行某些类型的适配；

let id: any = 'aaa'
id = 'bbbb'
id = 123
console.log(id)
id = { name: 'why', level: 99 }

6.unknown类型

1. unknown类型默认情况下在上面进行任意的操作都是非法的
2. 要求必须进行类型的校验（缩小），才能根据缩小之后的类型，进行对应的操作

let foo: unknown = 'aaa'
foo = 123
if (typeof foo == 'string') {
  // 类型缩小
  console.log(foo.length)
}

7.void类型

1. 在TS中如果一个函数没有任何的返回值，那么返回值的类型就是void类型
2. 如果返回值是void类型，那么我们也可以返回undefined

function sum(num1: number, num2: number): void {
  console.log(num1, num2)
}

// 1.定义要求传入的函数的类型
type ExecFnType = (...args: any[]) => void
// 2.定义一个函数，并且接收的参数也是一个函数，而且这个函数的类型必须是ExecFnType
function delayExecFn(fn: ExecFnType) {
  setTimeout(() => {
    fn('why', 18)
  }, 1000)
}

// 3.执行上面函数，并且传入一个匿名函数
delayExecFn((name, age) => {
  console.log(name, age)
})

8.tuple类型

1. 数组中通常建议存放相同类型的元素，不同类型的元素是不推荐放在数组中。
2. 元组中每个元素都有自己特定的类型，根据索引值获取到的值可以确定对应的类型；

// 元组数据结构中可以存放不同的数据类型
let info: [string, number, number] = ['why', 18, 1.88]