TypeScript 编程

1.数组提取联合类型

const arr = ['v1','v2'] as const;

// const arr = <const>['v1','v2'] ;  网上看的写法，版本不支持？

type A  = (typeof arr)[number] ; // 'v1' | 'v2'

尝试一下

2.数组对象，提取key或则value 作为联合类型

 const PORT_MAP = {
   
    'MYSQL':'3306',
    'HIVE':'10000',
    'HDFS' :'8020',
    'YARN' : '8032',
    'KAFKA' : ''
  } as const
  type PORT_MAP_TYPE = typeof PORT_MAP
  // 提取 key 作为联合类型
  type portMapType = keyof PORT_MAP_TYPE
  // 提取 val 作为联合类型
  // type portMapType = PORT_MAP_TYPE[keyof PORT_MAP_TYPE]

  /**
   * @environment: vue3.2 watch 语法。
   * @description: 使用场景：下拉框切换类型，这里是datasourceType，类型变化后 默认值切换。
   */
  watch(
    () => proForm.datasourceType,
    (datasourceType, preDatasourceType) => {
   
        proForm.port = PORT_MAP[datasourceType as portMapType]
    }
  )

尝试一下

1. 把 one_two_three 写法转为 驼峰 oneTwoThree
   

   这里用的新知识
   extends 用来判断，这里结合递归处理；
   Capitalize 把首字母转为大写；
   intef 提取字符串；

type Separator = '_'

type SnakeToCamel<Str extends string , Acc extends string = ''> = 

  (Str extends `${infer HeadStr}${Separator}${
     infer TailStr}`
    ?(Acc extends '' 
      // This is a first call ，because  Acc is '' 
      // 第一个字母不用变成大写
      ? SnakeToCamel<TailStr,`${Acc}${HeadStr}`> 

      : SnakeToCamel<TailStr, `${Acc}${Capitalize<HeadStr>}`>)

    :`${Acc}${Capitalize<Str>}`
  ) 

type Res = SnakeToCamel<'one_two_three'>

尝试一下