基于vue3的ts生态库学习手记，遇到啥写啥，还在坑里，持续更新中 ...

typescript

any、unknown、never类型： unknown与any类似，但unknown的使用范围小一点，大概意思就是：

any：虽然我不知道你是啥，你干啥我也不管

unknown：你都不知道你是啥，啥都不准你干

function f1(a: any) {
  a.b(); // OK
}
function f2(a: unknown) {
  a.b();//Object is of type 'unknown'.
}

never：属于是所有类型的子类型，可以用于变量在类型收窄中不可能为真的情况，尤雨溪在知乎上的回答很直观：


interface Foo {
    type: 'foo'
  }
  
  interface Bar {
    type: 'bar'
  }
  
  type All = Foo | Bar 

  function handleValue(val: All) {
    switch (val.type) {
      case 'foo':
        // 这里 val 被收窄为 Foo
        break
      case 'bar':
        // val 在这里是 Bar
        break
      default:
        // val 在这里是 never
        const exhaustiveCheck: never = val
        break
    }
  }

//如果后续的调整改动了All类型
type All = Foo | Bar | Baz

个时候在 default branch 里面 val 会被收窄为 Baz，导致无法赋值给 never，产生一个编译错误。所以通过这个办法，你可以确保 handleValue 总是穷尽 (exhaust) 了所有 All 的可能类型。

链接：www.zhihu.com/question/35…

Promise< T> 泛型的使用 Promise的泛型T代表promise变成成功态之后resolve的值，resolve(value),这可以用于对axios的请求后的类型限制

vue3

组件ts改造

//组件的script加入语言标识，setup的语法糖还是比较香，不过目前还是比较适应常规写法
<script lang="ts"></script>

data的定义有ref与reactive两种方式：

//ref泛型的方式去约束
const refString = ref<string>('ref testing');

//reactive的属性使用断言的方式约束，不过interface的定义最好单独抽出一个文件export出来
interface Post {
    title:string
    id:number
}
const state = reactive({
  post:<Post[]>[{title:'test',id:1}], // <>断言的方式（这种似乎要好看些）
  post2:{title:'1',id:1} as Post // as断言的方式
});

PropType对props的约束

props:{
    post:{
      type : Object as PropType<Post>,//此处 Object 并非作为数据类型存在，而是作为构造函数存在，为构造函数指定类型，应用 PropType 这个 API
      required:true
    }
  }
  
  //PropType的导出声明如下
  export declare type PropType<T> = PropConstructor<T> | PropConstructor<T>[];

pinia

pinia是新一代的状态管理器，被认为是下一代vuex，官方人员开发，属于是根正苗红，相较于vuex它有了更完善的ts支持，更轻量，使用上去除了mutation模式的提交，store内部的调用更自由，结合vue3可谓是居家旅行，造福世人之良药官方链接

//安装
npm run pinia --save

持续更新 typescript+vue3+pinia 跳坑手记

typescript

vue3

组件ts改造

pinia