typescript bracket assignment

TypeScript object bracket notation

TypeScript has a long-standing bug related to object bracket notation.

Let’s say we have the following object:

We can access the properties of example using either dot notation or bracket notation:

TypeScript is smart enough to understand all of the above examples.

However, it will throw an error 1 for the following code, even though we first check whether the property exists on the example object:

The only workaround is to explicitly suppress the error, using the @ts-ignore directive.

Assuming the --noImplicitAny compiler flag is true . ↩

Sign up for my newsletter

A monthly round-up of blog posts, projects, and internet oddments.

How to Access Object Properties Dynamically Using Bracket Notation in Typescript

Nader Al-Shamma

18 Sep 2019 | 5 min read

Typescript Playground

Javascript allows you to access the properties of an object using dot notation or bracket notation . The latter can be quite useful if you want to search for a property’s values dynamically.

For example, let’s say we are building a video page for a video website and our users want buttons to resize the given video for their convenience. As the page loads, we fetch the video metadata from the server which includes the link to the video and a selection of available sizes.

We want to associates a button to each possible dimension for the given video. One option is to hard code each object containing the dimensions to a different callback function. Then assign each function to the onclick event of their respective buttons. The result will be three hardcoded onclick callbacks, one for each button and video.

Instead, we will assign the value of the button to the respective property name of the relevant dimensions. When we click on a button, triggering our callback function, we can get the given event’s target value and use it as a property accessor. For example:

On the face of it, recreating this functionality with Typescript should be simple.

However, attempting to access the property using its name, in the same way, will result in as error:

Element implicitly has an 'any' type because expression of type 'any' can't be used to index type...

Note, it is important to remember that simply accessing the property using a string accessor, e.g videos['large'] will work but we want to access properties dynamically.

To achieve the same functionality in typescript, we need to make use of the languages’ Index type using the keyof keyword. Index types tell the compiler that the given property or variable is a key representing a publicly accessible property name of a given type. With the keyof keyword we can cast a given value to an Index type or set a variable to the property name an object. In both cases, this is contingent on the value matching a publicly accessible property name of the given object’s type. For more information on Index types and the keyof keyword, check out the Typescript documentation.

Knowing this, we can create the same functionality using Typescript:

We can take this a step further and use Typescript generics to create a function that returns a given object.

This function infers the type of the object T and casts the property name to the key type K , returning the property of the object using the given key T[K] . The original source and a detail explanation of the function can be found in the Typescript documentation .

In conclusion, the ability to access properties via their name and bracket notation is a powerful and flexible feature of Javascript. As demonstrated in the example above, it allows us to work dynamically with objects. Typescript is a superset of javascript that offers static type checking at compile time. This is powerful feature that helps us to build robust apps using Typescript. This, however, means that we need to play by the compilers rules. In this case it means ensuring that we tell the compiler that the dynamic value we are using to access an object’s property, using bracket notation, is actually an index type of the object. We say that this can be achieved by casting the given value using the keyof keyword.

DEV Community

Posted on Dec 19, 2023

Exploring the Power of Square Brackets in TypeScript

Introduction.

TypeScript, the popular statically-typed superset of JavaScript, offers an array of advanced type manipulation features, enhancing the development experience with strong typing. One of the intriguing aspects of TypeScript is its use of square brackets [] in various contexts. This post will explore the different ways square brackets are used in TypeScript, from array types to indexed access types and beyond.

1. Defining Array Types

At the most basic level, square brackets in TypeScript are used to define array types.

This syntax specifies that numbers is an array of numbers, and strings is an array of strings.

2. Tuple Types

TypeScript also uses square brackets to define tuples - arrays with fixed lengths and known types at specific indices.

In this example, Point is a tuple type representing a 2D coordinate.

3. The length Property

Every array in TypeScript has a length property, inferred by the type system.

TypeScript understands that length is a number, reflecting the array's size.

4. Indexed Access Types

TypeScript allows accessing the type of a specific index or property using square brackets.

Here, FirstElement is the type of the first element in the Point tuple, which is number .

5. Creating Union Types from Tuples

The [] syntax is instrumental in creating union types from tuples.

Using Statuses[number] , we create a union type of all tuple elements.

6. Generic Array Types and Constraints

Square brackets are also used to define generic constraints and types.

In this function, T is constrained to be an array type.

7. Mapped Types with Index Signatures

TypeScript's mapped types can use square brackets to define index signatures, creating dynamic property types.

StringMap is a type with string keys and T typed values.

8. Advanced Tuple Manipulation

The square brackets enable advanced tuple manipulation like extracting or omitting elements.

Here, WithoutFirst removes the first element from a tuple.

The versatility of square brackets in TypeScript, ranging from defining array and tuple types to advanced type manipulations, showcases TypeScript's power and flexibility. These features significantly contribute to TypeScript's ability to enforce strong typing, making code more reliable and maintainable. As TypeScript continues to evolve, its sophisticated type system remains a key reason for its growing popularity among developers.

For those interested in diving deeper and honing their TypeScript skills, the TypeScript Handbook is an excellent resource for exploring these and other features in more detail. Additionally, online platforms like TypeHero provide interactive learning experiences and challenges that can help solidify your understanding of TypeScript and its various techniques, including the use of square brackets for advanced type manipulations. Utilising these resources can greatly enhance your TypeScript proficiency and open up new possibilities in your programming endeavours.

Top comments (0)

Templates let you quickly answer FAQs or store snippets for re-use.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Mastering Next.js 13/14 : App Router and API Routes

Fabrikapp - Apr 19

Can someone help me with the coding here?

MelonLoverShake - Apr 19

Form and Function: How I Lost My Submit Button & Got It Back

Nick Taylor - Apr 2

Difference between technology and methodology - Dgi Host.com

Gurpinder Singh - Apr 18

We're a place where coders share, stay up-to-date and grow their careers.

Optional Chaining: The ?. Operator in TypeScript

TypeScript 3.7 added support for the ?. operator, also known as the optional chaining operator. We can use optional chaining to descend into an object whose properties potentially hold the values null or undefined without writing any null checks for intermediate properties.

Optional chaining is not a feature specific to TypeScript. The ?. operator got added to the ECMAScript standard as part of ES2020 . All modern browsers natively support optional chaining (not including IE11).

In this post, I will go over the following three optional chaining operators and explain why we might want to use them in our TypeScript or JavaScript code:

# Motivation

Let's start by looking at a real-world example in which optional chaining comes in handy. I've defined a serializeJSON function that takes in any value and serializes it as JSON. I'm passing a user object with two properties to the function:

The program prints the following output to the console:

Now let's say that we want to let callers of our function specify the indentation level. We'll define a SerializationOptions type and add an options parameter to the serializeJSON function. We'll retrieve the indentation level from the options.formatting.indent property:

We can now specify an indentation level of two spaces when calling serializeJSON like this:

As we would expect, the resulting JSON is now indented with two spaces and broken across multiple lines:

Typically, options parameters like the one we introduced here are optional. Callers of the function may specify an options object, but they're not required to. Let's adjust our function signature accordingly and make the options parameter optional by appending a question mark to the parameter name:

Assuming we have the --strictNullChecks option enabled in our TypeScript project (which is part of the --strict family of compiler options ), TypeScript should now report the following type error in our options.formatting.indent expression:

Object is possibly 'undefined'.

The options parameter is optional, and as a result it might hold the value undefined . We should first check whether options holds the value undefined before accessing options.formatting , otherwise we risk getting an error at runtime:

We could also use a slightly more generic null check instead that will check for both null and undefined — note that we're deliberately using != instead of !== in this case:

Now the type error goes away. We can call the serializeJSON function and pass it an options object with an explicit indentation level:

Or we can call it without specifying an options object, in which case the indent variable will hold the value undefined and JSON.stringify will use a default indentation level of zero:

Both function calls above are type-correct. However, what if we also wanted to be able to call our serializeJSON function like this?

This is another common pattern you'll see. Options objects tend to declare some or all of their properties as optional so that callers of the function can specify as many (or as few) options as needed. We need to make the formatting property in our SerializationOptions type optional in order to support this pattern:

Notice the question mark after the name of the formatting property. Now the serializeJSON(user, {}) call is type-correct, but TypeScript reports another type error when accessing options.formatting.indent :

We'll need to add another null check here given that options.formatting could now hold the value undefined :

This code is now type-correct, and it safely accesses the options.formatting.indent property. These nested null checks are getting pretty unwieldy though, so let's see how we can simplify this property access using the optional chaining operator.

# The ?. Operator: Dot Notation

We can use the ?. operator to access options.formatting.indent with checks for nullish values at every level of this property chain:

The ECMAScript specification describes optional chaining as follows:

Optional chaining [is] a property access and function invocation operator that short-circuits if the value to access/invoke is nullish.

The JavaScript runtime evaluates the options?.formatting?.indent expression as follows:

• If options holds the value null or undefined , produce the value undefined .
• Otherwise, if options.formatting holds the value null or undefined , produce the value undefined .
• Otherwise, produce the value of options.formatting.indent .

Note that the ?. operator always produces the value undefined when it stops descending into a property chain, even when it encounters the value null . TypeScript models this behavior in its type system. In the following example, TypeScript infers the indent local variable to be of type number | undefined :

Thanks to optional chaining, this code is a lot more succinct and just as type-safe as before.

# The ?.[] Operator: Bracket Notation

Next, let's now look at the ?.[] operator, another operator in the optional chaining family.

Let's say that our indent property on the SerializationOptions type was called indent-level instead. We'll need to use quotes to define a property that has a hyphen in its name:

We could now specify a value for the indent-level property like this when calling the serializeJSON function:

However, the following attempt to access the indent-level property using optional chaining is a syntax error:

We cannot use the ?. operator directly followed by a string literal — that would be invalid syntax. Instead, we can use the bracket notation of optional chaining and access the indent-level property using the ?.[] operator:

Here's our complete serializeJSON function:

It's pretty much the same as before, aside from additional square brackets for the final property access.

# The ?.() Operator: Method Calls

The third and final operator in the optional chaining family is ?.() . We can use the ?.() operator to invoke a method which may not exist.

To see when this operator is useful, let's change our SerializationOptions type once again. We'll replace the indent property (typed as a number) by a getIndent property (typed as a parameterless function returning a number):

We can call our serializeJSON function and specify an indentation level of two as follows:

To get the indentation level within our serializeJSON function, we can use the ?.() operator to conditionally invoke the getIndent method if (and only if) it is defined:

If the getIndent method is not defined, no attempt will be made to invoke it. The entire property chain will evaluate to undefined in that case, avoiding the infamous "getIndent is not a function" error.

Here's our complete serializeJSON function once again:

# Compiling Optional Chaining to Older JavaScript

Now that we've seen how the optional chaining operators work and how they're type-checked, let's have a look at the compiled JavaScript which the TypeScript compiler emits when targeting older JavaScript versions.

Here's the JavaScript code that the TypeScript compiler will emit, with whitespace adjusted for readability:

There's quite a lot going on in the assignment to the indent variable. Let's simplify the code step by step. We'll start by renaming the local variables _a and _b to formatting and getIndent , respectively:

Next, let's address the void 0 expression. The void operator always produces the value undefined , no matter what value it's applied to. We can replace the void 0 expression by the value undefined directly:

Next, let's extract the assignment to the formatting variable into a separate statement:

Let's do the same with the assignment to getIndent and add some whitespace:

Lastly, let's combine the checks using === for the values null and undefined into a single check using the == operator. Unless we're dealing with the special document.all value in our null checks , the two are equivalent:

Now the structure of the code is a lot more apparent. You can see that TypeScript is emitting the null checks that we would have written ourselves if we hadn't been able to use the optional chaining operators.

This article and 44 others are part of the TypeScript Evolution series. Have a look!

Home » Introduction and Basics » Type assignment in typescript

Type assignment in typescript

Type assignment in typescript.

TypeScript is a statically typed superset of JavaScript that adds optional type annotations to the language. This allows developers to catch errors and bugs at compile-time rather than runtime. One of the key features of TypeScript is its ability to assign types to variables, functions, and objects. In this article, we will explore the different ways to assign types in TypeScript and provide examples to illustrate their usage.

Basic Type Assignment

The most straightforward way to assign a type in TypeScript is by using the colon (:) syntax. This syntax is used to declare the type of a variable, function parameter, or function return value. Let’s take a look at some examples:

In the above examples, we have assigned the type “string” to the variable “name”, the type “string” to the function parameter “person”, and the type “number” to the function parameters “a” and “b” as well as the return value of the function “add”. This ensures that the assigned values or function arguments are of the specified type, and any type mismatches will result in a compile-time error.

Implicit Type Assignment

In addition to explicit type assignment, TypeScript also supports implicit type assignment. This means that TypeScript can infer the type of a variable based on its initial value. Let’s see an example:

In the above example, we have declared a variable “age” without explicitly assigning a type. TypeScript infers the type of “age” as “number” based on its initial value of 25. This allows us to write more concise code without sacrificing type safety.

Union Types

Another powerful feature of TypeScript is the ability to assign multiple types to a variable using union types. Union types are denoted by the pipe (|) symbol. Let’s consider an example:

In the above example, we have declared a variable “result” with a union type of “string” and “number”. This means that “result” can hold values of either type. We can assign a string value or a number value to “result” without any compile-time errors. This flexibility allows us to handle different types of data in a single variable.

Type Assertion

Sometimes, TypeScript may not be able to infer the correct type or we may want to override the inferred type. In such cases, we can use type assertion to explicitly specify the type of a value. Type assertion is done using the angle bracket (<>) syntax or the “as” keyword. Let’s see an example:

In the above example, we have a variable “message” with the type “any”. We want to access the “length” property of “message”, which is only available for strings. By using type assertion, we explicitly tell TypeScript that “message” is of type “string” and then access its “length” property. This allows us to perform type-specific operations on values with a broader type.

Type assignment is a fundamental aspect of TypeScript that enables developers to write safer and more maintainable code. By assigning types to variables, function parameters, and return values, we can catch errors at compile-time and improve the overall quality of our code. Additionally, TypeScript provides features like implicit type assignment, union types, and type assertion to enhance flexibility and expressiveness. Understanding and utilizing these type assignment techniques will greatly benefit TypeScript developers in their day-to-day programming tasks.

• No Comments
• assignment , typescript

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

Table of Contents

Not stay with the doubts.

• Privacy Overview
• Strictly Necessary Cookies

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

brace-style

Formatting rules now live in eslint-stylistic . @stylistic/ts/brace-style is the replacement for this rule. See Deprecating Formatting Rules for more information.

Enforce consistent brace style for blocks.

Some problems reported by this rule are automatically fixable by the --fix ESLint command line option .

This rule extends the base eslint/brace-style rule. It adds support for enum , interface , namespace and module declarations.

See eslint/brace-style options .

How to Use ​

Try this rule in the playground ↗

Resources ​

• Rule source
• Test source

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• English (US)

Optional chaining (?.)

The optional chaining ( ?. ) operator accesses an object's property or calls a function. If the object accessed or function called using this operator is undefined or null , the expression short circuits and evaluates to undefined instead of throwing an error.

Description

The ?. operator is like the . chaining operator, except that instead of causing an error if a reference is nullish ( null or undefined ), the expression short-circuits with a return value of undefined . When used with function calls, it returns undefined if the given function does not exist.

This results in shorter and simpler expressions when accessing chained properties when the possibility exists that a reference may be missing. It can also be helpful while exploring the content of an object when there's no known guarantee as to which properties are required.

For example, consider an object obj which has a nested structure. Without optional chaining, looking up a deeply-nested subproperty requires validating the references in between, such as:

The value of obj.first is confirmed to be non- null (and non- undefined ) before accessing the value of obj.first.second . This prevents the error that would occur if you accessed obj.first.second directly without testing obj.first .

This is an idiomatic pattern in JavaScript, but it gets verbose when the chain is long, and it's not safe. For example, if obj.first is a Falsy value that's not null or undefined , such as 0 , it would still short-circuit and make nestedProp become 0 , which may not be desirable.

With the optional chaining operator ( ?. ), however, you don't have to explicitly test and short-circuit based on the state of obj.first before trying to access obj.first.second :

By using the ?. operator instead of just . , JavaScript knows to implicitly check to be sure obj.first is not null or undefined before attempting to access obj.first.second . If obj.first is null or undefined , the expression automatically short-circuits, returning undefined .

This is equivalent to the following, except that the temporary variable is in fact not created:

Optional chaining cannot be used on a non-declared root object, but can be used with a root object with value undefined .

Optional chaining with function calls

You can use optional chaining when attempting to call a method which may not exist. This can be helpful, for example, when using an API in which a method might be unavailable, either due to the age of the implementation or because of a feature which isn't available on the user's device.

Using optional chaining with function calls causes the expression to automatically return undefined instead of throwing an exception if the method isn't found:

However, if there is a property with such a name which is not a function, using ?. will still raise a TypeError exception "someInterface.customMethod is not a function".

Note: If someInterface itself is null or undefined , a TypeError exception will still be raised ("someInterface is null"). If you expect that someInterface itself may be null or undefined , you have to use ?. at this position as well: someInterface?.customMethod?.() .

eval?.() is the shortest way to enter indirect eval mode.

Optional chaining with expressions

You can also use the optional chaining operator with bracket notation , which allows passing an expression as the property name:

This is particularly useful for arrays, since array indices must be accessed with square brackets.

Optional chaining not valid on the left-hand side of an assignment

It is invalid to try to assign to the result of an optional chaining expression:

Short-circuiting

When using optional chaining with expressions, if the left operand is null or undefined , the expression will not be evaluated. For instance:

Subsequent property accesses will not be evaluated either.

This is equivalent to:

However, this short-circuiting behavior only happens along one continuous "chain" of property accesses. If you group one part of the chain, then subsequent property accesses will still be evaluated.

Except the temp variable isn't created.

Basic example

This example looks for the value of the name property for the member bar in a map when there is no such member. The result is therefore undefined .

Dealing with optional callbacks or event handlers

If you use callbacks or fetch methods from an object with a destructuring assignment , you may have non-existent values that you cannot call as functions unless you have tested their existence. Using ?. , you can avoid this extra test:

Stacking the optional chaining operator

With nested structures, it is possible to use optional chaining multiple times:

Combining with the nullish coalescing operator

The nullish coalescing operator may be used after optional chaining in order to build a default value when none was found:

Specifications

Browser compatibility.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• Nullish coalescing operator ( ?? )

Assignments

TypeScript narrowing using assignments is a way to narrow the type of a variable based on the value assigned to it. When a variable is assigned a value, TypeScript infers its type based on the assigned value, and it narrows the type of the variable to match the inferred type.

Nullish Coalescing

The nullish coalescing operator is an alternative to || which returns the right-side expression if the left-side is null or undefined. In contrast, || uses falsy checks, meaning an empty string or the number 0 would be considered false. A good example for this feature is dealing with partial objects which have defaults when a key isn't passed in. interface AppConfiguration { // Default: "(no name)"; empty string IS valid name: string; // Default: -1; 0 is valid items: number; // Default: true active: boolean; } function updateApp(config: Partial ) { // With null-coalescing operator config.name = config.name ?? "(no name)"; config.items = config.items ?? -1; config.active = config.active ?? true; // Current solution config.name = typeof config.name === "string" ? config.name : "(no name)"; config.items = typeof config.items === "number" ? config.items : -1; config.active = typeof config.active === "boolean" ? config.active : true; // Using || operator which could give bad data config.name = config.name || "(no name)"; // does not allow for "" input config.items = config.items || -1; // does not allow for 0 input config.active = config.active || true; // really bad, always true } // You can read more about nullish coalescing in the 3.7 blog post: https://devblogs.microsoft.com/typescript/announcing-typescript-3-7/