refactor: add ts-nocheck and check all files (#8401)

internal/build/src/tasks/types-definitions.ts

@@ -1,6 +1,6 @@
 import process from 'process'
 import path from 'path'
-import fs from 'fs/promises'
+import { mkdir, readFile, writeFile } from 'fs/promises'
 import consola from 'consola'
 import * as vueCompiler from 'vue/compiler-sfc'
 import glob from 'fast-glob'
@@ -14,7 +14,6 @@ import {
   projRoot,
 } from '@element-plus/build-utils'
 import { pathRewriter } from '../utils'
-import typeUnsafeStricter from '../type-unsafe-stricter.json'
 import type { CompilerOptions, SourceFile } from 'ts-morph'
 
 const TSCONFIG_PATH = path.resolve(projRoot, 'tsconfig.web.json')
@@ -41,8 +40,8 @@ export const generateTypesDefinitions = async () => {
   const sourceFiles = await addSourceFiles(project)
   consola.success('Added source files')
 
-  typeCheck(project, typeUnsafeStricter)
-  consola.success('Stricter type check passed!')
+  typeCheck(project)
+  consola.success('Type check passed!')
 
   await project.emit({
     emitOnlyDtsFiles: true,
@@ -64,11 +63,11 @@ export const generateTypesDefinitions = async () => {
 
     const subTasks = emitFiles.map(async (outputFile) => {
       const filepath = outputFile.getFilePath()
-      await fs.mkdir(path.dirname(filepath), {
+      await mkdir(path.dirname(filepath), {
         recursive: true,
       })
 
-      await fs.writeFile(
+      await writeFile(
         filepath,
         pathRewriter('esm')(outputFile.getText()),
         'utf8'
@@ -109,11 +108,14 @@ async function addSourceFiles(project: Project) {
   await Promise.all([
     ...filePaths.map(async (file) => {
       if (file.endsWith('.vue')) {
-        const content = await fs.readFile(file, 'utf-8')
+        const content = await readFile(file, 'utf-8')
+        const hasTsNoCheck = content.includes('@ts-nocheck')
+
         const sfc = vueCompiler.parse(content)
         const { script, scriptSetup } = sfc.descriptor
         if (script || scriptSetup) {
-          let content = script?.content ?? ''
+          let content =
+            (hasTsNoCheck ? '// @ts-nocheck\n' : '') + (script?.content ?? '')
 
           if (scriptSetup) {
             const compiled = vueCompiler.compileScript(sfc.descriptor, {
@@ -135,7 +137,7 @@ async function addSourceFiles(project: Project) {
       }
     }),
     ...epPaths.map(async (file) => {
-      const content = await fs.readFile(path.resolve(epRoot, file), 'utf-8')
+      const content = await readFile(path.resolve(epRoot, file), 'utf-8')
       sourceFiles.push(
         project.createSourceFile(path.resolve(pkgRoot, file), content)
       )
@@ -145,21 +147,8 @@ async function addSourceFiles(project: Project) {
   return sourceFiles
 }
 
-function typeCheck(project: Project, paths: string[]) {
-  // Type unsafe list. The TS errors are not all fixed yet, so we need a list of which files are not fixed with TS errors to prevent accidental TS errors.
-  const typeUnsafePaths = paths.map((_path) => {
-    let paths = path.resolve(projRoot, _path)
-    if (_path.endsWith('/')) paths += path.sep
-    return paths
-  })
-
-  const diagnostics = project.getPreEmitDiagnostics().filter((diagnostic) => {
-    const filePath = diagnostic.getSourceFile()?.getFilePath()!
-    if (!filePath) return false
-    const file = path.normalize(filePath)
-    return !typeUnsafePaths.some((safePath) => file.startsWith(safePath))
-  })
-
+function typeCheck(project: Project) {
+  const diagnostics = project.getPreEmitDiagnostics()
   if (diagnostics.length > 0) {
     consola.error(project.formatDiagnosticsWithColorAndContext(diagnostics))
     const err = new Error('Failed to generate dts.')

internal/eslint-config/index.js

@@ -195,6 +195,7 @@ module.exports = defineConfig({
       'error',
       { disallowTypeAnnotations: false },
     ],
+    '@typescript-eslint/ban-ts-comment': ['off', { 'ts-ignore': false }],
 
     // vue
     'vue/no-v-html': 'off',

package.json

@@ -25,7 +25,7 @@
     "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx,.md,.json --max-warnings 0 && pretty-quick --check --branch dev",
     "lint:fix": "eslint --fix . --ext .vue,.js,.ts,.jsx,.tsx,.md,.json && pretty-quick --branch dev",
     "lint:commit": "commitlint --from $(git merge-base origin/dev HEAD) --to HEAD > ./commit-lint.txt",
-    "typecheck": "run-p typecheck:node typecheck:vite-config",
+    "typecheck": "run-p typecheck:web typecheck:play typecheck:node typecheck:vite-config typecheck:vitest",
     "typecheck:web": "vue-tsc -p tsconfig.web.json --composite false --noEmit",
     "typecheck:node": "tsc -p tsconfig.node.json --noEmit",
     "typecheck:play": "vue-tsc -p tsconfig.play.json --composite false --noEmit",

packages/components/cascader-panel/__tests__/cascader-panel.test.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, test, vi } from 'vitest'

packages/components/cascader-panel/src/index.vue

@@ -14,6 +14,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import {
   computed,
   defineComponent,

packages/components/cascader-panel/src/node-content.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { defineComponent, h } from 'vue'
 import { useNamespace } from '@element-plus/hooks'
 export default defineComponent({

packages/components/cascader-panel/src/node.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { isFunction } from '@vue/shared'
 import { capitalize, isEmpty, isUndefined } from '@element-plus/utils'
 import type { VNode } from 'vue'

packages/components/cascader-panel/src/node.vue

@@ -61,6 +61,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import { computed, defineComponent, inject } from 'vue'
 import ElCheckbox from '@element-plus/components/checkbox'
 import ElRadio from '@element-plus/components/radio'

packages/components/cascader-panel/src/types.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import type { InjectionKey, VNode } from 'vue'
 import type { Nullable } from '@element-plus/utils'
 import type { default as CascaderNode } from './node'

packages/components/cascader-panel/src/utils.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { isLeaf } from '@element-plus/utils'
 import type { default as CascaderNode } from './node'
 

packages/components/cascader/__tests__/cascader.test.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, describe, expect, it, test, vi } from 'vitest'

packages/components/cascader/src/index.vue

@@ -191,6 +191,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import {
   computed,
   defineComponent,

packages/components/checkbox/__tests__/checkbox.test.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, test } from 'vitest'

packages/components/checkbox/src/checkbox-group.vue

@@ -12,6 +12,7 @@
 </template>
 
 <script lang="ts" setup>
+// @ts-nocheck
 import { computed, nextTick, provide, toRefs, watch } from 'vue'
 import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
 import { debugWarn } from '@element-plus/utils'

packages/components/color-picker/__tests__/color-picker.test.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { defineComponent, nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, it, vi } from 'vitest'

packages/components/color-picker/src/color.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { hasOwn } from '@element-plus/utils'
 
 const hsv2hsl = function (hue: number, sat: number, val: number) {

packages/components/color-picker/src/components/alpha-slider.vue

@@ -20,6 +20,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import {
   defineComponent,
   getCurrentInstance,

packages/components/color-picker/src/components/hue-slider.vue

@@ -13,6 +13,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import {
   computed,
   defineComponent,

packages/components/color-picker/src/components/predefine.vue

@@ -15,6 +15,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import { defineComponent, ref, watch, watchEffect } from 'vue'
 import { useOptions } from '../useOption'
 import Color from '../color'

packages/components/color-picker/src/components/sv-panel.vue

@@ -20,6 +20,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import {
   computed,
   defineComponent,

packages/components/color-picker/src/index.vue

@@ -102,6 +102,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import {
   computed,
   defineComponent,

packages/components/date-picker/__tests__/date-picker.test.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, describe, expect, it, vi } from 'vitest'

packages/components/date-picker/__tests__/date-time-picker.test.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, describe, expect, it } from 'vitest'

packages/components/descriptions/__tests__/descriptions.test.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, test } from 'vitest'

packages/components/descriptions/src/descriptions-cell.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { defineComponent, h, inject } from 'vue'
 import { addUnit, getNormalizedProps } from '@element-plus/utils'
 import { useNamespace } from '@element-plus/hooks'

packages/components/descriptions/src/descriptions-row.vue

@@ -23,6 +23,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import { defineComponent, inject } from 'vue'
 import DescriptionsCell from './descriptions-cell'
 import { elDescriptionsKey } from './token'

packages/components/descriptions/src/index.vue

@@ -25,6 +25,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import { computed, defineComponent, provide } from 'vue'
 import { isValidComponentSize } from '@element-plus/utils'
 import { useNamespace, useSize } from '@element-plus/hooks'

packages/components/dialog/src/use-dialog.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   computed,
   getCurrentInstance,

packages/components/drawer/__tests__/drawer.test.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, test, vi } from 'vitest'

packages/components/dropdown/__tests__/dropdown.test.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, test, vi } from 'vitest'

packages/components/dropdown/src/dropdown-item-impl.vue

@@ -25,6 +25,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck
 import { computed, defineComponent, inject } from 'vue'
 import {
   ROVING_FOCUS_GROUP_ITEM_INJECTION_KEY,

packages/components/dropdown/src/dropdown-menu.vue

@@ -15,6 +15,7 @@
   </ul>
 </template>
 <script lang="ts">
+// @ts-nocheck
 import { computed, defineComponent, inject, unref } from 'vue'
 import { composeEventHandlers, composeRefs } from '@element-plus/utils'
 import { EVENT_CODE } from '@element-plus/constants'

packages/components/dropdown/src/dropdown.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { buildProps, definePropType, iconPropType } from '@element-plus/utils'
 import { EVENT_CODE } from '@element-plus/constants'
 import { createCollectionWithScope } from '@element-plus/components/collection'

packages/components/dropdown/src/dropdown.vue

@@ -85,6 +85,7 @@
   </div>
 </template>
 <script lang="ts">
+// @ts-nocheck
 import {
   computed,
   defineComponent,

packages/components/dropdown/src/useDropdown.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { computed, inject, ref } from 'vue'
 import { addClass, generateId, on } from '@element-plus/utils'
 import { EVENT_CODE } from '@element-plus/constants'

packages/components/form/__tests__/form.test.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick, reactive, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import {

packages/components/infinite-scroll/__tests__/infinite-scroll.test.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import {

packages/components/infinite-scroll/src/index.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { isFunction } from '@vue/shared'
 import { throttle } from 'lodash-unified'

packages/components/input/__tests__/input.test.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, describe, expect, test, vi } from 'vitest'

packages/components/loading/__tests__/loading.test.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, describe, expect, test, vi } from 'vitest'

packages/components/loading/src/directive.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { isRef, ref } from 'vue'
 import { hyphenate, isObject, isString } from '@vue/shared'
 import { Loading } from './service'

packages/components/loading/src/service.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { nextTick } from 'vue'
 import { isString } from '@vue/shared'
 import { isClient } from '@vueuse/core'