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
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, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/16216020.html
未经授权禁止转载,违者必究!