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.