Skip to main content

essential-tools

TypeScript Compiler (tsc):​

1. Understanding the Role of tsc​

The TypeScript compiler (tsc) is the tool that converts TypeScript files into JavaScript. It also performs type checking, ensuring that your code adheres to the type annotations you've specified.

2. Installation of tsc​

The TypeScript compiler is usually installed globally or as a project dependency via npm. The command npm install -g typescript will install it globally, making the tsc command available in your terminal.

3. Basic Compilation​

The most basic way to use tsc is to run tsc filename.ts, which will compile filename.ts into filename.js. This is a quick way to get started but is less commonly used in larger projects.

4. Using tsconfig.json​

For more complex projects, a tsconfig.json file is used to specify compiler options. Running tsc without arguments in a directory with a tsconfig.json will compile the project based on those settings.

5. Compilation Targets​

The target option in tsconfig.json allows you to specify the ECMAScript target version. This helps you control which JavaScript features your TypeScript code will be compiled to.

6. Source Maps​

You can enable source maps by setting the sourceMap option to true in your tsconfig.json. Source maps help you debug the original TypeScript code rather than the compiled JavaScript.

7. Watch Mode​

Running tsc -w or setting "watch": true in tsconfig.json will keep the compiler running and recompile files as they change. This is useful during development to catch errors quickly.

8. Excluding Files​

The exclude option in tsconfig.json lets you specify files or folders that should be ignored by the compiler. This is often used to exclude test files or third-party code.

9. Including Files​

Contrary to exclude, the include option specifies which files should be included in the compilation process. This can be used to compile only a subset of your TypeScript files.

10. Emitting Declaration Files​

The declaration option, when set to true, will emit .d.ts files alongside compiled JavaScript. This is useful when building a TypeScript library for public consumption.

11. Strict Type Checking​

The strict option enables a wide range of type checking behavior to make your code more robust. This is often recommended for catching type-related errors early.

12. Handling Modules​

The module and moduleResolution options control how TypeScript should module-ize the code and resolve module imports. Understanding these options can help with compatibility across different environments.

13. Downlevel Iteration​

The downlevelIteration option allows for more accurate iteration behavior when targeting older versions of ECMAScript. This can be important when using advanced TypeScript features in older environments.

14. No Emit on Error​

Setting the noEmitOnError option to true will prevent tsc from emitting output files if any errors are found. This is useful as a quality gate in build processes.

15. Project References​

Using the references option in tsconfig.json allows you to set up multi-project builds. This enables more efficient builds and type checking across multiple TypeScript projects.

TypeScript Language Server (TSServer):​

1. Role of TSServer:​

TSServer powers TypeScript features in various editors like VSCode. It's responsible for error checking, auto-completion, and other smart features that improve your coding experience.

2. Language Services API:​

TSServer utilizes TypeScript's Language Services API to provide its features. This API extracts syntactical and semantic information from TypeScript code to assist in tasks like error checking and refactoring.

3. Incremental Parsing:​

TSServer uses incremental parsing for faster performance. This means it only re-parses the parts of the code that have changed, making it more efficient.

4. Configuration via tsconfig.json:​

TSServer reads from a tsconfig.json file to know the compiler options and project setup. Make sure your project has this file configured correctly for optimal usage of TSServer.

5. Communication Over IPC:​

TSServer communicates with client editors using Inter-process communication (IPC). This enables rapid and responsive exchange of information between the editor and TSServer.

6. Plug-in Architecture:​

TSServer allows the use of plugins to extend its functionalities. This means you can add extra features or modify default behaviors using third-party plugins.

7. Support for JavaScript:​

TSServer is not exclusive to TypeScript; it also supports JavaScript files. You get similar intelligent code features when working with JavaScript.

8. Type Checking:​

TSServer performs robust type checking in your code. It flags type errors in real-time, helping you to write safer and more reliable code.

9. Auto-Imports:​

TSServer facilitates automatic imports for modules. It detects the required modules and provides suggestions to auto-import them into your file.

10. Go to Definition and Find References:​

TSServer makes navigating your codebase easier. Features like "Go to Definition" and "Find References" are provided, making it simpler to move through large projects.

11. Syntax Highlighting and Formatting:​

TSServer also powers syntax highlighting and code formatting. This makes your code easier to read and understand, improving overall code quality.

12. IntelliSense:​

TSServer provides IntelliSense capabilities. It predicts what you're going to type, saving you time and reducing coding errors.

13. Code Actions and Fixes:​

TSServer offers automatic suggestions for code fixes. When you encounter errors or code smells, it can automatically fix them or suggest how to fix them.

14. Watch Mode:​

TSServer has a "watch mode" where it keeps track of file changes in real-time. This is particularly useful in large projects where you're frequently updating files.

15. Refactoring Tools:​

TSServer aids in code refactoring by providing several automated refactoring options. These tools help improve your code structure without changing its behavior.

1. TypeScript Language Features (VSCode)​

Built into VSCode, this extension provides core TypeScript features like IntelliSense, code navigation, and refactoring. It is the starting point for any TypeScript development in VSCode.

2. TSLint/ESLint (VSCode, WebStorm)​

These extensions integrate the TSLint or ESLint static code analysis tools into your IDE. They help enforce coding standards and catch potential errors in your TypeScript code.

3. Prettier (VSCode, WebStorm)​

Prettier is an opinionated code formatter that supports TypeScript. Having it integrated into your IDE ensures consistent code styling across your project.

4. GitLens (VSCode)​

GitLens supercharges your Git capabilities within VSCode. This is useful in TypeScript projects to track code history, blame, and other Git features at the line level.

5. Debug Visualizer (VSCode)​

This extension adds graphical visualization to your debugger. For TypeScript developers, this can make inspecting complex data structures much easier.

6. Code Spell Checker (VSCode)​

While not TypeScript-specific, this extension can catch common spelling errors in your code. This is useful for preventing typos in variable or function names.

7. Path Intellisense (VSCode)​

Path Intellisense autocompletes filenames in your project. This is particularly useful in TypeScript projects where file organization can become complex.

8. Material Theme (VSCode, WebStorm)​

Changing the theme can make it easier to read and understand code. Material Theme offers a variety of well-crafted schemes that can make your TypeScript code more readable.

9. REST Client (VSCode)​

This extension allows you to send HTTP requests and view responses directly within VSCode. It's valuable for TypeScript developers working on backend services or consuming RESTful APIs.

10. Live Share (VSCode)​

Visual Studio Live Share enables real-time collaborative coding. This is helpful for pair programming and code reviews in TypeScript projects.

11. Wallaby.js (VSCode, WebStorm)​

Wallaby.js provides real-time test execution and feedback. For TypeScript projects, this can be a huge time-saver, offering immediate insight into how code changes affect your tests.

12. Docker (VSCode)​

The Docker extension helps you manage Docker images and containers. It's particularly useful if your TypeScript application is designed to run in a containerized environment.

13. SonarLint (VSCode, WebStorm)​

SonarLint provides on-the-fly feedback on code quality and bugs. It's a valuable tool for maintaining a high quality of TypeScript code.

14. Rainbow Brackets (VSCode, WebStorm)​

Rainbow Brackets color-codes matching brackets and parentheses. In complex TypeScript codebases, this makes it easier to read and understand the code structure.

15. WebStorm’s Built-in TypeScript Support​

WebStorm comes with out-of-the-box TypeScript support, including features like code navigation, refactorings, and built-in terminal. This can streamline your TypeScript development workflow without needing additional extensions.

Auto-formatting with Prettier:​

  1. What is Prettier:

    Prettier is an opinionated code formatter that supports multiple languages and frameworks. It helps you write clean and consistent code by automatically reformatting your code to conform to a style guide.

  2. Installation:

    Prettier can be installed as a development dependency in your project via npm or yarn. Run npm install --save-dev prettier in your terminal to install it.

  3. Configuration Files:

    You can specify your preferences in a .prettierrc file. This file should be placed at the root directory of your project to apply global formatting rules.

  4. Basic CLI Usage:

    The most straightforward way to use Prettier is through its command-line interface. Use prettier --write followed by the file or directory path to auto-format code.

  5. Ignoring Files:

    To skip formatting some files or folders, you can use a .prettierignore file. This works similarly to a .gitignore file, where you list the paths to be ignored.

  6. Integrating with Editors:

    Most popular code editors like VS Code have Prettier plugins. Once installed, you can configure the editor to format files on save.

  7. Formatting on Save:

    For an even smoother experience, enable the "format on save" feature in your editor. This will automatically format the file every time you save it.

  8. Prettier with Git Hooks:

    You can integrate Prettier with Git hooks to auto-format code before committing changes. This ensures code quality and consistency.

  9. Prettier in Build Pipeline:

    Adding Prettier to your CI/CD pipeline ensures that only formatted code gets deployed. This can be done by adding a Prettier check step in your build process.

  10. Formatting Markup Languages:

    Prettier supports auto-formatting for multiple markup languages like HTML, XML, and Markdown. This makes it versatile for full-stack projects.

  11. Formatting Scripting Languages:

    Prettier is not just limited to JavaScript or TypeScript; it also supports languages like Python and PHP. You can use the same tool across different language stacks.

  12. Line Length and Wrapping:

    You can set a preferred line length in your .prettierrc file. Prettier will automatically wrap text to fit within this limit.

  13. Trailing Commas and Semicolons:

    Prettier lets you define whether to use trailing commas and semicolons. Specify your preference in the .prettierrc configuration file.

  14. Tabs or Spaces:

    You can choose between tabs and spaces for indentation. Prettier takes care of this, so your team doesn't have to debate over it.

  15. Sharing Prettier Config:

    For team projects, it’s crucial to have a consistent formatting style. Prettier allows you to share your configuration by exporting the .prettierrc file.

Useful NPM Packages for TypeScript Projects:​

  1. TypeScript:

    TypeScript is the core package you'll need for TypeScript development. It includes the TypeScript compiler (tsc) that compiles TypeScript code to JavaScript.

  2. ts-node:

    ts-node enables you to run TypeScript code directly without needing to compile it first. It's great for quick testing and development.

  3. tslint or eslint:

    TSLint and ESLint are linters that help catch syntax errors, bugs, or non-adherence to coding standards. ESLint is more commonly used nowadays.

  4. @types/node:

    This package provides TypeScript definitions for Node.js, which enables strong typing and IntelliSense for Node.js modules.

  5. jest or mocha:

    Jest and Mocha are popular testing frameworks that have TypeScript support. Choose one based on your project’s needs.

  6. ts-jest:

    If you are using Jest, ts-jest is an NPM package that allows you to use TypeScript with Jest seamlessly.

  7. typeorm or sequelize:

    These are Object Relational Mapping (ORM) libraries that have TypeScript support. They help interact with databases in a type-safe manner.

  8. axios or node-fetch:

    Axios and node-fetch are HTTP libraries that can be used in TypeScript projects for making API requests.

  9. rxjs:

    RxJS is a library for dealing with asynchronous operations. It has first-class TypeScript support and is heavily used in Angular projects.

  10. express:

    Express is a fast, unopinionated web framework for Node.js. Combined with @types/express, it works well in TypeScript projects.

  11. inversifyjs:

    InversifyJS is an inversion of control (IoC) container that helps with dependency injection in TypeScript projects.

  12. nodemon:

    Nodemon watches your files and restarts your server during development. It can be configured to work with TypeScript.

  13. dotenv:

    Dotenv is a package that allows you to use environment variables in your TypeScript application. It’s essential for managing configurations.

  14. class-validator:

    If you are using classes to model entities, class-validator provides decorators to validate class properties easily.

  15. lodash:

    Lodash is a utility library that has many helpful functions for handling arrays, objects, and other data types. You can install its type definitions via @types/lodash.