5 Useful TypeScript Features In VS Code

When you are programming you often do small repetitive tasks. You might be inserting delimiting characters in the right place or renaming variables. Here are five features in Visual Studio Code I find useful. They help with trivial chores and lets you …


This content originally appeared on DEV Community and was authored by Daniel Fyhr

When you are programming you often do small repetitive tasks. You might be inserting delimiting characters in the right place or renaming variables. Here are five features in Visual Studio Code I find useful. They help with trivial chores and lets you focus on more important things.

1. Add missing properties

You have an interface and you need to populate an object with the fields. Use this code action to help with this tedious task. It works with types too.

mac: command .
win: ctrl .
Add missing properties

2. Convert concatenated strings to template string

Template strings are easier to read. It's easy to forget a whitespace somewhere when concatenating strings. Get rid of them with this action.

mac: command .
win: ctrl .

Convert to template string

See there was a missing whitespace in there! 👀

3. Add braces to function

Sometimes you need to change something or add a line to a short arrow function. I always make some small mistake when doing this by hand. It's either one { too many or few but with this feature you don't have to worry about it.

mac: command .
win: ctrl .

Add braces to function

4. Convert to named function

Can't decide between function and const? Neither can anyone else but switching between them is super simple.

mac: command .
win: ctrl .

Convert to named function

5. Rename

Last but not least, renaming things is a simple task that you often do. A good habit is to use the built in rename feature. It will update the name in all places at once, including other files.

mac: F2
win: F2

Rename

What's missing from this list?

Did you find this helpful? Do you think I missed something that every TypeScript VS Code user should know about?

Please feel free to comment with your suggestions! Thanks for reading.


This content originally appeared on DEV Community and was authored by Daniel Fyhr


Print Share Comment Cite Upload Translate Updates
APA

Daniel Fyhr | Sciencx (2022-04-24T18:02:41+00:00) 5 Useful TypeScript Features In VS Code. Retrieved from https://www.scien.cx/2022/04/24/5-useful-typescript-features-in-vs-code/

MLA
" » 5 Useful TypeScript Features In VS Code." Daniel Fyhr | Sciencx - Sunday April 24, 2022, https://www.scien.cx/2022/04/24/5-useful-typescript-features-in-vs-code/
HARVARD
Daniel Fyhr | Sciencx Sunday April 24, 2022 » 5 Useful TypeScript Features In VS Code., viewed ,<https://www.scien.cx/2022/04/24/5-useful-typescript-features-in-vs-code/>
VANCOUVER
Daniel Fyhr | Sciencx - » 5 Useful TypeScript Features In VS Code. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/04/24/5-useful-typescript-features-in-vs-code/
CHICAGO
" » 5 Useful TypeScript Features In VS Code." Daniel Fyhr | Sciencx - Accessed . https://www.scien.cx/2022/04/24/5-useful-typescript-features-in-vs-code/
IEEE
" » 5 Useful TypeScript Features In VS Code." Daniel Fyhr | Sciencx [Online]. Available: https://www.scien.cx/2022/04/24/5-useful-typescript-features-in-vs-code/. [Accessed: ]
rf:citation
» 5 Useful TypeScript Features In VS Code | Daniel Fyhr | Sciencx | https://www.scien.cx/2022/04/24/5-useful-typescript-features-in-vs-code/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.