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>()
