Compatible Runners | |
---|---|
Test Runners | |
Linters |
Provides ESLint, with full configuration for TypeScript. Based on the same configuration we use in JavaScript. |
Table of Contents
Description
Microsoft presents TypeScript as “JavaScript that scales”. TypeScript is a superset of JavaScript that allows you to type your code. Not everything needs to have a type as the tool is powerful enough to infer most of the types.
TypeScript has types but it also supports the ESNext Specification.
Features
TypeScript being a superset of JavaScript, features supported by our Babel preset apply here.
Or you can check out the TypeScript specific features
Linting
Like any language, TypeScript has best practices and practices that you shouldn’t do. With the help of ESLint we check the code for common mistakes and formatting errors.
Installation
npm install @swissquote/crafty-preset-typescript --save
module.exports = {
presets: [
"@swissquote/crafty-preset-typescript",
"@swissquote/crafty-runner-webpack", // optional
],
js: {
app: {
runner: "webpack", // webpack (optional if you have a single runner defined)
source: "js/app.ts"
}
}
};
Usage with Webpack
You have to configure TypeScript with the tsconfig.json
file that you put at the root of the project.
Some options can’t be auto-configured through the loaders / plugins so that’s why you have to do it yourself.
Moreover, the integration with your IDE is simplified if you have a complete tsconfig.json
in your project.
Usage with Jest
If you include both crafty-preset-typescript
and crafty-preset-jest
.
When running your tests with crafty test
this preset will be use to convert all .ts
, .tsx
, .mts
, and .cts
files (source and test files)
Type definition files
TypeScript is also able to understand Types on libraries written in pure JavaScript this is done through types definition files.
Some packages come with their own definitions, for the others there are two ways to consume these files.
- Use
@types
scoped packages from NPM - Create your own
*.d.ts
file
Getting Started
We have a user guide to get started with TypeScript in your project
crafty jsLint
Leveraging ESLint, we add configuration to lint TypeScript. You can use that using the same command as for JavaScript.
crafty jsLint src/**
If you pass the --fix
flag it will fix all the errors it can and write them
directly to the source file.