0
# Vue CLI TypeScript Plugin
1

2
Vue CLI TypeScript Plugin adds comprehensive TypeScript support to Vue.js projects. It provides webpack configuration, project scaffolding, file conversion capabilities, and build optimization features including caching and parallel processing.
3

4
## Package Information
5

6
- **Package Name**: @vue/cli-plugin-typescript
7
- **Package Type**: npm (Vue CLI Plugin)
8
- **Language**: JavaScript
9
- **Installation**: `vue add typescript` or `npm install @vue/cli-plugin-typescript`
10

11
## Core Imports
12

13
As a Vue CLI plugin, this package exports functions that integrate with the Vue CLI ecosystem:
14

15
```javascript
16
// Main plugin function (webpack configuration)
17
const plugin = require('@vue/cli-plugin-typescript');
18

19
// Generator function (project scaffolding)
20
const generator = require('@vue/cli-plugin-typescript/generator');
21

22
// Prompts configuration
23
const prompts = require('@vue/cli-plugin-typescript/prompts');
24
```
25

26
## Basic Usage
27

28
This plugin is typically added to Vue CLI projects via the Vue CLI command:
29

30
```bash
31
# Add TypeScript support to an existing Vue project
32
vue add typescript
33

34
# Create new Vue project with TypeScript
35
vue create my-project --default
36
# Then add TypeScript
37
cd my-project
38
vue add typescript
39
```
40

41
The plugin automatically configures:
42
- TypeScript compilation via ts-loader
43
- Type checking with fork-ts-checker-webpack-plugin
44
- Build optimization with cache-loader and thread-loader
45
- Vue file TypeScript support
46
- Project scaffolding with TypeScript templates
47

48
## Architecture
49

50
The plugin consists of several key components:
51

52
- **Main Plugin Function**: Webpack configuration for TypeScript compilation and optimization
53
- **Generator Module**: Project scaffolding, dependency management, and template rendering
54
- **File Converter**: JavaScript to TypeScript file conversion utilities
55
- **Migrator**: Handles migration of existing projects to TypeScript
56
- **Codemods**: AST transformations for code migration (Vue 3 compatibility)
57
- **Template System**: TypeScript project templates and configuration files
58

59
## Capabilities
60

61
### Webpack Configuration
62

63
Main plugin function that configures webpack for TypeScript support with performance optimizations.
64

65
```javascript { .api }
66
/**
67
 * Main plugin function that configures webpack for TypeScript compilation
68
 * @param api - Vue CLI service API instance
69
 * @param projectOptions - Project configuration options
70
 */
71
function plugin(api, projectOptions): void;
72
```
73

74
[Webpack Configuration](./webpack-config.md)
75

76
### Project Generation
77

78
Generator function for scaffolding TypeScript support in Vue projects with dependency management and template rendering.
79

80
```javascript { .api }
81
/**
82
 * Generator function for adding TypeScript support to Vue projects
83
 * @param api - Generator API instance
84
 * @param options - TypeScript configuration options
85
 * @param rootOptions - Root project options
86
 * @param invoking - Whether plugin is being invoked late
87
 */
88
function generator(
89
  api, 
90
  options: GeneratorOptions, 
91
  rootOptions?: RootOptions, 
92
  invoking?: boolean
93
): void;
94

95
interface GeneratorOptions {
96
  classComponent?: boolean;
97
  skipLibCheck?: boolean;
98
  convertJsToTs?: boolean;
99
  allowJs?: boolean;
100
}
101

102
interface RootOptions {
103
  vueVersion?: string;
104
  [key: string]: any;
105
}
106
```
107

108
[Project Generation](./project-generation.md)
109

110
### File Conversion
111

112
Utilities for converting JavaScript files to TypeScript during project setup.
113

114
```javascript { .api }
115
/**
116
 * Converts JavaScript files to TypeScript
117
 * @param api - Generator API instance  
118
 * @param options - Conversion options
119
 */
120
function convert(api, options: ConvertOptions): void;
121

122
interface ConvertOptions {
123
  convertJsToTs?: boolean;
124
}
125
```
126

127
[File Conversion](./file-conversion.md)
128

129
### Project Migration
130

131
Migration utilities for upgrading existing projects to TypeScript.
132

133
```javascript { .api }
134
/**
135
 * Migrates existing projects to TypeScript support
136
 * @param api - Migrator API instance
137
 * @param options - Migration options
138
 * @param rootOptions - Root project options  
139
 */
140
function migrator(api, options: any, rootOptions: RootOptions): void;
141
```
142

143
[Project Migration](./project-migration.md)
144

145
## Installation Prompts
146

147
```javascript { .api }
148
/**
149
 * Configuration prompts for plugin installation
150
 * Array of prompt definitions for user configuration during installation
151
 */
152
const prompts: PromptDefinition[];
153

154
interface PromptDefinition {
155
  name: string;
156
  type: string;
157
  message: string;
158
  default?: boolean;
159
}
160
```
161

162
**Available Prompts:**
163
- `classComponent`: Use class-style component syntax
164
- `useTsWithBabel`: Use Babel alongside TypeScript  
165
- `convertJsToTs`: Convert all .js files to .ts
166
- `allowJs`: Allow .js files to be compiled
167
- `skipLibCheck`: Skip type checking of declaration files
168

169
## Dependencies
170

171
**Runtime Dependencies:**
172
- `@babel/core`: Babel core for JavaScript compilation
173
- `fork-ts-checker-webpack-plugin`: Off-thread TypeScript type checking
174
- `ts-loader`: TypeScript loader for webpack
175
- `thread-loader`: Multi-threaded webpack loader
176
- `babel-loader`: Babel integration
177
- `globby`: File pattern matching utilities
178
- `@vue/cli-shared-utils`: Vue CLI utility functions
179

180
**Peer Dependencies:**
181
- `@vue/cli-service`: Vue CLI service (^3.0.0 || ^4.0.0 || ^5.0.0-0)
182
- `typescript`: TypeScript compiler (>=2)
183
- `vue`: Vue.js framework (^2 || ^3.2.13)
184
- `cache-loader`: Build caching (optional)
185
- `vue-template-compiler`: Vue 2 template compiler (optional)