TypeScript is a natural extension of JavaScript that’s used in many projects in place of JavaScript.
However, not everyone knows how it actually works.
In this article, we’ll look at how to create a project with the TypeScript compiler and write some code.
Installing Packages
We can install packages by using some npm commands.
npm install performs local install of the packages specified in the package.json file.
npm install package@version performs a local install of a specific version of a package and updates the package.json to add the package in the dependencies section.
npm install --save-dev package@version performs a local install of a specific version of a package and updates the package.json file to add the package to the devDepdencies section.
devDepencies section adds the dependencies required for the development of the project but it’s not part of the app.
npm install --global package@version performs a global install of a specific version of a package.
npm list will list all the local packages and their dependencies
npm run runs one or more scripts defined in the package.
npx package runs the code contained in a package.
We should exclude the node_modules folder because it has a large number of files and may contain platform-specific components that don’t work when the project is checked out.
Instead, we should check out the project and let npm install create the node_modules folder.
To maintain consistency in the packages each time it’s checked out, a package.json file is created.
With it, version changes to packages we use for dependencies won’t be affected.
TypeScript Compiler Configuration File
The TypeScript compiler, tsc is responsible for compiling TypeScript files.
It’s the compiler that’s responsible for implementing TypeScript features like static types.
The result of that the compiler outputs would be pure JavaScript with all the TypeScript keywords and expressions removed.
A sample tsconfig.json may have the following:
{
"compilerOptions": {
"target": "es2018",
"outDir": "./dist",
"rootDir": "./src"
}
}
They have the following meaning.
compilerOptions is the section that groups the settings that the compiler will use.
files specifies the files that will be compiled and overrides the behavior where the compiler searches for files to compile.
include is a setting used to select files for compilation by pattern. By default, .ts , .tsx , and .d.ts extensions will be selected.
exclude is a setting is used to exclude files from compilation by pattern.
compileOnSave , when it’s set to true , this setting is a hint to the code editor that it should run the compiler each time a file is saved.
This option isn’t supported bu all editors,
We can set these options is our project doesn’t have a typical TypeScript project structure.
The TypeScript package has type declaration for different versions of Javascript and for the APIs that are available in Node.js and browsers.
We can use tsc --listFiles and list the files that will be included in the build process.
Also, we can use npx to run tsc --listFiles without install tsc globally.
We can use npx tsc --listFiles to do that.
Compiling TypeScript Code
To compile the TypeScript code into a JavaScript bundle, we can use the tsc command to build our project.
This is from the TypeScript compiler that we installed in our package with:
npm install --save-dev typescript
Once we run tsc , we should have a dist folder by default with the built files.
The extension would be .js for JavaScript.
The file won’t have any TypeScript-specific expressions in them.
We shouldn’t edit this folder since it’ll be overwritten next time the compiler runs.
For the same reason, we shouldn’t check in the dist folder.
Compiler Errors
If we write our TypeScript code incorrectly, we may get compiler errors from the TypeScript compiler.
For instance, if we have the following function:
const printMsg = (msg: string): void => {
console.log(msg);
};
Then we would pass a string into it.
However, if we pass in a number to it as follows:
printMsg(5);
Then we would get a type mismatch error.
We would get:
Argument of type '100' is not assignable to parameter of type 'string'.ts(2345)
since we passed in a number.
This error is a benefit that TypeScript brings.
We get an error if the type of the argument doesn’t match what’s specified.
An editor that supports TypeScript would show us this error.
If we run tsc , we’ll see the same error as well if we haven’t corrected it.
However, we can disable emitting compiler errors with the noEmitOnError option set to true .
For instance, we can write:
{
"compilerOptions": {
"target": "es2018",
"outDir": "./dist",
"rootDir": "./src",
"noEmitOnError": true
}
}
Conclusion
We should see errors in our code if our code has type mismatches.
Also, we’ve to install packages with npm in except for the most trivial projects.
