Day 1 字符串

1、CapitalizeString

首字母大写

type a1 = CapitalizeString<'handler'>       // Handler
type a2 = CapitalizeString<'parent'>        // Parent
type a3 = CapitalizeString<233>             // 233

实现：

type CapitalizeString<T> = T extends `${infer L}${infer R}` ? `${Uppercase<L>}${R}` : T

小结：
本小题通过infer将T通过字符串拼接成左右两部分；且L匹配左边第一个字符，R匹配剩下的字符。

参考：https://blog.gplane.win/posts/ts-template-literal-types.html

2、FirstChar

获取字符串字面量中的第一个字符

type A = FirstChar<'BFE'> // 'B'
type B = FirstChar<'dev'> // 'd'
type C = FirstChar<''> // never

实现：

type FirstChar<T> = T extends `${infer L}${infer R}` ? L : never

3、LastChar

获取字符串字面量中的最后一个字符

type A = LastChar<'BFE'> // 'E'
type B = LastChar<'dev'> // 'v'
type C = LastChar<''> // never

实现：

type LastChar<T> = T extends `${infer L}${infer S}` ? (S extends '' ? L : LastChar<S>) : never

小结：
每次infer L只从左匹配一个字符，想要获得字符串最后一个字符，就需要递归。截止条件就是剩余字符infer S为''（空字符串）时，返回L，否则将S继续向下递归。

4、StringToTuple

字符串转换为元组类型

type A = StringToTuple<'BFE.dev'> // ['B', 'F', 'E', '.', 'd', 'e', 'v']
type B = StringToTuple<''> // []

实现：

type StringToTuple<T extends string, K extends any[] = []> = T extends `${infer L}${infer R}` ? (L extends '' ? K : StringToTuple<R, [...K, L]>) : K

5、TupleToString

将字符串类型的元素转换为字符串字面量类型

type A = TupleToString<['a', 'b', 'c']> // 'abc'
type B = TupleToString<[]>              // ''
type C = TupleToString<['a']>           // 'a'

实现：

type TupleToString<T, S extends string = ''> = T extends [infer L, ...infer R] ? (
    L extends string ? TupleToString<R, `${S}${L}`> : never
) : S

小结：
在三元运算符中，对于L与R而言，无法确定其类型，是无法直接使用的。

6、RepeatString

复制字符T为字符串类型，长度为C

type A = RepeatString<'a', 3> // 'aaa'
type B = RepeatString<'a', 0> // ''

实现：

type RepeatString<T extends string, C extends number,
    K extends any[] = [], S extends string = ''> = C extends K['length'] ? S : RepeatString<T, C, [...K, T], `${S}${T}`>

小结：
TS中关于数字的比较都会用元组的length属性。

7、SplitString

将字符串字面量类型按照指定字符，分割为元组。无法分割则返回原字符串字面量

type A1 = SplitString<'handle-open-flag', '-'>        // ["handle", "open", "flag"]
type A2 = SplitString<'open-flag', '-'>               // ["open", "flag"]
type A3 = SplitString<'handle.open.flag', '.'>        // ["handle", "open", "flag"]
type A4 = SplitString<'open.flag', '.'>               // ["open", "flag"]
type A5 = SplitString<'open.flag', '-'>               // ["open.flag"]

实现：

type SplitString<T extends string, P extends string,
    K extends string[] = []> = T extends `${infer L}${P}${infer R}` ? SplitString<R, P, [...K, L]> : [...K, T]

8、LengthOfString

计算字符串字面量类型的长度

type A = LengthOfString<'BFE.dev'> // 7
type B = LengthOfString<''> // 0

实现：

type LengthOfString<T extends string, K extends any[] = []> = T extends `${infer L}${infer R}` ? LengthOfString<R, [...K, L]> : K['length']

9、KebabCase

驼峰命名转横杠命名

type a1 = KebabCase<'HandleOpenFlag'>           // handle-open-flag
type a2 = KebabCase<'OpenFlag'>                 // open-flag

实现：

type KebabCase<T, S extends string = ''> = T extends `${infer L}${infer R}` ? (
    L extends Uppercase<L> ? (S extends '' ? KebabCase<R, Lowercase<L>> : KebabCase<R, `${S}-${Lowercase<L>}`>) : KebabCase<R, `${S}${L}`>
) : S

10、CamelCase

横杠命名转化为驼峰命名

type a1 = CamelCase<'handle-open-flag'>         // HandleOpenFlag
type a2 = CamelCase<'open-flag'>                // OpenFlag

实现：

type CapitalizeString<T> = T extends `${infer L}${infer R}` ? `${Uppercase<L>}${R}` : T
type CamelCase<T extends string, S extends string = ''> = T extends `${infer L}-${infer R}` ? CamelCase<R, `${S}${CapitalizeString<L>}`> : `${S}${CapitalizeString<T>}`

11、ObjectAccessPaths

得到对象中的值访问字符串

// 简单来说，就是根据如下对象类型：
/*
{
    home: {
        topBar: {
            title: '顶部标题',
            welcome: '欢迎登录'
        },
        bottomBar: {
            notes: 'XXX备案，归XXX所有',
        },
    },
    login: {
        username: '用户名',
        password: '密码'
    }
}
*/
// 得到联合类型：
/*
home.topBar.title | home.topBar.welcome | home.bottomBar.notes | login.username | login.password
*/
// 完成 createI18n 函数中的 ObjectAccessPaths<Schema>，限制函数i18n的参数为合法的属性访问字符串
function createI18n<Schema>(schema: Schema): ((path: ObjectAccessPaths<Schema>) => string) {return [{schema}] as any}
// i18n函数的参数类型为：home.topBar.title | home.topBar.welcome | home.bottomBar.notes | login.username | login.password
const i18n = createI18n({
    home: {
        topBar: {
            title: '顶部标题',
            welcome: '欢迎登录'
        },
        bottomBar: {
            notes: 'XXX备案，归XXX所有',
        },
    },
    login: {
        username: '用户名',
        password: '密码'
    }
})
i18n('home.topBar.title')           // correct
i18n('home.topBar.welcome')         // correct
i18n('home.bottomBar.notes')        // correct
// i18n('home.login.abc')              // error，不存在的属性
// i18n('home.topBar')                 // error，没有到最后一个属性

实现：

type RemoveFirstDot<T> = T extends `.${infer L}` ? L : T
type ObjectAccessPaths<T, P extends string = '', K = keyof T> = K extends keyof T ? (
    K extends string ? (
        T[K] extends Record<string, any> ? ObjectAccessPaths<T[K], `${P}.${K}`> : RemoveFirstDot<`${P}.${K}`>
    ) : never
) : never

12、ComponentEmitsType

定义组件的监听事件类型

// 实现 ComponentEmitsType<Emits> 类型，将
/*
{
    'handle-open': (flag: boolean) => true,
    'preview-item': (data: { item: any, index: number }) => true,
    'close-item': (data: { item: any, index: number }) => true,
}
*/
// 转化为类型
/*
{
    onHandleOpen?: (flag: boolean) => void,
    onPreviewItem?: (data: { item: any, index: number }) => void,
    onCloseItem?: (data: { item: any, index: number }) => void,
}
*/
function createComponent<Emits extends Record<string, any>>(emits: Emits): ComponentEmitsType<Emits> {return [{emits}] as any}
// 最后返回的 Component变量类型为一个合法的React组件类型，并且能够通过`on事件驼峰命名`的方式，监听定义的事件，并且能够自动推导出事件的参数类型
const Component = createComponent({
    'handle-open': (flag: boolean) => true,
    'preview-item': (data: { item: any, index: number }) => true,
    'close-item': (data: { item: any, index: number }) => true,
})
console.log(
    <Component
        // onHandleOpen 的类型为 (flag: boolean) => void
        onHandleOpen={val => console.log(val.valueOf())}
        // onPreviewItem 的类型为 (data: { item: any, index: number }) => void
        onPreviewItem={val => {
            const {item, index} = val
            const a: number = item
            console.log(a, index.toFixed(2))
        }}
        // 所有的监听事件属性都是可选属性，可以不传处理函数句柄
        // onCloseItem={val => [{val}]}
    />
)
// 提示，定义组件的props类型方式为 { (props: Partial<Convert<Emits>>): any }
// 比如 Comp 可以接收属性 {name:string, age:number, flag:boolean, id?:string}，其中id为可选属性，那么可以这样写
const Comp: { (props: { name: string, age: number, flag: boolean, id?: string }): any } = Function as any
console.log(<Comp name="" age={1} flag/>)           // 正确
console.log(<Comp name="" age={1} flag id="111"/>)  // 正确
// console.log(<Comp name={1} age={1} flag/>)          // 错误，name为字符串类型
// console.log(<Comp age={1} flag/>)                   // 错误，缺少必须属性name:string

实现：

type CapitalizeString<T> = T extends `${infer L}${infer R}` ? `${Uppercase<L>}${R}` : T
type CamelCase<T extends string, S extends string = ''> = T extends `${infer L}-${infer R}` ? CamelCase<R, `${S}${CapitalizeString<L>}`> : `${S}${CapitalizeString<T>}`
type ComponentEmitsType<T> = {
    [key in keyof T as `on${key extends string ? CamelCase<key> : ''}`]?: T[key] extends ((...args: infer A) => any) ? (...args: A) => void : T[key]
}