Pojďme se tentokrát seznámit s vestavěnými typy, které nám usnadní práci s řetězci / proměnnými, a mohou být použity v šablonách (tzv. template string literals).
Které typy to jsou?
- Uppercase<StringType> - transformuje vstupní řetězec do řetězce s pouze velkými písmeny
- Lowercase<StringType>- transformuje vstupní řetězec do řetězce s pouze malými písmeny
- Capitalize<StringType> - transformuje vstupní řetězec do řetězce s prvním znakem psaným velkým písmem
- Uncapitalize<StringType> - transformuje vstupní řetězec do řetězce s prvním znakem psaným malým písmenem
Každý z typů přijímá jeden parametr typu string. Pokud se pokusíme předat parametr jiného typu, pak dostaneme chybovou zprávu, upozorňující nás na porušení daného omezení.
Výše zmíněné typy jsou z výkonnostních důvodů poskytovány TypeScriptovým kompilátorem a nejsou definovány v TypeScriptovém .d.ts souboru. Implementace těchto typů využívá přímo JavaScriptové funkce pro manipulaci s řetězci a nebere v potaz locale běhového prostředí (je to soubor parametrů, které definují uživatelův jazyk, stát a jiné zvláštnosti, které se následně projeví v uživatelském rozhraní). Implementace v TypeScriptu 4.1 vypadá následovně:
function applyStringMapping(symbol: Symbol, str: string) {
switch (intrinsicTypeKinds.get(symbol.escapedName as string)) {
case IntrinsicTypeKind.Uppercase: return str.toUpperCase();
case IntrinsicTypeKind.Lowercase: return str.toLowerCase();
case IntrinsicTypeKind.Capitalize: return str.charAt(0).toUpperCase() + str.slice(1);
case IntrinsicTypeKind.Uncapitalize: return str.charAt(0).toLowerCase() + str.slice(1);
}
return str;
}
Uppercase<StringType>
Transformuje vstupní řetězec do řetězce pouze s velkými písmeny.
Mějme typový alias PointsOfTheCompass, jehož definice je následující
type PointsOfTheCompass = 'north' | 'west' | 'east' | 'south'
Výsledkem následujícího přiřazení
type Result = Uppercase<PointsOfTheCompass>;
je typový alias se všemi položkami psanými velkými písmeny.
type Result = 'NORTH' | 'WEST' | 'EAST' | 'SOUTH'
Lowercase<StringType>
Mějme typový alias PointsOfTheCompass, jehož definice je následující
type PointsOfTheCompass = 'NORTH' | 'WEST' | 'EAST' | 'SOUTH'
Výsledkem následujícího přiřazení
type Result = Lowercase<PointsOfTheCompass>;
je typový alias se všemi položkami psanými malými písmeny.
type Result = 'north' | 'west' | 'east' | 'south'
Capitalize<StringType>
Mějme typový alias PointsOfTheCompass, jehož definice je následující
type PointsOfTheCompass = 'north' | 'west' | 'east' | 'south'
Výsledkem následujícího přiřazení
type Result = Lowercase<PointsOfTheCompass>;
je typový alias, kde každá položka má první písmeno psáno velkým písmenem
type Result = 'North' | 'West' | 'East' | 'South'
Uncapitalize<StringType>
Mějme typový alias PointsOfTheCompass, jehož definice je následující
type PointsOfTheCompass = 'NORTH' | 'WEST' | 'EAST' | 'SOUTH'
A výsledkem následujícího přiřazení
type Result = Uncapitalize<PointsOfTheCompass>;
je typový alias, kde každá položka má první písmeno psáno malým písmenem
type Result = 'nORTH' | 'wEST' | 'eAST' | 'sOUTH'
Použití
Nejčastější použití nalezneme spolu s template literal type. Mějme typový alias Point, jehož definice je následující
interface Point {
longitude: double;
latitude: double;
}
Výsledkem následujícího přiřazení
type CapitalizedPoint = Capitalize<keyof Point>;
pak je
type CapitalizedPoint = 'Longitude' | 'Latitude'
pokud náš příklad rozvineme dále a aplikujeme spolu s template literal type, pak můžeme například generovat další typ
type PointGetAccessoryNames = `get${Capitalize<keyof Point>}`;
kde jako výsledek dostáváme
type PointAccessoryNames = 'getLongitude' | 'getLatitude'
pokud tento přístup následně nakombinujeme i s mapováním
type PointAccessors = {
[K in keyof Point as `get${Capitalize<K>}`]: () => Point[K];
}
pak dostaneme následující typový alias
type PointAccessors = {
getLongitude: () => number;
getLatitude: () => number;
}
Závěrem
Výše jsme představili typy, které můžeme použít pro manipulaci s řetězci a způsob, jakým je můžeme použít spolu s template string literals a jaké výhody nám to přináší. A na co se můžete těšit příště?
Typy, jako jsou Readonly<Type> ; Record<Keys, Type> ; Pick<Type, Keys> a Omit<Type, Keys>
Václav Kandus