ts的实际应用场景合集

需求1：如何定义一个变量可以是 null 也可以是 number 类型? 例如：定时器。思路：可以利用联合类型

// | 联合类型  变量可以是两种类型之一
let timer:number|null = null
timer = setTimeout()
console.log(timer) // 3

需求2：如何定义一个数组，它的元素可能是字符串类型，也可能是数值类型？例如：数组的 push 方法。思路：数组结合联合类型来使用

 // 方法1：
  let arr3: (number | string)[] = [1]
  arr3.push(1)
  arr3.push('3')
  
  // 方法2：
  let  arr4 : Array<string | number> = [1, '2']
  arr4.push(1)
  arr4.push('3')
  
  // 方法3：
  type newType = number|string
  let arr5:newType []= [3]
  arr5.push(1)
  arr5.push('5')

需求3：模拟定义 react 中的 useState。思路：利用 元组。

function useState(n: number): [number, (number)=>void] {
        const setN = (n1) => {
            n = n1
        }
        return [n, setN]
    }

const [num ,setNum] = useState(10)

需求4：如何定义一组数据列表，只能选列表中的某一项？示例1：redux 中的 actionType。

type ActionType = 'ADD_TODO' | 'DEL_TODO'
function reducer(type:ActionType) {
  if(type === 'ADD_TODO')
}

示例2：游戏中，游戏的方向键值只能是上、下、左、右中的任意一个

// 使用自定义类型:
type Direction = 'up' | 'down' | 'left' | 'right'

function changeDirection(direction: Direction) {
  console.log(direction)
}

// 调用函数时，写上''，就会有类型提示：
changeDirection('up')

需求5：后端有时用 0, 1来标识性别，但是0，1在代码中不好读，那么用什么可以实现转换呢？思路：利用 枚举类型。

enum Gender {
      girl,
      boy
}
type User = {
     name: string,
     gender: Gender
}

const u1: User = {
     name: '小花',
     gender: Gender.girl // 写代码的时候，可以利用代码提示
}

console.log(u1)