Vue3+TS Day27 - JavaScript的基本类型、

一、JavaScript 的类型

1、哪些是JavaScript中的基本数据类型？基本类型有什么特点？（充分理解）

• 【基本数据类型】是一种即非对象也无方法的数据。在JavaScript中，共有7中基本数据类型：string、number、bigint、boolean、null、undefined、symbol
• 多数情况下，基本数据类型直接代表了最底层的语言实现。
• 所有基本数据类型的值都是【不可改变】的。但需要注意的是，基本类型本身和一个赋值为基本类型的变量的区别。变量会被赋予一个新值，而原值不能像数组、对象以及函数那样被改变。

2、变量的声明格式，string和String有区别吗？

image.png

3、声明变量的关键字，为什么不推荐使用var了？

image.png

4、JavaScript中的number类型，区分整数和浮点数吗？

• 不区分

image.png

5、了解变量的类型推导？有类型推导后，是否添加对应的类型注解？

• 个人习惯：如果可以推导出对应的标识符类型时，一般情况下不加类型注解。

image.png

6、数组类型注解的写法注意点？

// 确定一个事实: names是一个数组类型, 但是数组中存放的是什么类型的元素呢?
// 不好的习惯: 一个数组中在TypeScript开发中, 最好存放的数据类型是固定的(string)
// 类型注解: type annotation
const names1: Array<string> = [] // 不推荐(react jsx中是有冲突   <div></div>)
const names2: string[] = [] // 推荐

// 在数组中存放不同的类型是不好的习惯
// names.push("abc")
// // names.push(123)

二、TypeScript 的类型

1、any类型？

// 当进行一些类型断言 as any
// 在不想给某些JavaScript添加具体的数据类型时(原生的JavaScript代码是一样)
let message: any = "Hello World"

message = 123
message = true
message = {

}

// message()
// message.split(" ")

console.log(message)
const arr: any[] = []

export {}

2、unknown类型

function foo() {
  return "abc"
}

function bar() {
  return 123
}

// unknown类型只能赋值给any和unknown类型
// any类型可以赋值给任意类型

let flag = true
let result: unknown // 最好不要使用any
if (flag) {
  result = foo()
} else {
  result = bar()
}

let message: string = result
let num: number = result

console.log(result)

export {}

3、void类型

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

sum(20, 30)
// sum("abc", "cba")

4、never类型

// function foo(): never {
//   // 死循环
//   while(true) {

//   }
// }

// function bar(): never {
//   throw new Error()
// }

// 提前
// 封装一个核心函数
function handleMessage(message: string | number | boolean) {
  switch (typeof message) {
    case 'string':
      console.log("string处理方式处理message")
      break
    case 'number':
      console.log("number处理方式处理message")
      break
    case 'boolean':
      console.log("boolean处理方式处理message")
      break
    default:
      const check: never = message
  }
}

handleMessage("abc")
handleMessage(123)

// 张三
handleMessage(true)

5、元组

• 就是数组里面能放不同类型的数据，并且还有各自确定的类型

// tuple元组: 多种元素的组合
// "why" 18 1.88

// 1.数组的弊端
// const info: any[] = ["why", 18, 1.88]
// const infoObj = {
//   name: "why",
//   age: 18,
//   height: 1.88
// }

// const name = info[0]
// console.log(name.length)


// 2.元组的特点
const info: [string, number, number] = ["why", 18, 1.88]
const name = info[0]
console.log(name.length)
// const age = info[1]
// console.log(age.length)

export {}

6、函数的参数和返回值类型

// 给参数加上类型注解: num1: number, num2: number
// 给返回值加上类型注释: (): number
// 在开发中,通常情况下可以不写返回值的类型(自动推导)
function sum(num1: number, num2: number) {
  return num1 + num2
}

// sum(123, 321)

7、对象类型

// Point: x/y -> 对象类型
// {x: number, y: number}
function printPoint(point: {x: number, y: number}) {
  console.log(point.x);
  console.log(point.y)
}

printPoint({x: 123, y: 321})

export {}

8、可选参数类型

// Point: x/y/z -> 对象类型
// {x: number, y: number, z?: number}
function printPoint(point: {x: number, y: number, z?: number}) {
  console.log(point.x)
  console.log(point.y)
  console.log(point.z)
}

printPoint({x: 123, y: 321})
printPoint({x: 123, y: 321, z: 111})

export {}

9、联合类型

// number|string 联合类型
function printID(id: number|string|boolean) {
  // 使用联合类型的值时, 需要特别的小心
  // narrow: 缩小
  if (typeof id === 'string') {
    // TypeScript帮助确定id一定是string类型
    console.log(id.toUpperCase())
  } else {
    console.log(id)
  }
}

printID(123)
printID("abc")
printID(true)

10、类型别名

// type用于定义类型别名(type alias)
type IDType = string | number | boolean
type PointType = {
  x: number
  y: number
  z?: number
}

function printId(id: IDType) {

}

function printPoint(point: PointType) {
  
}