The official website of Grape City, grape city for developers to provide professional development tools, solutions and services, enabling developers.
Blog.bitsrc. IO /tips-for-co…
If you’ve experienced the benefits of a strongly typed language like JAVA, including its rich type variables, abstractions, and interfaces, switching to JavaScript will be unsatisfying. In particular, the JavaScript declared variable Number can easily be assigned to String, and how the IDE performs any type of IntelliSense is confusing.
In the face of this technical hurdle, we can’t ignore the benefits of TypeScript. One of the most obvious things we can do with aN IDE is actually use JavaScript. This article will introduce some TypeScript coding tricks to help you work faster and more efficiently.
Create custom code snippets
Getting default code snippets and customizing code snippets is an important part of VScode’s IntelliSense functionality. Code snippets can drastically reduce the time to write code by remembering to use prefixes and what triggers them.
By selecting “Insert code snippet” from the command menu, you can view this rich list, which can be of great help in daily work.
Another important thing is to add custom code snippets.
Usage: Choose File > Preferences under User Code Snippets (Code > Preferences on macOS), and select a language that the snippets can access, or a global language.
To add custom code snippets, just add a JSON definition to the file.
The new Snippets files are created in the project folder, with custom extensions and support for JSON inline comments.
Contents to be defined include:
The name, if not described, will be part of the IntelliSense drop-down list. The default is the full sentence code section prefix, the word that triggers the snippet, can be defined as a string group or a value body, containing a list of code lines and columns, can be added with VScode tags, and the TAB move description is optional. If not, display the name of an item listed in the IntelliSense drop-down menu when it appears
In the example above we created a custom code snippet that is triggered when we start writing “mylog”. One might have questions about console.log in the code, but note that there is also a predefined variable: TM_SELECTED_TEXT, which refers to the currently selected text. Therefore, if we manually trigger this code snippet when selecting code, it encapsulates the selection in a console.log statement.
Here are some predefined variables for common snippets of code in development:
TM_SELECTED_TEXT Currently selected text or empty string TM_CURRENT_LINE Content of the current line TM_CURRENT_WORD Content of the word under the cursor or empty string TM_LINE_INDEX Line number based on the zero index TM_LINE_NUMBER Line number based on one index TM_FILENAME File name of the current document TM_FILENAME_BASE File name of the current document, Without the extension TM_DIRECTORY Directory of the current file TM_FILEPATH Full file path of the current document CLIPBOARD Contents in the CLIPBOARD WORKSPACE_NAME Name of the open workspace or folder
Date and time references:
CURRENT_YEAR Current year CURRENT_YEAR_SHORT The last two digits of the current year CURRENT_MONTH The month in double digits (for example, “02”) CURRENT_MONTH_NAME The full name of the month (for example, “July”) CURRENT_MONTH_NAME_SHORT Short of the month (for example, Jul) CURRENT_DATE A day in a month CURRENT_DAY_NAME Name of the day (for example, Monday) CURRENT_DAY_NAME_SHORT CURRENT_HOUR Current hour (24-hour system) CURRENT_MINUTE Current minute CURRENT_SECOND Current second CURRENT_SECONDS_UNIX Number of seconds since the Unix era
Dynamically add valid comment tags:
BLOCK_COMMENT_START Example output: JavaScript/* or HTML LINE_COMMENT Example output: in JavaScript/ /
Here are some examples:
Use “doc” to trigger the creation of a comment block, and the cursor is positioned at position1. If you write content and press TAB, you will jump to Position 1. If you write content and press TAB, you will jump to Position 1.
The final result is as follows:
Customize TypeScript formats
Customize your own coding format according to your personal style and coding habits
In the Settings window, type “typescript. Formatting.” typescript offers 24 formatting options.
Options include adding Spaces after opening and closing string parentheses, adding parentheses to new lines of functions, and handling semicolons (optionally ignoring, adding missing parentheses, or automatically removing them all).
From this list, you can customize VSCode to suit your coding style more closely. When done, select the Set Document Format option on the command panel to take effect.
Easy to reconstruct
Refactoring is especially troublesome on large code bases, where a simple change (for example, moving a class definition from one folder to another) can affect many files.
VSCode provides a nice set of features that don’t require any additional extensions.
1. Rename an existing symbol
Simple Search&Replace lets you rename a variable or class name in your code, unless the name is part of another entity, such as naming the Car class and then using its oCar as the instance variable. If you only intend to rename the actual class, this can cause some problems.
VSCode simplifies a lot, all we have to do is select one of the entities we want to rename and press F2 (or right click on it and select “rename symbol”, MAC works a little differently). Select a new name, and anything used during the process (including the definition, if it is not clicked initially) will be renamed correctly.
2. Abstract construction
If you use it more than once, you need to abstract it. A common refactoring technique is to extract logic into things like a function or a method.
Abstract by selecting the code you want to reuse and clicking the bulb next to it. For example, the last two lines need to be extracted:
Select extract to work globally, enter a new function name, and get the following:
The countCharacters feature also needs some polish, and the benefits are obvious in more complex use cases.
The bulb’s menu options are context-aware, and if we’re using classes, we have the option of extracting code into new methods, or converting types to interfaces, and converting individual values to constants.
3. Simplify functional signatures
Simplifying too many parameters by adding object decomposition to the mix:
Select all the parameters, then click on the bulb and select convert Parameters to morphed objects
To further optimize, open the type declaration, then cast it to an external type, and you can select the type definition again
Clicking “Extract to Type Alias” will ask for the new type name, which will be created and placed on the function’s signature
Simplify this code further
Automatic operation after saving the file
We’ve all experienced forgetting to format a file or run linter before committing code to the repository, and VSCode allows us to define preset actions to be performed immediately after the file is saved, thus avoiding development lapses.
Json to edit the file. Adding editor.codeActionsOnSave sets the list of actions to perform after saving the file, including running ESLint or adding missing imports.
It can be set to the following array:
Editor. codeActionsOnSave: [” source.fixall. eslint “, “source.addmissingimports”]
In the meantime, if we want to automatically add the formatting options mentioned earlier when we save the file (instead of manually formatting the document), we can add the following entry to our settings.json:
“editor.formatOnSave”: true
For example, the implementation sets the semicolon to auto-insert.
CodeLens counter
VSL does not activate CodeLens by default, which is inconvenient for large code bases. Here are some ideas for refactoring:
By enabling the ability to list counters that implement and reference classes, functions, types, and other constructs, there are small tokens.
To enable this feature, simply look up the word “CodeLens” on the Settings screen. Enable all counters.
You get the following:
The “3 references” and “1 reference” are added directly by VSCode, and once clicked, you get an extended view (in this example, the type defined) of the code that referenced the construction:
Bottom line: The TypeScript coding tips outlined in this article can make your coding more efficient, and we’ll be bringing you more in the future.
Read more: If you’re already familiar with TypeScript coding and are interested in cross-platform online Excel controls, click on the link.