TS学习——精选推荐

TS学习{
// TypeScript ⾥
// undefined 和 null 两者有各⾃的类型分别为 undefined 和 null。

let u: undefined = undefined
let n: null = null
console.log('undefined的类型', u)
console.log('null的类型', n)
// 定义字符串类型
const userName: string = 'zhangsan'
// 定义数字类型
const age: number = 18
console.log(userName, age)
// 定义数字数组
const arr: number[] = [1, 2, 3, 4]
// 定义字符串数组
const arr1: string[] = ['1', '2', '3']
console.log('数字数组', arr)
console.log('字符串数组', arr1)
// 联合类型定义个定时器
let timer: number | null = null
timer = setTimeout(() => {}, 1000)
// 联合类型定义⼀个有数字和字符串的数组
let arr3: (string | number)[] = [1, 2, '3']
console.log('联合类型数组', arr3)
// ⾃定义类型别名推荐⼤写⼀个类型写起来负责很多地⽅⽤到
type CustomAaary = (string | number)[]
const arr4: CustomAaary = [1, 2, 3, 'sfd']
}
// 函数类型
function add(num1: number, num2: number): number {
return num1 + num2
}
console.log(add(1, 2))
// 定义箭头函数
const add2 = (num1: number, num2: number): number => {
return num1 + num2
}
console.log(add2(3, 4))
// 统⼀定义函数的类型（⾃定义函数的类型）
type Fn = (n1: number, n2: number) => number
const add3: Fn = (n1, n2) => {
return n1 + n2
}
console.log(add3(5, 6))
// void类型⼀个函数没有返回值可以设置返回值的类型为 void
function sayHello(params: string): void {
console.log('hello Ts', params)
}
// 函数的可选参数可选参数必须放在可以选参数的后⾯
// 接⼝来描述对象
interface User {
name: string
age: number
gender: boolean
sayHello: (params: string) => void
add: (n1: number, n2: number) => number
}
const user1: User = {
name: 'John',
age: 28,
gender: true,
sayHello() {
console.log('hhhhhhh')
},
add(num1, num2) {
return num1 + num2
},
}
const user: {
name: string
age: number
sayHi(): void
} = {
name: 'John',
age: 28,
sayHi() {
console.log('11111')
},
}
const Teacher: {
name: string
age: number
hobbies: string[]
sayHi(): void
sleep(time: number): number
} = {
name: '乔⽼师',
age: 38,
hobbies: ['洗脚', '⼤保健'],
sayHi() {
console.log('⼤家好')
},
sleep(time) {
return time + 1000
},
}
// type（对象）类型⽐接⼝类型更常⽤因为还可以定义更多的类型type Teacher = {
name: string
age: number
hobbies: string[]
sayHi(): void
sleep(time: number): number
}
// 接⼝继承 interface 才有 type 没有 extends
// 定义变量并且赋值的时候会发⽣类型推断可以不指定类型
let num = 11
let str = 'ddd'
// 函数的返回值会根据参数的类型进⾏类型推断可以不指定类型// 字⾯量直接量通过字⾯的意思就能看懂这个值的类型
// action_type 中会⽤到
interface User22 {
name: string
age: number
gender: 'MAN' | 'WOMAN'
}
const user22: User22 = {
name: 'John',
age: 28,
gender: 'MAN',
}
type action_type = 'ADD' | 'SUB' | 'DEL' | 'EDIT'
// 如果想要⽤类型⽽且类型可控就可以⽤枚举
// 定义枚举类型
enum Direction {
// 指定枚举类型的值
Up,
Down,
Left,
Right,
}
// 类型断⾔通过as 进⾏断⾔
// 断⾔a链接
const box = document.getElementById('box') as HTMLAnchorElement console.log(box.href)
// 断⾔图⽚
const img = document.getElementById('img') as HTMLImageElement console.log(img.src)
// 泛型函数传⼊什么类型返回什么类型
function fn<Type>(value: Type): Type {
return value
}
let res = fn(10) // 如果可以推断类型前⾯不要加泛型标签
let rt = <string>fn('22')
// 泛型可以通过 extens 缩⼩泛型的范围⽤ <> 指定泛型
function setElement<Type extends HTMLElement>(element: Type) { console.log(element.innerHTML)
return element
}
// 泛型多个类型
function getProperty<Type extends Object, Key extends keyof Type>( obj: Type,
key: Key
) {
return obj[key]
}
getProperty({ name: 'zhangsan', age: 18 }, 'age')
getProperty({ a: 'b', c: 'd' }, 'a')
// 四个泛型⼯具类型
// partial 把⼀个对象的属性变为可选的属性
type patialUser = Partial<User22>
// Readonly 把⼀个对象的属性变为只读属性
type ReadonlyUser = Readonly<User22>
// pick ⼀组属性中选出⼀些属性作为新属性
type PickUser = Pick<User22, 'age'>
// Omit ⼀组属性中排除⼀些属性这⾥排除 'age' 'name'
type OmitUser = Omit<User22, 'age' | 'name'>
// 索引签名类型
// [n: number]: T;
// store中
// 初始值要设置类型 action要设置类型 action包含两部分 type 和payload // 函数参数和返回值也要指定类型
// action中同步的指定同步的类型异步的通过指定 ThunkAction的类型// 如何获取Rootstate的类型
// 泛型参数1：指定state的类型
// 泛型参数2：指定返回值的类型
// typeof可以获取到某个值的类型值可以是简单类型也可以是复杂类型// ReturnType 可以获取某个函数类型的返回值
// unknow 和any 都是任意类型 unknown要收窄类型更加安全
// R：thunk的action的返回类型 void Promise<void>
// S: 需要指定个getState的返回类型 RootState
// E: extra: 额外的参数 any
// A: 需要指定Action的类型 Action AnyAction [extraProps: string]: any
// ThunkAction<R, S, E, A>
// axios<T> axios.get<T>() axios.post<T>()
// T默认是any类型⽤户指定返回值data的类型
// 如何给axios指定泛型
// axios.post<T>()。