Configuration page
Learn about TypeScript Configurations and Linting
Overview
In this section we'll learn about TypeScript configuration options to help us optimize our workflow.
For the exercise, we will learn how to import and export functions between modules.
Configuring TypeScript
We're able to configure how our projects use TypeScript from selecting which files to compile to removing comments from those files. This is done through the creation of a tsconfig.json
file.
tsconfig.json
Customize the TypeScript compiling and linting options by creating a tsconfig.json
file in the root directory of your TypeScript project. The following config will
- specify ECMAScript target version as 'es5'
- specify module code generation (from 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015' or 'esnext')
- generate source map files
- remove comments from compiled code
The following is just example config code. Don't add this to your project or the tests for the TypeScript exercises in this training will fail.
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true,
"removeComments": true
}
}
To learn more about all of the options tsconfig has, check out the TypeScript TSConfig Reference. The Schema can also be found here.
Linting
We can also configure linting options to catch bugs and help enforce uniform styling. The following options will warn on unused local variables and parameters, and expressions or declarations implying 'any'.
Besides linting with the TypeScript compiler, tsc
, it is recommended to use a specialized linter like ESLint
.
{
"compilerOptions": {
...
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitAny": true
...
}
}
ESLint
ESLint is a static code analysis tool. It helps us find and fix problematic patterns with our code, enforce style guidelines and is highly customizable - you can code and plug in your own rules.
Why Migrate to ESLint?
If you are looking for migrating to ESLint on an existing Angular project, consider using angular-eslint. We also have a blog post to help you on that!
TSLint is deprecated since January 2020, in favor of ESLint.
ESLint supports both TypeScript and JavaScript, so it can be used on a wider variety of projects when compared to TSLint.
Performance improvements have been listed as one of the reasons by the TSLint creators and maintainers for its deprecation.
Before Starting
It should be fairly painless to migrate to ESLint, but we do recommended checking if there are any TSLint rules that are considered essential to your project, and comparing those with ESLint to see if there are mismatches regarding your project's requirements. This Migration Guide is a great source for comparing ESLint and TSLint rules.
Migration
The tslint-to-eslint-config repository aims to convert the TSLint configuration to "the closest possible ESLint equivalent".
- Depending on your project, you might want to take a look at some of the CLI flags available;
- Run
npx tslint-to-eslint-config
.
And that's it!
ESLint Configuration
After the migration, you should see a new file called .eslintrc.js
with ESLint configuration in it.
It looks like this one:
module.exports = {
extends: "eslint:recommended",
rules: {
// override default options
"no-console": "error",
"no-alert": "error",
yoda: ["error", "never"],
// disable
"init-declarations": "off",
"no-inline-comments": "off",
},
};
Yes, there is a Yoda
rule in ESLint. It is a rule under "best practice" category, and what it does is that it can enforce developers to either write a condition like if (lightsaber.color === 'red')
or if ('red' === lightsaber.color)
.
Here is a list of ESLint rules. Take some time getting to know them!
For more information on TypeScript with ESLint, you can refer to the typescript-eslint repository.
Exercise: Exporting and Importing
The Problem
In this exercise, we will:
- Update 1-ide-greeter.ts to export the
greeter
function as thedefault
export. 1-ide-greeter.ts currently looks like:function greeter(person: string) { return "Hello, " + person; }
- Update 1-ide-hello-earth.ts, to import and use
greeter
. 1-ide-hello-earth.ts currently looks like:document.body.innerHTML = greeter("Earth");
- Compile 1-ide-hello-earth.ts to JavaScript so we can run it.
What You Need to Know
- Export a default value like:
const value = "My Value"; export default value;
- Import a default value like:
import value from "./value-exporter";
Verify Your Solution
✏️ Run the following to verify your solution works:
npm run 1-ide
The Solution
Click to see the solution
✏️ Update1-ide-greeter.ts
to:
function greeter(person: string) {
return "Hello, " + person;
}
export default greeter;
✏️ Update 1-ide-hello-earth.ts
to:
import greeter from "./1-ide-greeter";
document.body.innerHTML = greeter("Earth");
✏️ Compile 1-ide-hello-earth.ts
with:
tsc 1-ide-hello-earth.ts
Things to Explore
- Hover over
greeter
, what does your IDE show? - Pass a number to
greeter
, what does your IDE show?