A literal is a more concrete sub-type of a collective type.\nWhat this means is that \"Hello World\" is a string, but a string is not \"Hello World\" inside the type system.
There are two sets of literal types available in TypeScript today, strings and numbers, by using literal types you can allow an exact value which a string or number must have.
\nWhen you declare a variable via var or let, you are telling the compiler that there is the chance that this variable will change its contents.\nIn contrast, using const to declare a variable will inform TypeScript that this object will never change.
\nts// We're making a guarantee that this variable\n// helloWorld will never change, by using const.\n\n// So, TypeScript sets the type to be \"Hello World\" not string\nconstTryhelloWorld = \"Hello World\";\n\n// On the other hand, a let can change, and so the compiler declares it a string\nlethiWorld = \"Hi World\";
The process of going from an infinite number of potential cases (there are an infinite number of possible string values) to a smaller, finite number of potential case (in helloWorld’s case: 1) is called narrowing.
In practice string literal types combine nicely with union types, type guards, and type aliases.\nYou can use these features together to get enum-like behavior with strings.
\n\ntstypeTryEasing = \"ease-in\" | \"ease-out\" | \"ease-in-out\";\n\nclassUIElement {\nanimate (dx : number,dy : number,easing :Easing ) {\n if (easing === \"ease-in\") {\n // ...\n } else if (easing === \"ease-out\") {\n } else if (easing === \"ease-in-out\") {\n } else {\n // It's possible that someone could reach this\n // by ignoring your types though.\n }\n }\n}\n\nletbutton = newUIElement ();\nbutton .animate (0, 0, \"ease-in\");\nbutton .animate (0, 0,"uneasy" );\nArgument of type '\"uneasy\"' is not assignable to parameter of type 'Easing'.2345Argument of type '\"uneasy\"' is not assignable to parameter of type 'Easing'.
You can pass any of the three allowed strings, but any other string will give the error
\nArgument of type '\"uneasy\"' is not assignable to parameter of type '\"ease-in\" | \"ease-out\" | \"ease-in-out\"'\nString literal types can be used in the same way to distinguish overloads:
\n\ntsfunction createElement(tagName: \"img\"): HTMLImageElement;\nfunction createElement(tagName: \"input\"): HTMLInputElement;\n// ... more overloads ...\nfunction createElement(tagName: string): Element {\n // ... code goes here ...\n}
TypeScript also has numeric literal types, which act the same as the string literals above.
\n\ntsfunctionTryrollDice (): 1 | 2 | 3 | 4 | 5 | 6 {\n return (Math .floor (Math .random () * 6) + 1) as 1 | 2 | 3 | 4 | 5 | 6;\n}\n\nconstresult =rollDice ();
A common case for their use is for describing config values:
\n","headings":[{"value":"Literal Narrowing","depth":2},{"value":"String Literal Types","depth":2},{"value":"Numeric Literal Types","depth":2}],"frontmatter":{"permalink":"/docs/handbook/literal-types.html","title":"Literal Types","disable_toc":null,"oneline":"Using literal types with TypeScript"}},"prev":{"childMarkdownRemark":{"frontmatter":{"title":"Functions","oneline":"How to add types to a function","permalink":"/docs/handbook/functions.html"}}},"next":{"childMarkdownRemark":{"frontmatter":{"title":"Unions and Intersection Types","oneline":"How to use unions and intersection types in TypeScript","permalink":"/docs/handbook/unions-and-intersections.html"}}}},"pageContext":{"id":"literal-types","slug":"/docs/handbook/literal-types.html","repoPath":"/packages/documentation/copy/en/handbook-v1/Literal Types.md","previousID":"1a7ac52a-1e26-561c-8c86-e94fbecf6a02","nextID":"9289718f-45a1-5d23-9ab7-684d34ba1420","lang":"en","modifiedTime":"2020-08-07T17:00:36.335Z"}}}tsinterfaceTryMapConfig {\nlng : number;\nlat : number;\ntileSize : 8 | 16 | 32;\n}\n\nsetupMap ({lng : -73.935242,lat : 40.73061,tileSize : 16 });