TS 笔记

TS

interface MockVal {
  value: string;
}
const options = ref<MockVal[]>([]);
const options = ref<{ value: string }[]>([]);

//处理原生dom事件时
function handleChange(event: Event) {
  console.log((event.target as HTMLInputElement).value)
}

interface 和type的区别

大多数情况下，两者等价，有些情况有些区别
1.对象和函数二者都可以定义，基础类型数据不能用interface定义

2.扩展方式不同，interface通过extends实现，type通过&实现，并且可以相互拓展
// interface 扩展为 Type
type E = { a: string }
interface F extends E { b: number }
const obj2:F = { a: `杜杜`, b: 7 }
// type 扩展为 interface
interface G { a: string }
type H = G & {b: number}
const obj3:H = { a: `杜杜`, b: 7 }

3.interface可以被重复定义，并且会进行合并，但是type不行

联合类型

例：
const setInfo=(name:string|number)=>{}
setInfo('dudu')
setInfo(7)

可辨识联合
//定义的三个接口都包含type属性，那么type就是可辨识的属性，通过辨识type使用其他属性
interface A{
    type:1
    name:string
}
interface B{
    type:2
    age:number
}
interface C{
    type:3
   	sex:boolean
}

const setInfo=(data:A|B|C)=>{
    if(data.type === 1){
        console.log(data.name)
    }else if(data.type === 2){
        console.log(data.age)
    }else if(data.type ===3){
        console.log(data.sex)
    }
}
setInfo({type:1,name:'dudu'})

泛型

语法

语法
function identity <T>(value:T) : T {
     return value
}
例：返回对应类型的数组
const calcArray = <T>(data:T):T[] => {
    let list:T[] = []
    for(let i = 0; i < 3; i++){
        list.push(data)
    }
    return list
}

const res:string[] = calcArray<string>('d') // ok
const res1:number[] = calcArray<number>(7) // ok

type Props = {
    name: string,
    age: number
}
const res3: Props[] = calcArray<Props>({name: '杜杜', age: 7}) //ok

多类型传参

通过定义不同的字母来表示不同的参数类型
const calcArray =<T,U>{name:T,age:U}:{name:T,age:U}=>{
	const res: {name:T,age:U}={name,age}
	return res
}
const res = calcArray<string,number>('dudu',7)
console.log(res)// {name:'dudu',age:7}

泛型接口

interface A<T>{
	data:T
}
const info:A<string> ={data:'1'}
console.log(info.data)//'1'

泛型类

class clacArray<T>{
    private arr:T[]=[];
	add(value:T){
        this.arr.push(value)
    }
	getValue():T{
        let res = this.arr[0]
        console.log(this.arr)
        return res
    }
}
const res =new clacArray()
res.add(1)
res.add(2)
res.getValue() //[1,2,3]
console.log(res.getValue) // 1

泛型类型别名

type info<T>={
    name?:T
    age?:T
}
const res:info<string>={name:'dudu'}
const res1:info<number>={age:7}

泛型默认参数

const calcArray = <T = string,>(data:T):T[] => {
    let list:T[] = []
    for(let i = 0; i < 3; i++){
        list.push(data)
    }
    return list
}

泛型常用字符

T:代表type,通常用作第一个类型变量名称
K:代表key,表示对象中的 键类型
V:代表value，表示对象中的值类型
E:代表element，表示元素类型

常用技巧

extends

typeof

//还可以实现【推出类型】 如下可以推断出Props包含的类型
let info={
	name:'dudu'
    age:7
    sex:true
}
type Props=typeof info

const getInfo = (data:Props)=>{
    return data.name
}

keyof

//可以获取一个对象接口的所有key值，可以检查对象上的键是否存在
interface Props{
    name:string
    age:number
    sex:boolean
}

type PropsKey =keyof Props //包含 name，age，sex

const res:PropsKey ="name" //ok
const res:Propskey ="tel" //error

//泛型中的应用
const getInfo = <T,K extends keyof T>(data:T,key:K):T[K]=>{
    return data[key]
}
const info ={
    name:'dudu',
    age:7,
    sex:true
}
getInfo(info,'name');  //ok
getInfo(info,'tel')  //error

索引访问操作符

//通过[]进行索引访问
interface Props{
    name:string
    age:number
    sex:boolean
}
type age =Props['age']

in

//映射类型，用来映射遍历枚举类型
type name='name'|'age'|'sex'
type Props={
	[p in name]:any
}
相当于
type Props={
    name:any
    age:any
    sex:any
}

infer

//可以使用为条件语句，可以用infer声明一个类型变量并且对它进行使用
type Info<T> =T extends {a:infer U; b:infer U}?U:never
type Props = Info<{a:string;b:number}> //Props类： string|number
type Props1 = Info<number> //Props类型 ：never

Partial

Partial<T>//将所有属性都变成可选
interface Props{
    name：string
    age:number
}
const info:Partial<Props>={
	name:'dudu'
}

Required

//将所有属性变成必选 与Partial相反

Readonly

interface Props {
    name: string
    age: number
}

let info: Readonly<Props> = {
    name: 'dudu',
    age: 7
}

info.age = 1 //error read-only 只读属性

Record

Record<K extends keyof any,T>//将K中所有属性转化为T类型
interface Props{
	name:string;
    age:number
}
type InfoProps='JS'|'TS'
const Info:Record<InfoProps,Props>={
    JS:{
		name:'du',
        age:1
    },
    TS:{
        name:'ts',
        age:11
    }
}

Pick

Pick<T,K extends keyof T>//将某个类型中的子属性挑出来，变成包含这个类型部分属性的子类型
interface Props{
	name:string
    age:number
    sex:boolean
}
type nameProps=Pick<Props,'name'|'age'>
const info:nameProps={
	name：'dudu',
    age:2
}

Exclude

Exclude<T,U>//将T类型中的U类型剔除
当 T 中有 U 就会剔除对应的属性，如果 U 中又的属性 T 中没有，或 T 和 U 刚好一样的情况都会返回 nerver，且对象永远返回nerver

Extra

Extra<T,U>//从T中提取U

Omit

Omit<T,U>//将已经声明的类型进行属性剔除获取新的类型
type InfoProps={
	name:string
	age:number
	sex:boolean
}
type Props=Omit<InfoProps,'sex'>
//区别，Omit返回一个新类型，Exclude修改原类型

NonNullable

NonNullable<T>//从T中排除null和undefined
type Props=NonNullable<string|number|null|undefined>

ReturnType

ReturnType<T>//获取函数T的返回类型
type Props = ReturnType<() => string> // string
type Props1 = ReturnType<T extends U, U extends number>() => T>; // number
type Props2 = ReturnType<any>; // any
type Props3 = ReturnType<never>; // any

Parameters

Parameters<T>//用于获取函数类型的参数类型
type Props = Parameters<() => string> // []
type Props1 = Parameters<(data: string) => void> // [string]
type Props2 = Parameters<any>; // unknown[]
type Props3 = Parameters<never>; // never