Typescript: typy pro manipulaci s řetězci
28.04.2022
Typescript: typy pro manipulaci s řetězci

​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​