Write high-quality TypeScript code
TypeScript has become a popular language, for use on both the client and server. In this blog post, you’ll learn some basics about writing TypeScript, and how Rider can make TypeScript enjoyable.
Compiling launches the TypeScript compiler (
.js extension while the source map uses
outdir compiler flag in the
tsconfig.json file to the desired directory – in this case it’s
wwwroot\js (more on
"sourcemap":false in the
The .tsconfig file is important for a working TypeScript program. It’s a configuration file that allows you to specify exactly which of the many TypeScript compiler options you need and save them in a JSON format. This way, you can check the configuration file into source code control or share it. Use Rider’s autocomplete feature to select the options you want.
The TypeScript language
Let’s start with the star of the show – Types! To start, TypeScript will simply infer the type based on its usage. You don’t actually have to declare the variable with a specific type in mind. But you probably want to use TypeScript for the types (and other features) so let’s take a look at them.
As you might expect, there are two kinds of types, basic and advanced. Declaring and using a type is simple, following this format
let | const variableName: type = value;:
let name: string = "JetBrains";
A special file named
lib.d.ts ships with TypeScript. This file includes a definition of the types. If you want to view any particular type, you can use Go To Declaration F12, and Rider will navigate to the type declaration for you to inspect it.
Functions that have many arguments often need to be refactored for maintainability and readability. This is especially true when some JSON is returned from an API and that data needs to be passed into a function. You can convert from multiple arguments to a single object by using Rider’s Arguments to Object intention (Alt+Enter).
Similarly, there are times when we need to take multiple expressions that aren’t exactly DRY and refactor them into something more maintainable. That’s where Rider’s Introduce Variable comes in handy. Once again, Alt+Enter to the rescue as we highlight the code in question and have Rider modify it so it’s more manageable.
Are you tired of typing function declarations and
return keywords? Then arrow functions (aka Lambdas) are for you! Arrow functions, introduced in ES6, are a concise way to use anonymous function expressions, skipping over the ritual that a function declaration requires.
TypeScript for Web Development
Making async calls to APIs is a daily task of web developers. For those maintaining legacy web apps, you may have a lot of code that relies on traditional promises that needs to be converted to the async/await pattern. Rider makes this easy by providing an intention action, so all that’s needed is Alt+Enter, and the code is updated!
Other TypeScript features
Like most modern programming languages, TypeScript is testable. The following list represents some of the more popular frameworks available, though many others are available.
Keep an eye out for blog posts on object-oriented TypeScript and unit testing TypeScript in the following weeks.
Subscribe to Blog updates
Thanks, we've got you!
Another Look into the Future with Rider’s Predictive Debugger
In the 2023.2 release cycle, we’ve introduced the Predictive Debugger in ReSharper, which gives you predictions about code paths and variables beyond the current execution pointer. We’ve written extensively about its advantages compared to alternative debugging strategies like thorough thinking, log…
Visualize Entity Framework Relationships and Additional Query Analysis in ReSharper 2023.3
A lot of teams are using Entity Framework or EF Core to work with their database. As an Object-Relational Mapper (ORM), it bridges objects in code to a relational database model, so that as a developer you don’t have to worry too much about the actual database. We all know: that’s not entirely tr…
Automatically Analyze ASP.NET Core Performance With Dynamic Program Analysis
Slow web pages may make your users or customers abandon your web application, even before they’ve had a proper look at it. You’ve likely also been frustrated working with a web application that is slow to load. The good news is that the latest versions of ReSharper and JetBrains Rider’s Dynamic P…
OSS Power-Ups: MassTransit – Webinar Recording
The recording of our webinar, OSS Power-Ups: MassTransit, with Chris Patterson, is available. This was the thirteenth episode of our OSS Power-Ups series, where we put a spotlight on open-source .NET projects. Subscribe to our community newsletter to receive notifications about future webinars.…