This TypeScript syntax error occurs when an enum member declaration is followed by an invalid character or separator. The most common cause is using a colon (:) instead of an equals sign (=) when assigning values, or forgetting a comma between members.
The "Enum member name must be followed by ',' ':' or '}'" error (TS1357) indicates that TypeScript encountered an invalid character immediately after an enum member name. TypeScript has strict syntax rules for enum declarations: each member must be followed by one of three characters: 1. A comma (,) to separate it from the next member 2. An equals sign (=) to assign a specific value to that member 3. A closing brace (}) to end the enum declaration This error most frequently occurs when developers accidentally use a colon (:) instead of an equals sign (=) when assigning values to enum members. This mistake is particularly common for those coming from languages like Python or for those who confuse enum syntax with object literal or type annotation syntax. The error message was specifically improved in TypeScript to explicitly mention the closing brace (}) as an acceptable character, making it clearer what valid options exist at that position in the enum definition.
The most common cause is using a colon (:) when you should use an equals sign (=):
// WRONG - uses colon (:)
enum Status {
Active: 1, // ❌ Error: expected ',' '=' or '}'
Inactive: 0,
Pending: 2
}
// CORRECT - uses equals sign (=)
enum Status {
Active = 1, // ✅ Valid syntax
Inactive = 0,
Pending = 2
}This mistake often happens when developers confuse enum syntax with:
- Object literal syntax: { key: value }
- Interface property syntax: interface Foo { prop: Type }
- Type annotation syntax: const x: Type = value
Replace all colons with equals signs in your enum value assignments.
Each enum member must be separated from the next by a comma:
// WRONG - missing commas
enum Color {
Red = "#FF0000"
Green = "#00FF00" // ❌ Error: expected ','
Blue = "#0000FF"
}
// WRONG - using semicolons
enum Color {
Red = "#FF0000"; // ❌ Error: expected ','
Green = "#00FF00";
Blue = "#0000FF"
}
// CORRECT - commas between members
enum Color {
Red = "#FF0000", // ✅ Valid
Green = "#00FF00",
Blue = "#0000FF" // Trailing comma is optional
}Trailing commas after the last member are allowed and often recommended for cleaner diffs.
Enum members cannot have explicit type annotations:
// WRONG - type annotations not allowed
enum HttpStatus {
OK: number = 200, // ❌ Error
NotFound: number = 404,
ServerError: number = 500
}
// CORRECT - no type annotations needed
enum HttpStatus {
OK = 200, // ✅ TypeScript infers the type
NotFound = 404,
ServerError = 500
}TypeScript automatically infers enum member types:
- Numeric enums have number type
- String enums have string type
- The enum itself is the type when used in code
String enums require equals signs and quotes around values:
// WRONG - various string enum mistakes
enum Direction {
North: "N", // ❌ Colon instead of equals
East = "E"
South = "S", // ❌ Missing comma after East
West: 'W' // ❌ Colon instead of equals
}
// CORRECT - proper string enum
enum Direction {
North = "N", // ✅ Equals sign + comma
East = "E",
South = "S",
West = "W"
}String enums require explicit initialization for every member:
// WRONG - missing initializer
enum Direction {
North, // ❌ String enums need explicit values
East = "E",
South = "S"
}
// CORRECT - all members initialized
enum Direction {
North = "N",
East = "E",
South = "S",
West = "W"
}Ensure no unexpected characters appear after member names:
// WRONG - various illegal characters
enum Priority {
Low = 1,
Medium = 2 + 1, // ✅ Computed values are allowed
High:: 3, // ❌ Double colon invalid
Critical = = 4, // ❌ Double equals invalid
Urgent! = 5 // ❌ Exclamation mark invalid
}
// CORRECT - only valid syntax
enum Priority {
Low = 1,
Medium = 2,
High = 3,
Critical = 4,
Urgent = 5
}Valid after an enum member name:
- , to add another member
- = to assign a value
- } to close the enum
- Nothing else is allowed
Numeric enums support auto-increment and computed values:
// Auto-increment (no assignment needed)
enum Level {
Beginner, // = 0 (automatic)
Intermediate, // = 1 (auto-increment)
Advanced // = 2 (auto-increment)
}
// Explicit numbering
enum Level {
Beginner = 1, // Start at 1
Intermediate, // = 2 (auto-increment)
Advanced // = 3 (auto-increment)
}
// Computed values
enum Permission {
None = 0,
Read = 1 << 0, // = 1
Write = 1 << 1, // = 2
Execute = 1 << 2 // = 4
}
// WRONG - mixing requires initialization
enum Mixed {
First = "first",
Second, // ❌ Error: must initialize after string member
Third = 3
}
// CORRECT - explicit initialization
enum Mixed {
First = "first",
Second = "second", // ✅ All string members initialized
Third = "third"
}### Enum Syntax vs Object Literal Syntax
Developers often confuse enum syntax with object literals because they look similar:
// Object literal - uses colons
const statusObject = {
active: 1, // Colon for key-value pairs
inactive: 0
};
// Enum - uses equals signs
enum StatusEnum {
Active = 1, // Equals for member assignments
Inactive = 0
}The syntax difference exists because:
- Objects are runtime values with key-value pairs
- Enums are compile-time constructs that generate both types and values
- Object keys can be any valid identifier; enum members become type literals
### Const Enums and Syntax
The same syntax rules apply to const enums:
// WRONG
const enum Mode {
Dev: "development", // ❌ Colon not allowed
Prod: "production"
}
// CORRECT
const enum Mode {
Dev = "development", // ✅ Equals sign
Prod = "production"
}Const enums are inlined at compile time and removed from generated JavaScript, but their syntax is identical to regular enums.
### IDE Auto-Fix
Most modern IDEs can auto-fix this error:
- VS Code: Click the lightbulb icon or press Cmd/Ctrl + . and select "Replace ':' with '='"
- WebStorm/IntelliJ: Press Alt + Enter and select the quick fix
- ESLint: The @typescript-eslint plugin can auto-fix with --fix flag
### Heterogeneous Enums (Not Recommended)
TypeScript technically allows mixing string and numeric members, but it's discouraged:
// Allowed but not recommended
enum Mixed {
Yes = 1,
No = "NO",
Maybe = 2
}This pattern is confusing and rarely useful. Stick to either numeric or string enums, not both.
### Ambient Enum Declarations
When declaring enums in .d.ts files or with declare, the same syntax applies:
// In a .d.ts file
declare enum ExternalEnum {
First = 1, // Still uses equals, not colon
Second = 2
}Ambient enums describe shapes of existing enums from external sources but follow identical syntax rules.
### Migration from JavaScript Objects
If migrating from a JavaScript pattern:
// Before (JavaScript object)
const Status = {
ACTIVE: 'active',
INACTIVE: 'inactive'
};// After (TypeScript enum) - note the syntax change
enum Status {
ACTIVE = 'active', // Colon → Equals
INACTIVE = 'inactive'
}Or use as const to keep object syntax:
const Status = {
ACTIVE: 'active',
INACTIVE: 'inactive'
} as const;
type StatusValue = typeof Status[keyof typeof Status];Function expression requires a return type
Function expression requires a return type
Value of type 'string | undefined' is not iterable
How to fix "Value is not iterable" in TypeScript
Type 'undefined' is not assignable to type 'string'
How to fix "Type undefined is not assignable to type string" in TypeScript
Type narrowing from typeof check produces 'never'
How to fix "Type narrowing produces never" in TypeScript
Type parameter 'T' has conflicting constraints
How to fix "Type parameter has conflicting constraints" in TypeScript