refactor: migrate the codebase to typescript

Author: haoqunjiang

Diff for: index.js renamed to index.ts

@@ -1,19 +1,18 @@
 #!/usr/bin/env node
-// @ts-check
 
-import fs from 'fs'
-import path from 'path'
+import * as fs from 'fs'
+import * as path from 'path'
 
 import minimist from 'minimist'
 import prompts from 'prompts'
 import { red, green, bold } from 'kolorist'
 
-import renderTemplate from './utils/renderTemplate.js'
-import { postOrderDirectoryTraverse, preOrderDirectoryTraverse } from './utils/directoryTraverse.js'
-import generateReadme from './utils/generateReadme.js'
-import getCommand from './utils/getCommand.js'
-import renderEslint from './utils/renderEslint.js'
-import banner from './utils/banner.js'
+import renderTemplate from './utils/renderTemplate'
+import { postOrderDirectoryTraverse, preOrderDirectoryTraverse } from './utils/directoryTraverse'
+import generateReadme from './utils/generateReadme'
+import getCommand from './utils/getCommand'
+import renderEslint from './utils/renderEslint'
+import banner from './utils/banner'
 
 function isValidPackageName(projectName) {
   return /^(?:@[a-z0-9-*~][a-z0-9-*._~]*\/)?[a-z0-9-~][a-z0-9-._~]*$/.test(projectName)
@@ -89,7 +88,19 @@ async function init() {
 
   const forceOverwrite = argv.force
 
-  let result = {}
+  let result: {
+    projectName?: string
+    shouldOverwrite?: boolean
+    packageName?: string
+    needsTypeScript?: boolean
+    needsJsx?: boolean
+    needsRouter?: boolean
+    needsPinia?: boolean
+    needsVitest?: boolean
+    needsCypress?: boolean
+    needsEslint?: boolean
+    needsPrettier?: boolean
+  } = {}
 
   try {
     // Prompts:
@@ -124,7 +135,7 @@ async function init() {
         },
         {
           name: 'overwriteChecker',
-          type: (prev, values = {}) => {
+          type: (prev, values) => {
             if (values.shouldOverwrite === false) {
               throw new Error(red('✖') + ' Operation cancelled')
             }
@@ -199,7 +210,7 @@ async function init() {
         },
         {
           name: 'needsPrettier',
-          type: (prev, values = {}) => {
+          type: (prev, values) => {
             if (isFeatureFlagsUsed || !values.needsEslint) {
               return null
             }

Diff for: package.json

@@ -34,6 +34,9 @@
   },
   "homepage": "https://github.com/vuejs/create-vue#readme",
   "devDependencies": {
+    "@types/eslint": "^8.4.1",
+    "@types/prompts": "^2.0.14",
+    "@vue/tsconfig": "^0.1.3",
     "esbuild": "^0.14.23",
     "esbuild-plugin-license": "^1.2.2",
     "husky": "^7.0.4",

Diff for: pnpm-lock.yaml

@@ -26,7 +26,7 @@ SOFTWARE.
 
 await esbuild.build({
   bundle: true,
-  entryPoints: ['index.js'],
+  entryPoints: ['index.ts'],
   outfile: 'outfile.cjs',
   format: 'cjs',
   platform: 'node',

Diff for: scripts/build.mjs

@@ -0,0 +1,7 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "include": ["index.ts", "utils/**/*"],
+  "compilerOptions": {
+    "strict": false
+  }
+}

Diff for: tsconfig.json

@@ -1,5 +1,5 @@
-import fs from 'fs'
-import path from 'path'
+import * as fs from 'fs'
+import * as path from 'path'
 
 export function preOrderDirectoryTraverse(dir, dirCallback, fileCallback) {
   for (const filename of fs.readdirSync(dir)) {

Diff for: utils/banner.js renamed to utils/banner.ts

@@ -1,6 +1,4 @@
-import fs from 'fs'
-
-import getCommand from './getCommand.js'
+import getCommand from './getCommand'
 
 const sfcTypeSupportDoc = [
   '',

Diff for: utils/deepMerge.js renamed to utils/deepMerge.ts

@@ -1,9 +1,11 @@
-import fs from 'fs'
-import path from 'path'
+import * as fs from 'fs'
+import * as path from 'path'
+
+import type { ESLint, Linter } from 'eslint'
 
 import { devDependencies as allEslintDeps } from '../template/eslint/package.json'
-import deepMerge from './deepMerge.js'
-import sortDependencies from './sortDependencies.js'
+import deepMerge from './deepMerge'
+import sortDependencies from './sortDependencies'
 
 const dependencies = {}
 function addEslintDependency(name) {
@@ -13,7 +15,10 @@ function addEslintDependency(name) {
 addEslintDependency('eslint')
 addEslintDependency('eslint-plugin-vue')
 
-const config = {
+interface ESLintConfig extends Linter.Config {
+  extends: string[]
+}
+const config: ESLintConfig = {
   root: true,
   extends: ['plugin:vue/vue3-essential'],
   env: {
@@ -83,7 +88,7 @@ export default function renderEslint(
 
   // update package.json
   const packageJsonPath = path.resolve(rootDir, 'package.json')
-  const existingPkg = JSON.parse(fs.readFileSync(packageJsonPath))
+  const existingPkg = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'))
   const pkg = sortDependencies(
     deepMerge(existingPkg, {
       scripts: {

Diff for: utils/directoryTraverse.js renamed to utils/directoryTraverse.ts

@@ -1,8 +1,8 @@
-import fs from 'fs'
-import path from 'path'
+import * as fs from 'fs'
+import * as path from 'path'
 
-import deepMerge from './deepMerge.js'
-import sortDependencies from './sortDependencies.js'
+import deepMerge from './deepMerge'
+import sortDependencies from './sortDependencies'
 
 /**
  * Renders a template folder/file to the file system,
@@ -34,8 +34,8 @@ function renderTemplate(src, dest) {
 
   if (filename === 'package.json' && fs.existsSync(dest)) {
     // merge instead of overwriting
-    const existing = JSON.parse(fs.readFileSync(dest))
-    const newPackage = JSON.parse(fs.readFileSync(src))
+    const existing = JSON.parse(fs.readFileSync(dest, 'utf8'))
+    const newPackage = JSON.parse(fs.readFileSync(src, 'utf8'))
     const pkg = sortDependencies(deepMerge(existing, newPackage))
     fs.writeFileSync(dest, JSON.stringify(pkg, null, 2) + '\n')
     return