Translate 1 file to ko - Template Literal Types.md #214
Conversation
|
@Ubermensch0608 please read the following Contributor License Agreement(CLA). If you agree with the CLA, please reply with the following information.
Contributor License AgreementContribution License AgreementThis Contribution License Agreement (“Agreement”) is agreed to by the party signing below (“You”),
|
1 similar comment
|
@Ubermensch0608 please read the following Contributor License Agreement(CLA). If you agree with the CLA, please reply with the following information.
Contributor License AgreementContribution License AgreementThis Contribution License Agreement (“Agreement”) is agreed to by the party signing below (“You”),
|
Translation of Template Literal Types.mdtitle: Template Literal Types oneline: "Creating a mapping type that changes properties with template literals"Template literal types are String literal type, which can be extended to many strings via unions. Template literal types are Template literal string in JavaScript, but is used as a type, not a value. type World = "world";
type Greeting = `hello ${World}`;
// ^?When a union is used at the location you enter, its type is the set of all literals that can be represented as members of that union. type EmailLocaleIDs = "welcome_email" | "email_heading";
type FooterLocaleIDs = "footer_title" | "footer_sendoff";
type AllLocaleIDs = `${EmailLocaleIDs | FooterLocaleIDs}_id`;
// ^?At each location where you fill in a template literal, a union intersects to create a new type. type EmailLocaleIDs = "welcome_email" | "email_heading";
type FooterLocaleIDs = "footer_title" | "footer_sendoff";
// ---cut---
type AllLocaleIDs = `${EmailLocaleIDs | FooterLocaleIDs}_id`;
type Lang = "en" | "ja" | "pt";
type LocaleMessageIDs = `${Lang}_${AllLocaleIDs}`;
// ^?In general, pre-creation is recommended for complex string unions, but this is useful in such a simple case. Type to string unionThe strength of template literals comes from defining new strings based on information inside types. Function ( // @noErrors
const passedObject = {
firstName: "Saoirse",
lastName: "Ronan",
age: 26,
};The default object includes
When called
// @noErrors
declare function makeWatchedObject(obj: any): any;
// ---cut---
const person = makeWatchedObject({
firstName: "Saoirse",
lastName: "Ronan",
age: 26,
});
// makeWatchedObject가 익명 객체에 `on`을 추가했습니다.
person.on("firstNameChanged", (newValue) => {
console.log(`firstName was changed to ${newValue}!`);
});
type PropEventSource<Type> = {
on(eventName: `${string & keyof Type}Changed`, callback: (newValue: any) => void): void;
};
/// 'on'메서드가 있는 "watched object"를 생성합니다.
/// 그러면, 속성의 변경 내용을 확인할 수 있습니다.
declare function makeWatchedObject<Type>(obj: Type): Type & PropEventSource<Type>;With this, we can implement a function that throws an error when an invalid attribute is provided. // @errors: 2345
type PropEventSource<Type> = {
on(eventName: `${string & keyof Type}Changed`, callback: (newValue: any) => void): void;
};
declare function makeWatchedObject<T>(obj: T): T & PropEventSource<T>;
// ---cut---
const person = makeWatchedObject({
firstName: "Saoirse",
lastName: "Ronan",
age: 26
});
person.on("firstNameChanged", () => {});
// Prevent easy human error (using the key instead of the event name)
person.on("firstName", () => {});
// It's typo-resistant
person.on("frstNameChanged", () => {});Infering with template literalsNote that we did not consider all the information from the object that was originally passed. Here's what makes this possible. We can use functions that use generics.
type PropEventSource<Type> = {
on<Key extends string & keyof Type>
(eventName: `${Key}Changed`, callback: (newValue: Type[Key]) => void ): void;
};
declare function makeWatchedObject<Type>(obj: Type): Type & PropEventSource<Type>;
const person = makeWatchedObject({
firstName: "Saoirse",
lastName: "Ronan",
age: 26
});
person.on("firstNameChanged", newName => {
// ^?
console.log(`new name is ${newName.toUpperCase()}`);
});
person.on("ageChanged", newAge => {
// ^?
if (newAge < 0) {
console.warn("warning! negative age");
}
})In this case, If the user has a string Inference often decomposes strings and combines them in a different way to reconstruct them. Built-in string manipulation typeTo help with string manipulation, TypeScript includes a series of types that can be used to manipulate strings. These types are built into the compiler for performance, and are provided with TypeScript
|
|
@microsoft-github-policy-service agree |
Please check my Localizations
ko/handbook-v2/Type Manipulation/Template Literal Types.mdthanks