Literal types

TypeScript allows literal types for strings, numbers and booleans, and they can be an alternative to enums. Literal types are defined, for example, like:

//a string literal type
type Protocol = 'http' | 'https'

//an interface with literal types
interface ColorfulShape {
shape: string = 'round' | 'square'
color: string = 'red' | 'blue' | 'green'
size: 0 | 2 | 4 | 8
}

//a function with literal types
function createShape(shape: 'round' | 'square') {
//...
}

Literal types are supported by the IDE (VS Code) in terms of autocompletion and type checking. Compared to enums, I think they can be of advantage in the following situations:

The downside of literal types is, unfortunately, they cannot be iterated over like it can be done with enums.

//enum type
enum EnumProtocol {
HTTP = 'http',
HTTPS = 'https'
}

//literal type
type LiteralProtocol = 'http' | 'https'

interface IEnumProtocol {
protocol: EnumProtocol
}

interface ILiteralProtocol {
protocol: LiteralProtocol
}

let enumProtocol: IEnumProtocol = {
protocol: EnumProtocol.HTTP
}

let literalProtocol: ILiteralProtocol = {
protocol: 'http'
}

console.log(literalProtocol)
//{protocol:"http"}

console.log(JSON.stringify(literalProtocol))
//{"protocol":"http"}

console.log(enumProtocol)
//{protocol:"http"}

console.log(JSON.stringify(enumProtocol))
//{"protocol":"http"}

//this will not work
enumProtocol = { protocol: 'http' }
//Type '"http"' is not assignable to type 'EnumProtocol'. Did you mean 'EnumProtocol.HTTPS'? ts-plugin(2820)

//this will work
literalProtocol = { protocol: 'http' }

//this will work
for (const protocol in EnumProtocol) {
console.log(protocol, JSON.stringify(protocol))
}
//HTTP – "\"HTTP\""
//HTTPS – "\"HTTPS\""

//this will not work
for (const protocol in LiteralProtocol) {
console.log(protocol)
}
//'LiteralProtocol' only refers to a type, but is being used as a value here. ts-plugin(2693)
Comments