refactor: migrate useProvideFilterBox and VFilterBox to TypeScript #156"

Author: gingerbeerlime

eslint.config.js

@@ -14,6 +14,25 @@ export default defineConfig([
       '**/dist/**'
     ]
   },
+  {
+    files: ['**/*.vue'],
+    languageOptions: {
+      parser: require.resolve('vue-eslint-parser'),
+      parserOptions: {
+        parser: require.resolve('@typescript-eslint/parser'),
+        ecmaVersion: 2020,
+        sourceType: 'module',
+        extraFileExtensions: ['.vue']
+      }
+    },
+    plugins: {
+      'vue': pluginVue,
+      '@typescript-eslint': tseslint
+    },
+    rules: {
+      // 필요시 규칙 추가
+    }
+  },
   {
     files: ['**/*.{js,mjs,cjs,vue,ts}', 'eslint.config.js'],
     extends: [

src/components/pivottable-ui/VFilterBox.vue

@@ -62,85 +62,96 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, computed } from 'vue'
 import { useProvideFilterBox } from '../../composables'
-const props = defineProps({
-  unselectedFilterValues: {
-    type: Object,
-    default: () => ({})
-  },
-  filterBoxKey: {
-    type: String,
-    default: ''
-  },
-  zIndex: {
-    type: Number,
-    default: 0
-  },
-  filterBoxValues: {
-    type: Object,
-    default: () => ({})
-  }
+
+interface FilterBoxProps {
+  unselectedFilterValues?: Record<string, boolean>
+  filterBoxKey?: string
+  zIndex?: number
+  filterBoxValues?: Record<string, number>
+}
+
+const props = withDefaults(defineProps<FilterBoxProps>(), {
+  unselectedFilterValues: () => ({}),
+  filterBoxKey: '',
+  zIndex: 0,
+  filterBoxValues: () => ({})
 })
-const { localeStrings, sorter, menuLimit } = useProvideFilterBox()
+
+const { localeStrings, sorter, menuLimit } = useProvideFilterBox()!
 const filterBoxValuesList = Object.keys(props.filterBoxValues)
 const filterText = ref('')
 const showMenu = ref(filterBoxValuesList.length < menuLimit.value)
 const sortedList = [...filterBoxValuesList].sort(sorter(props.filterBoxKey))
 const filteredList = computed(() => sortedList.filter(matchesFilter))
 const unselectedValues = computed(() => props.unselectedFilterValues)
-const emit = defineEmits([
-  'update:zIndexOfFilterBox',
-  'update:unselectedFilterValues'
-])
-const moveFilterBoxToTop = (e) => {
+
+const emit = defineEmits<{
+  (event: 'update:zIndexOfFilterBox', attributeName: string): void
+  (
+    event: 'update:unselectedFilterValues',
+    payload: { key: string; value: Record<string, boolean> }
+  ): void
+}>()
+
+const moveFilterBoxToTop = (e: MouseEvent) => {
   e.stopPropagation()
   emit('update:zIndexOfFilterBox', props.filterBoxKey)
 }
 const handleFilterTextClear = () => {
   filterText.value = ''
 }
-const matchesFilter = (x) =>
-  x.toLowerCase().trim().includes(filterText.value.toLowerCase().trim())
-const addValuesToFilter = (values) => {
-  const filterValues = values.reduce((r, v) => {
-    r[v] = true
-    return r
-  }, Object.assign({}, unselectedValues.value))
+const matchesFilter = (x: string) =>
+  x
+    .toLowerCase()
+    .trim()
+    .includes((filterText.value ?? '').toLowerCase().trim())
+const addValuesToFilter = (values: string[]) => {
+  const filterValues = values.reduce(
+    (r, v) => {
+      r[v] = true
+      return r
+    },
+    Object.assign({}, unselectedValues.value)
+  )
   emit('update:unselectedFilterValues', {
     key: props.filterBoxKey,
     value: filterValues
   })
 }
-const removeValuesFromFilter = (values) => {
-  const filterValues = values.reduce((r, v) => {
-    if (r[v]) {
-      delete r[v]
-    }
-    return r
-  }, Object.assign({}, unselectedValues.value))
+const removeValuesFromFilter = (values: string[]) => {
+  const filterValues = values.reduce(
+    (r, v) => {
+      if (r[v]) {
+        delete r[v]
+      }
+      return r
+    },
+    Object.assign({}, unselectedValues.value)
+  )
   emit('update:unselectedFilterValues', {
     key: props.filterBoxKey,
     value: filterValues
   })
 }
-const toggleValue = (value) => {
+const toggleValue = (value: string) => {
   if (value in unselectedValues.value) {
     removeValuesFromFilter([value])
   } else {
     addValuesToFilter([value])
   }
 }
-const selectOnly = (e, value) => {
+const selectOnly = (e: MouseEvent, value: string) => {
   e.stopPropagation()
   setValuesInFilter(
     props.filterBoxKey,
     filterBoxValuesList.filter((y) => y !== value)
   )
 }
-const setValuesInFilter = (filterBoxKey, values) => {
-  const filterValues = values.reduce((r, v) => {
+const setValuesInFilter = (filterBoxKey: string, values: string[]) => {
+  const filterValues = values.reduce<Record<string, boolean>>((r, v) => {
     r[v] = true
     return r
   }, {})

src/composables/useProvideFilterbox.ts

@@ -1,6 +1,5 @@
-import { computed, inject, provide } from 'vue'
+import { computed, ComputedRef, inject, provide, InjectionKey } from 'vue'
 import { getSort } from '../helper/utilities'
-const filterBoxKey = Symbol('filterBox')
 
 interface ProvideFilterBoxProps {
   languagePack: Record<string, any>
@@ -10,7 +9,16 @@ interface ProvideFilterBoxProps {
   [key: string]: any
 }
 
-export function provideFilterBox (props: ProvideFilterBoxProps) {
+// 별도의 파일로 분리?
+interface FilterBoxContext {
+  localeStrings: ComputedRef<any>
+  sorter: (x: string) => any
+  menuLimit: ComputedRef<number>
+}
+
+const filterBoxKey = Symbol('filterBox') as InjectionKey<FilterBoxContext>
+
+export function provideFilterBox(props: ProvideFilterBoxProps) {
   const localeStrings = computed(
     () => props.languagePack[props.locale].localeStrings
   )
@@ -24,6 +32,6 @@ export function provideFilterBox (props: ProvideFilterBoxProps) {
   })
 }
 
-export function useProvideFilterBox () {
+export function useProvideFilterBox() {
   return inject(filterBoxKey)
 }