TypeScript类型操作之字符串处理功能详解

let str = `user name is : ${name}`; // 插值表达式
let str2 = `
line1....
line2....
` ; // 多行字符
function str3Tag(all, ...expresitons) {
  console.log(all, expresitons); 
  return all
}
const name = 'tony';
const age = 11;
str3Tag`hello name is: ${str}, age is ${age}`)
// all: ['hello name is: ', ', age is ', '', raw: Array(3)]
//expressions: Array(0) (2) ['name', 11]

type World = `world`;
type Greeting = `hello ${World}`;
// type Greeting = "hello world";

type EmailLocaleIDs = "welcome_email" | "email_heading";
type FooterLocaleIDs = "footer_title" | "footer_sendoff";
type AllLocaleIDs = `${EmailLocaleIDs | FooterLocaleIDs}_id`;
/*
type AllLocaleIDs = 
  | "welcome_email_id" 
  | "email_heading_id" 
  | "footer_title_id" 
  | "footer_sendoff_id"
*/
// 换个位置构造
type AllLocaleIDs = `${EmailLocaleIDs | FooterLocaleIDs}_id`;
type Lang = "en" | "ja" | "pt";
type LocaleMessageIDs = `${Lang}_${AllLocaleIDs}`;
/*
type LocaleMessageIDs = 
    | "ch_welcome_email_id" 
     | "ch_email_heading_id" 
  | "ch_footer_title_id" 
  | "ch_footer_sendoff_id" 
  | "en_welcome_email_id" 
  | "en_email_heading_id" 
  | "en_footer_title_id" 
  | "en_footer_sendoff_id" 
  | "jp_welcome_email_id" 
  | "jp_email_heading_id" 
  | "jp_footer_title_id" 
  | "jp_footer_sendoff_id"
*/

const tonyDefaultInfo = {
  name: 'tony',
  age: 11,
};
function makeWatchedObject(target) {
  // 代理处理 ... 
  return target;
}
const tony = makeWatchedObject(tonyDefaultInfo);
tony.on('nameChanged', (newValue) => {
    console.log(newValue);
});

declare function makeWatchedObject<Type>(obj: Type): Type & { on(eventName: string, callback:(newValue: any)=>void):void };

type PickPropertyNameComposeChange<T extends {[k:string]:any}> = {
  [K in keyof T]: `${K}Changed`;
}
type Person = {
  name: string;
  age: number
}
type ChangeKeys = PickPropertyNameComposeChange<Person>
/*
type ChangeKeys = {
    name: "nameChanged";
    age: "ageChanged";
}
*/

// 定义一个工具类型，特殊处理定义一个 on 函数的类型，主要是修饰 on 的参数类型
type PropertiesEventChange<T> = {
  on<K extends string & keyof T >(eventName: `${K}Changed`, callback: (newValue:T[K]) => void):void
}
declare function makeWatchedObject<Type>(obj: Type): Type & PropertiesEventChange<Type>;
const p = makeWatchedObject({
  name: 'tony',
  age: 11
});
p.on('ageChanged', (age) => age);
// (method) on<"age">(eventName: "ageChanged", callback: (newValue: number) => void): void

const name = 'Alice';
const age = 30;
const message = `Hello, my name is ${name} and I am ${age} years old.`;

TemplateLiteral
└── Quasi (Hello, my name is )
└── Expression (name)
└── Quasi ( and I am )
└── Expression (age)
└── Quasi ( years old.)

type Greeting = "Hello, world"
type ShoutyGreeting = Uppercase<Greeting>
//type ShoutyGreeting = "HELLO, WORLD"

// 限制一下K从T的属性中提取，并且是string类型
type PickPropertyToUppercase<T, K extends string & keyof T> = Uppercase<K>;
const per = {
  name: 'tony',
  age: 11,
}
type PerType = PickPropertyToUppercase<typeof per, keyof typeof per>
// type PerType = "NAME" | "AGE"
// 如果你想只有一个入口，也可以这样再封一个自定义的类型工具
type A<T extends { [k: string ]: any }> = PickPropertyToUppercase<T, keyof T>;
type APerType = A<typeof per>
//type APerType = "NAME" | "AGE"

type Greeting = "Hello, world"
type QuietGreeting = Lowercase<Greeting>
// type QuietGreeting = "hello, world"

type RemoveBaseline<T extends string>T extends `${infer FirstStr}_${infer LastStr}` ? `${FirstStr}${LastStr}` : T;
type NotBaselineStr = RemoveBaseline<"aa_bb">
// type NotBaselineStr = "aabb"

type UpperCamel<T extends string> T extends `${infer FirstStr}_${infer LastStr}` ? `${Capitalize<FirstStr>}${Capitalize<LastStr>}` : T;
type Camelstr = UpperCamel<"aa_bb">
// type Camelstr = "AaBb"

type UpperCamel<T extends string> T extends `${infer FirstStr}_${infer LastStr}` ? `${Capitalize<UpperCamel<FirstStr>>}${Capitalize<UpperCamel<LastStr>>}` : T;
type Camelstr = UpperCamel<"aa_bb_cc___dd">
//type Camelstr = "AaBbCcDd"
// 再将 AaBbCcDd -> aaBbCcDd 这个方式就很简单了 直接调用一次 Uncapitalize 
type LowerCamel<T extends string> = Uncapitalize<UpperCamel<T>>;
type lowerCamelStr = LowerCamel<"aa_bb_cc___dd">
// type lowerCamelStr = "aaBbCcDd"