基于已经创建的vue3业务组件库接入typescript

初始化

// 首先保证项目已安装vue/cli-service
npm install --save-dev @vue/cli-service

//安装完成后在项目文件夹执行vue add typescript初始化typescript;*
vue add typescript

*注意：如果执行vue add typescript报vue : 无法加载文件 C:\Program Files\nodejs\vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink 
/?LinkID=135170 中的 about_Execution_Policies；导致原因：首次在电脑上启动 Windows PowerShell 时，执行策略极大可能是 Restricted（默认设置）。Restricted 策略不允许任何脚本运行，防止执行不信任的脚本。

上述问题解决方法：以管理员身份运行vscode：命令行输入set-ExecutionPolicy RemoteSigned；

初始化成功后项目中应该会出现tsconfig.json等文件，并且将js后缀文件替换为ts后缀文件；

项目改动

• 如果设置了路径别名如："@/"，记得在tsconfig.json文件中做如下配置，否则会报红：Cannot find module ‘xxx‘ or its corresponding type declarations

// tsconfig.json
{
    compilerOptions: {
        "paths": {
             "@/*": [
                 "packages/*"
             ],
        },
    }
}

• props写法改变

  // 修改前 
   
    const props = defineProps({
      roleList: {
        type: Array,
        default: () => {
          return []
        }
      },
      options: {
        type: Object,
        default: () => ({})
      },
    })
  
  ----------------------------------------------------------------------
  
  // 修改后 用withDefaults去配置props默认值,ts做类型限制，非必填用props?: type
  
    interface AuthListOptions {
      name: string; 
      secName: string;
      showTips: boolean;
      showClose: boolean;
    }
  
    const props = withDefaults(
      defineProps<{
        roleList: Array<any>,
        options?: AuthListOptions
      }>(),
      {
        roleList: () => []
      }
    )