TypeScript Template Literal Types All In One

TypeScript Template Literal Types All In One

String Unions in Types

Inference with Template Literals

Intrinsic String Manipulation Types

Uppercase<StringType>

Lowercase<StringType>

Capitalize<StringType>

Uncapitalize<StringType>

demos

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 Lang = "en" | "ja" | "pt";
type LocaleMessageIDs = `${Lang}_${AllLocaleIDs}`;
// type LocaleMessageIDs = "en_welcome_email_id" | "en_email_heading_id" | "en_footer_title_id" | "en_footer_sendoff_id" | "ja_welcome_email_id" | "ja_email_heading_id" | "ja_footer_title_id" | "ja_footer_sendoff_id" | "pt_welcome_email_id" | "pt_email_heading_id" | "pt_footer_title_id" | "pt_footer_sendoff_id"

// @errors: 2345
type PropEventSource<T> = {
    on(
      eventName: `${string & keyof T}Changed`,
      callback: (newValue: any) => void,
    ): void;
};

declare function makeWatchedObject<T>(obj: T): T & PropEventSource<T>;


const person = makeWatchedObject({
  firstName: "xgqfrms",
  age: 18
});

person.on("firstNameChanged", () => {});

// Prevent easy human error (using the key instead of the event name)
person.on("firstName", () => {});
// Argument of type '"firstName"' is not assignable to parameter of type '"firstNameChanged" | "lastNameChanged" | "ageChanged"'.(2345)

// It's typo-resistant
person.on("frstNameChanged", () => {});
// Argument of type '"firstName"' is not assignable to parameter of type '"firstNameChanged" | "lastNameChanged" | "ageChanged"'.(2345)

template literals / template strings

`\`` === '`';
// true

// console.log('string text line 1\n' + 'string text line 2');
console.log(`
 string text line 1
 string text line 2
`);


`header ${ false ? '' : `icon-${true ? 'expander' : 'collapser'}`}`;
// 'header icon-expander'

tagged templates

// Tagged templates
function Tag(strings, personExp, ageExp) {
  console.log(`strings =`, strings);
  console.log(`personExp, ageEx =`, personExp, ageExp);
  let str0 = strings[0]; // "That "p
  let str1 = strings[1]; // " is a "
  let str2 = strings[2]; // "."
  let ageStr;
  if (ageExp > 99){
    ageStr = 'centenarian';
  } else {
    ageStr = 'youngster';
  }

  const result = `${str0}${personExp}${str1}${ageStr}${str2}`;
  console.log('result =', result);
  // We can even return a string built using a template literal
  return result;
}

// test
const person = 'xgqfrms';
const age = 23;
const output = Tag`That ${ person } is a ${ age }.`;

// strings = (3) ['That ', ' is a ', '.', raw: Array(3)]
// personExp, ageEx = xgqfrms 23
// result = That xgqfrms is a youngster.

// raw string
function tag(strings, ...vars) {
  console.log(`strings =`, strings);
  console.log(`strings.raw =`, strings.raw);
  console.log(`...vars =`, [...vars]);
}

tag`string text line 1 ${'✅'} \n string text line 2${'❌'}`;
// strings = (3) ['string text line 1 ', ' \n string text line 2', '', raw: Array(3)]
// strings.raw = (3) ['string text line 1 ', ' \\n string text line 2', '']
// ...vars = (2) ['✅', '❌']

String.raw

String.raw`Hi\n${2+3}!`;
// "Hi\\n5!"

String(`Hi\n${2+3}!`);
// 'Hi\n5!'

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#using_special_characters_in_strings

refs

https://www.typescriptlang.org/docs/handbook/2/types-from-types.html
https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---