乱七八糟ts学习

//前边的data应该和后边的同名
const { data } = {data:{name:'张三'}}
console.log(data.value)  //{name:'张三'} 

const { res } = {data:{name:'张三'}}
console.log(res.value)  //undefined

const { data } = useFetch<{ userName: string; email: string }>("/api/user/getInfo");
/*
    接口返回值格式：
    {
        data:{ userName:'', email:''}
    }
*/

// 标注类型
const year: Ref<string | number> = ref('2020')
 
//传入一个泛型参数，来覆盖默认的推导行为：
// 得到的类型：Ref<string | number>
const year = ref<string | number>('2020')

2.父子传参 defineProps ,  通过withDefaults配置默认值:

// 标准类型
 
const props = defineProps({
  foo: { type: String, required: true },
  bar: Number
})
 
//  “运行时声明”
//2.1 无默认值：
const props1 = defineProps<{
        name: string;
        isActive: boolean;
        rightDisable: boolean;
        tabStyleType: number;
        modelValue: { key: number; title: string; subTitle: string };
    }>();
// 2.2 通过 withDefaults编译器设置默认值： 解构默认值
const props2 = withDefaults(
    defineProps<{
        name: string;
        isActive: boolean;
        rightDisable: boolean;
        tabStyleType: number;
        modelValue: { key: number; title: string; subTitle: string };
    }>(),
    {
        isActive: false,
        rightDisable: false,
        tabStyleType: 1
    }
);
 
 
3 通过单接口定义：将 props 的类型移入一个单独的接口中
interface Props {
  foo: string
  bar?: number
}
 
const props = defineProps<Props>()

3、子组件通信与父组件  emit

3.1  方法一： 标注类型
const emits = defineEmits<{
    (e: "update:modelValue", data: any): void;
    (e: "rightClick"): void;
}>();
3.2  方法二：运行时
const emits = defineEmits(["update:modelValue", "rightClick"]);
 
使用 emits("update:modelValue", newVal);
     emits("rightClick", newVal);

4、计算属性

// 4.1 取值：
  const rightTabs = computed(() => {
       return [{ label: "页面设置", value: 1 }];
  });
// 4.2 双向：
const previewArr = computed({
    get: () => {
        return obj;
    },
    set: (newVal) => {
        updata(newVal);
    }
});
 
 
标注类型：
const double = computed<number>(() => {
  // 若返回值不是 number 类型则会报错
  return  333 * 20;
})

联合类型(注意有没有括号区别)

// 带括号的意思, 数字联合字符串类型 组成的数组
const arr3: (number | string)[] = [1, '2']

// 不带括号写法的意思, 数字 和 字符串数组 联合的类型, 要么数字, 要么字符串数组
const arr4: number | string[] = ['s', 'd']

类型断言

手动指定一个值的类型

语法规则：

• <类型>值或者对象
• 值或者对象 as 类型

  
  function add(x:number|string):number{
    //转换成联合类型中不存在的类型会报错
    const str=x as string //告诉ts 我更了解这个类型，就可以使用这个类型的全部方法
  }
   
  function getLength(a:number|string):number{
      //if(a as string).length(){
      if(<string>a).length){
          return (<string>a).length
      }else{
          return a.toString().length
      }
  }

  泛型

function echo<T>(arg:T):T{
  //1.T只是泛型的名称，可任意命名
  //2.第一个T占位符，可以是任意类型
  //3.第二个T参数类型
  //4.第三个T返回值类型
  return arg
}
//传入什么类型，返回什么类型
const str:string = 'str'
const res=echo(str) //直接填 'str',会进行类型推论

function swap(T,U)(tuple:[T,U]):[T,U]{
  return [tuple[0],tuple[1]] 
  //tuple[0]传入的T类型，tuple[1]传入的U类型
}
const res2=swap(['string',123])


//函数中
function echoWidthArr<T>(arg:T):T{
  console.log(arg.length) //会报错，因为不知道类型是什么，不能确定有length方法
  return arg
}
//解决办法
interFace IWidthLength{
  length:number //只要length属性返回number类型
}
function echoWidthArr<T extends IWidthLength>(arg:T):T{
  console.log(arg.length) 
  return arg
}
echoWidthArr('str')
echoWidthArr({length:3,width:10})
echoWidthArr([1,2,3])

//类中
class Queue<T>{
  private data=[];
  push(v:T){ //v:number
    return this.data.push(v)  
  }
  pop():T{
    return this.data.pop(v)
  }
}
const q=new Queue
//const q=new Queue<number> 可限制推入的类
q.push('123')
q.pop().toFixed() //pop的事string类型，却调用了数字方法。我们希望push和pop的类型相同


interface keyPair<T,U>{
  key:T
  value:U
}
let kp1:keyPair<number,string>={key:1,value:'string'}
let kp2:keyPair<string,number>={key:'1',value:6}


let kp3:number[]=[1,2,3]
let kp4:Array<number>=[1,2,3]