TypeScript Tutorial 101: Getting Started

A CodeMix eLearning Tutorial

Learn the basics about setting up a TypeScript project, from defining project dependencies to enforcing good practices.

For a hands-on learning experience, an interactive version of this tutorial is included in CodeMix.

Try it Yourself

What is CodeMix eLearning? | Discover Other Tutorials | View Steps

# TypeScript 101: Getting Started

### 01

# Welcome to TypeScript 101!

In this tutorial you will learn the basics about setting up a TypeScript project, ranging from defining project dependencies to enforcing good practices, the final result will be a
utility that will print out today's date.

A new project `tutorial-typescript101` has been added to your workspace. If you want to create your own TypeScript project, select `File > New > Project...` and choose `CodeMix > TypeScript Project`.

### 02

# Declaring Dependency

Type `"dateformat":` to include it as dependency, now we need to choose the version, to do this, trigger autocomplete (ctrl+space) and select the first option which should be the latest stable version.

### 03

# Installing Dependencies

To work with a TypeScript project, you first need to install required TypeScript modules. For this we will use the Terminal+ view.

1. Type `npm install` in Terminal+.
2. Press `Enter`.

### 04

# Automatic Import

Instead of using dateformatter directly, let's write a class that wraps dateformatter, so that in case you wish to change date formats, you can do it in a single place.

After installing our dependency, we need to import it in order to start using it. Let's do it by adding the following text at the beginning of `src/date-formatter.ts`.
Note that CodeMix auto suggests the module to import from the ones detected in your project.

```
import dateformat = require("dateformat");
```

Just below the import, add the class implementation:
```
export class DateFormatter {
    isoDate(date): string{
        return dateformat(date, "isoDate");
    }
}
```

### 05

# Automatic Import (continued)

We can now import our new class in main.ts to start using it.

When you start typing the name of the class, you will be suggested with the DateFormatter class, choose this selection and notice that it is automatically imported for us.

```
const formattedDate = new DateFormatter().isoDate(now);
```

### 06

# Configuring tsconfig.json

One of the benefits of using TypeScript is enforcing types (strong types).

If you take a look at our method, we aren't specifying what type of argument is required. It can be anything like a string in iso format, a number representing a timestamp in milliseconds or a `Date` object. 
Let's tell TypeScript compiler to be more strict with types. We can do this by setting `noImplicitAny` to `true` in the `compilerOptions` section of `tsconfig.json`.

Please note CodeMix can help us configuring `tsconfig.json` by suggesting the available settings as we type (it will suggest the setting name and a list of available values if possible). Let's turn on these settings by adding the following line:

`noImplicitAny: true`

Note: make sure to add a `,` at the end of the previous line to avoid parsing issues.

Now let's get back to our DateFormatter class, we can now see an error saying that the parameter `date` has `any` type. Let's fix the problem by providing a type for it:

`isoDate(date: Date) {`

### 07

# Enforcing Good Practices

By following good practices when coding, we can write better and easier to understand code. One of the tools that can aid in this task is `tslint`.

tslint defines a set of rules that the developer must follow when coding on the project. Once the rules are set, tslint compiles the code and reports sections of code that doesn't follow these rules.

CodeMix can help you with configuring tslint by leveraging content assist.

Let's add a couple of them:
```
{
    "rules": {
        "quotemark": [true, "single"],
        "whitespace": [true, "check-preblock"]
    }
}
```
The first rule enforces that strings are written using single quotes, so if you look at the `require` function you'll see an error being reported at that position.
The second one requires that when opening a block of code, the opening brace is preceded by an empty space. You will notice that both the rules have been violated in the class method.

After enabling these rules, we can see that there are 3 errors reported for `src/date-formatter.ts` in lines 1, 4 and 5. 
In the next step we will see how easily we can fix these issues with CodeMix.

### 08

# Dealing with lint errors

We can let CodeMix fix these errors for us, so let's fix the errors related to quotes by clicking on the QuickFix bulb on the left section of the editor at line1 and select `Fix all 'quotemark'`.

There are times where we need to break the conventions established in tslint. For such cases, tslint allows us to skip validation for certain rule or rules, for a line or for the rest of the file.
Let's give it a try by clicking the QuickFix bulb on the left at line 4 of the editor and select `Disable rule 'whitespace'`.

### 09

# Build Pipelines

We are almost ready to test our program. First we need to transpile our TypeScript code to JavaScript so it can be executed by Node.

One of the cool features of CodeMix is that it can detect that our project uses TypeScript and configure a build pipeline task that can be used to transpile our code.

To run the build pipeline, click on the pipeline button, located the top of the editor you'll find the Context Bar and on the right you'll find the pipeline button. Basically, it will run a task that runs the TS compiler in watch mode (this will trigger the build process everytime there is a change in the project). A cool side effect of running the build pipeline, is that it can catch errors reported by the TypeScript compiler and display those in the `Problems` view.

Looks like there is an error in src/formats, the code has a `'` in line 3, let's add it so it looks like this:
```
export enum DateFormats {
    ISO_DATE = 'isoDate'
}
```

### 10

# Running

Now that our code doesn't have any errors, let's execute by running:
`npm run start`

We should now see today's date in ISO format in Terminal+.

### 11

# Changing the TypeScript Version

By default, CodeMix will use it's internal version of TypeScript for handling TypeScript related tasks like validation, task detection, etc.

The behavior of TypeScript can change between versions. You may choose between selecting the internal one bundled with CodeMix, or the one defined by project. 
To select project specific version, invoke Quick Open using `Ctrl+Shift+P / Com+Shift+P(Mac)` and then type: `TypeScript: Select TypeScript version`. It'll show the list of versions and you can select a version from the list.

### 12

# Nice Job!!!

You've finished the TypeScript 101 tutorial. As you are learning TypeScript, why not check out <TypeScript's Documentation|https://www.typescriptlang.org/docs/home.html> for more info on getting started with TypeScript.

You can also check the <a href='https://www.genuitec.com/elearning/' target='_blank'>Angular 101</a> tutorial to learn how to create a web app with TypeScript using Angular.