仅需 2步，Vue2 使用上了 TypeScript + Composition API 写代码，爽歪歪

想使用 TS + Composition API，但是碍于项目较大，加之升级到 Vue3 的复杂性，最终决定使用折中方案：升级到 Vue@2.7，引入 TypeScript，且可以使用 Composition API，皆大欢喜。

一开始笔者各种搜索引擎，各种 chatGPT，这里找一点资料，那里找一点资料，各种配置试过后，编译仍然各种报错，折腾了好几天一筹莫展……。今天意外发现原来 @vue-cli 本身就支持生成支持 TypeScript 的模板项目，突然眼前一亮。

何必费那么多功夫东拼西凑？直接 @vue-cli 生成一个支持 TypeScript 的模板项目，然后把这个项目的配置拷贝到自己开发的项目中去，不就解决问题？说干就干，果然真香，如下2步，超级简单。

这里要注意 vue, vue-template-compiler 要升级到 2.7.0 及以上

步骤1. 使用 @vue-cli 生成一个支持 TypeScript 的示例项目

1. 首先是全局安装 @vue-cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli

2. 使用 @vue-cli 创建新项目

vue create my-project
# OR
vue ui

3. 接下来选择手动创建如下图示例，选择 Manually select features

回车下一步选择 TypeScript （上下箭头移动，按下空格选中）

4. 一路回车完成项目初始化

步骤2. 将示例项目的各种配置拷贝到自己的项目

1. 同步 package.json 中的配置到自己项目
2. 同步 .eslintrc.js 中的配置
3. 同步 tsconfig.json 中的配置
4. 同步 vue.config.js 中的配置
5. 拷贝 src 目录下的 shims-tsx.d.ts 以及 shims-vue.d.ts 到自己的项目

这里建议将所有不同的部分都同步到自己项目中

其他问题

如果编译遇到类似如下报错：

Syntax Error: Thread Loader (Worker 0)
Cannot read properties of undefined (reading 'hooks')

可考虑给 vue.config.js 增加如下配置 happyPackMode: true,

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({  
    transpileDependencies: true,  
    configureWebpack: {    
        module: {      
            rules: [        
                {          
                    test: /\.tsx?$/,          
                    loader: 'ts-loader',          
                    exclude: /node_modules/,          
                    options: {           
                        appendTsSuffixTo: [/\.vue$/], // ts-loader            
                        happyPackMode: true, // 增加这一行配置          
                    },        
                },      
            ],    
        },  
    },
});

有的项目可能需要手动配置 ts-loader，参考如上配合即可

总结：抄官方的配置不香么（站在巨人的肩膀上？手动狗头^_^）