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)