Coding Assistance in TypeScript
Most of ReSharper's coding assistance features are also supported in TypeScript. You can find the detailed information on these features in the corresponding topics of the Coding Assistance section. In the main topic of the section, you can also find the feature matrix and check what exactly is supported in TypeScript.
In this topic, you can find some examples of using coding assistance features in TypeScript:
- Syntax highlighting
- Code completion
- Context Actions
- Regular Expressions Assistance
- Quick Documentation
and highlights source code within such files according to the predefined colors.
You can change colors and fonts at any time.
For more information, see
Configuring Fonts and Colors.
As usual, you can use
features to ease code writing.
TypeScript is an object-oriented programming language, so we can define types and members.
For example, ReSharper suggests members of the current instance after
ReSharper also takes into account the right level of abstraction. Consider the example below. After a new instance of the
object is initialized,
ReSharper displays all available members in the completion list.
methods are public, so they are in the list.
method is private, so it is excluded from the list.
ReSharper provides a set of context actions that target TypeScript code. You can find the full list of these actions in the Code Editing | TypeScript | Context actions page of ReSharper options. If necessary, you can also disable some of the actions using this page.
As soon as a context action becomes available for the current caret position, ReSharper displays the corresponding action indicator to the left of the caret. Sometimes, however, ReSharper provides several contextually available features for the current caret position. In this case, the action indicator corresponding to the action with the highest priority is shown, and all other actions only appear when you expand the action list by clicking on the action indicator or pressing Alt+Enter Context actions have the lowest priority, therefore, they often appear in the bottom of the action list:
Here are some examples of context actions for TypeScript:
Create from usage
You can create declarations of symbols after they have been actually used via the corresponding context action. Or you can use a data type that doesn't exist yet and declare it later using the following context action.
In some other cases, there is no need to create a new entity. When, for example, you want to use an existing one and the only thing that you you haven't taken into account yet is visibility scope.
Regular Expressions Assistance
ReSharper highlights syntax constructs as well as errors and redundancies in regular expressions:
Highlighting colors have the following meanings:
- Light Blue – character classes, anchors and quantifiers
- Light Green – grouping constructs
- Orange – set constructs
- Pink and light pink – escape sequence
- Red with curly underline – errors
Matching brackets in groups, group names and sets are highlighted when you set a caret to one of the delimiters. You can toggle and adjust this highlighting using the Highlight matching delimiters setting in ReSharper Options | Environment | Editor | Editor Appearance.
By default, ReSharper also highlights correct and incorrect escape sequences in strings:
and template strings:
If necessary, you can turn this highlighting of by clearing the Highlight special characters in string literals check box on the Code Inspection | Settings options page.
ReSharper also provides IntelliSense support for almost all TypeScript regular expression constructs. In the completion list, each construct is shown with a brief description.
You can invoke Basic completion (Ctrl+Space) to show elements, available for the current scope.
With ReSharper, you can quickly review the documentation on TypeScript symbols right in the editor. JSDoc comments will appear in a tooltip. All tags will be presented as sections:
To view the documentation of a symbol, place the caret on it and press Ctrl+Q or choosein the main menu.
For more information, see Quick Documentation.