propertyAccessNotation
Reports bracket notation property access when dot notation can be used.
✅ This rule is included in the tsstylisticandstylisticStrictpresets.
Dot notation (obj.property) is generally preferred over bracket notation (obj["property"]) for accessing object properties.
Dot notation is more concise and easier to read.
Bracket notation should be reserved for cases where it is necessary, such as when the property name contains special characters, is a reserved word, or is computed dynamically.
Examples
Section titled “Examples”const const value: unknown
value = const obj: Record<string, unknown>
obj["property"];
const obj: Record<string, unknown>
obj["value"] = 123;
const const name: unknown
name = const person: Record<string, unknown>
person["firstName"];
const const nested: unknown
nested = const data: Record<string, Record<string, unknown>>
data["items"]["first"];class class Container
Container { Container.privateProperty: number
privateProperty = 123;}
const const container: Container
container = new constructor Container(): Container
Container();const container: Container
container["privateProperty"] = 123;const const value: unknown
value = const obj: Record<string, unknown>
obj.unknown
property;
const obj: Record<string, unknown>
obj.unknown
value = 123;
const const name: unknown
name = const person: Record<string, unknown>
person.unknown
firstName;
const const nested: unknown
nested = const data: Record<string, Record<string, unknown>>
data.Record<string, unknown>
items.unknown
first;class class Container
Container { private Container.privateProperty: number
privateProperty = 123;}
const const container: Container
container = new constructor Container(): Container
Container();
// TypeScript allows private properties to be accessed with quotesconst container: Container
container["privateProperty"] = 123;// Bracket notation is allowed for non-identifier keysconst const value: unknown
value = const obj: Record<string, unknown>
obj["key with spaces"];
const const dashed: unknown
dashed = const obj: Record<string, unknown>
obj["key-with-dashes"];
// Bracket notation is allowed for reserved wordsconst const reserved: unknown
reserved = const obj: Record<string, unknown>
obj["class"];
const const keyword: unknown
keyword = const obj: Record<string, unknown>
obj["import"];
// Bracket notation is allowed for computed keysconst const dynamic: unknown
dynamic = const obj: Record<string, unknown>
obj[const variable: string
variable];
const const computed: unknown
computed = const obj: Record<string, unknown>
obj[const getKey: () => string
getKey()];Options
Section titled “Options”allowIndexSignaturePropertyAccess
Section titled “allowIndexSignaturePropertyAccess”Whether to allow accessing properties matching an index signature with bracket notation.
Type: boolean
Default: false
// eslint ts/propertyAccessNotation: ["error", { allowIndexSignaturePropertyAccess: true }]
interface interface Config
Config { [key: string
key: string]: string;}
const const config: Config
config: interface Config
Config = {};// ✅ OK with option enabledconst const value: string
value = const config: Config
config["anyKey"];When Not To Use It
Section titled “When Not To Use It”Disable this rule if your codebase has a convention of using bracket notation for consistency, or if you frequently access properties with names that are reserved words or contain special characters.
Further Reading
Section titled “Further Reading”Equivalents in Other Linters
Section titled “Equivalents in Other Linters”- Biome:
useLiteralKeys - ESLint:
dot-notation@typescript-eslint/dot-notation
Made with ❤️🔥 around the world by
the Flint team and contributors.