TypeScript笔记

esmodule项目中使用ts

1. 安装 tsc 工具
2. 安装 typescript 包
3. 安装 @types/node 包

默认编译出来的文件引用不带.js后缀，需要在tsconfig.json中配置：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "NodeNext",
    "moduleResolution": "NodeNext"
  }
}

在.ts文件中需要显示导入.js文件：

// index.ts
import utils from './utils.js';

这样编译出来的js文件在引入别的文件时才会有.js后缀, 否则在node环境下会报错.

获取组件的类型

使用 InstanceType<typeof ComName>：

import { ref, type Ref } from 'vue';
import { AButton } from 'ant-design-vue';
const buttonRef: Ref<InstanceType<typeof AButton>> = ref();

封装成 composable:

import { ref } from 'vue';

export function useCompRef<T extends abstract new (...args: any) => any>() {
  return ref<InstanceType<T>();
}

// usage:
import { AButton } from 'ant-design-vue';
const btnRef1 = useCompRef<typeof AButton>;

export function useCompRef1<T extends abstract new (...args: any) => any>(_comp: T) {
  return ref<InstanceType<T>();
}

// usage:
const btnRef2 = useCompRef(AButton);