vue.js 类型转换 强类型转强类型

1、js常规类型转换

https://www.cnblogs.com/123525-m/p/15788443.html

https://blog.csdn.net/allway2/article/details/124955087

2、vue 强类型转强类型

自定义强类型ComponentOptions，用来接收所有Options选项数据。

  declare type ComponentOptions = {

    label?: string

    value?: FormValueType

    disabled?: boolean

    key?: string | number

    children?: ComponentOptions[]

    options?: ComponentOptions[]

  } & Recordable

declare type FormValueType = string | number | string[] | number[] | boolean | undefined | null

declare type Recordable<T = any, K = string> = Record<K extends null | undefined ? string : K, T>

type Record<K extends keyof any, T> = {

    [P in K]: T;

};

 

自定义数据类型BillingHandlingData

declare type BillingHandlingData = {

  BillingHandlingId: number

  ItemCode: sting | number | undefined

}

 

 

const CapacityTypeArr = reactive([] as ComponentOptions[])  //定义ComponentOptions类型

const Arr1 = reactive([]) //默认：never[]

const getDictionaryList = async () => {

  const ids = [18, 27, 28, 29]

  const res = await getDictionaryListByIdsApi(ids)

  CapacityTypeArr.length = 0

  Arr1.length = 0

  if (res.data !== null && res.data.length > 0) {

    for (let i = 0; i < res.data.length; i++) {

      let temp = res.data[i]

       if (temp.TypeId == 18) {

        CapacityTypeArr.push({ value: String（temp.Dkey）, label: temp.Dvalue })//不提示

        //加string 转化成与PackgingTypeArr的value属性相同的类型，避免保存数据时，因数类型与后端不一致而失败。

        Arr1.push({ value: temp.Dkey, label: temp.Dvalue })//提示但不报错：不能将类型“string”分配给类型“never”。

      }

    }

    if (CapacityTypeArr.length > 0 && CapacityTypeArr[0] != undefined) {

      /*

      //报错：不能将类型“FormValueType”分配给类型“string | undefined”。不能将类型“null”分配给类型“string | undefined”。

      //formData.value.ItemCode = CapacityTypeArr[0].value

      console.log('ItemCode', formData.value.ItemCode)

      console.log('x1', CapacityTypeArr)

      //方案一：

      //当CapacityTypeArr的value是number类型时可行

      console.log('0', parseInt(CapacityTypeArr[0].value))

      console.log('1', CapacityTypeArr[0].value as any) //任意类型

      // 当CapacityTypeArr的value是string类型时可行

      console.log('2', CapacityTypeArr[0].value as string)

      console.log('3', CapacityTypeArr[0].value + '')

      console.log('3', String(CapacityTypeArr[0].value)) //对于小、中型项目，强类型校验，增加复杂度、工作时间，不划算。加一个判断就能避免报错了

      //方案二  重新定义一个ComponentOptions2，将value的类型修改为 number

      //方案三 前后两者都不使用强类型

      //formData.value.ItemCode = ChargeTypeArr[0].value  //仅提示但不报错： 类型“never”上不存在属性“value”。

      //对于小、中型项目，强类型校验，增加复杂度、工作时间，不划算。加一个判断就能避免报错了

      */

      //为改动最少，暂时采用方案一

      formData.value.ItemCode = CapacityTypeArr[0].value as string

    }

 

  }

}

 //formData.value.ItemCode = CapacityTypeArr[0].value!  若前则不可为空，后者可为空，则用感叹号！转换。

 

 

const showPackageType = ref(false)

//const Pgcode = ref()

const PackgingTypeArr = reactive([] as ComponentOptions[])

const getPackgingTypeList = async () => {

  const res = await getPackgingTypeListApi()

  //console.log('getPackgingTypeList', res)

  let dataArr: ComponentOptions[] = []

  if (res.data !== null && res.data.length > 0) {

    for (let i = 0; i < res.data.length; i++) {

      let temp = res.data[i]

      dataArr.push({ value: temp.Pgcode, label: temp.PackageName })

    }

    formData.value.ItemCode = res.data[0].Pgcode

  }

  PackgingTypeArr.length = 0

  PackgingTypeArr.push(...dataArr)

}

 

 

 

 

    <el-form-item

        v-show="showPackageType"

        :label="t('BillingHandlingDemo.PackageType')"

        prop="PackageType"

      >

        <el-select v-model="formData.ItemCode" :clearable="true">

          <el-option

            v-for="item in PackgingTypeArr"

            :key="item.value"

            :label="item.label"

            :value="item.value"

          />

        </el-select>

      </el-form-item>

      <el-form-item

        v-show="showCapacityType"

        :label="t('BillingHandlingDemo.CapacityType')"

        prop="CapacityType"

      >

        <el-select v-model="formData.ItemCode" :clearable="true">

          <el-option

            v-for="item in CapacityTypeArr"

            :key="item.value"

            :label="item.label"

            :value="item.value"

          />

        </el-select>

      </el-form-item>