TypeScript Getting Started
Compile TypeScript to JavaScript
TypeScript is transpiled into JavaScript using a compiler.
TypeScript being converted into JavaScript means it runs anywhere that JavaScript runs!
TypeScript has an official compiler which can be installed using a package manager (npm).
Learn more about npm, and how to get started here: What is npm?
Within your npm project, run the following command to install the compiler:
Example
npm install typescript --save-dev
Which should give you an output similar to:
Example
added 1 package, and audited 2 packages in 2s
found 0 vulnerabilities
The compiler is installed in the node_modules directory and can be run with: npx tsc.
Example
npx tsc
Which should give you an output similar to:
Example
Version 4.5.5
tsc: The TypeScript Compiler - Version 4.5.5
Followed by a list of all the Common Commands.
Installing Globally
Installing TypeScript globally means adding the tsc command to your system PATH so it is available from any folder.
Example
npm install -g typescript
Example
tsc -v
Pros
- Quick access to
tscfrom any project or directory. - Useful for trying commands, learning, or one-off scripts.
- Some editors or tools can discover a global compiler automatically.
Cons
- Different machines (or teammates) may have different global versions.
- Can drift from the version your project expects, causing subtle issues.
- May require elevated permissions on some systems to install globally.
Best practice is to install TypeScript as a project devDependency and run it with npx tsc so the exact version is consistent across environments. A global install is optional and convenient for ad-hoc usage.
Configuring the compiler
By default the TypeScript compiler will print a help message when run in an empty project.
The compiler can be configured using a tsconfig.json file.
You can have TypeScript create tsconfig.json with the recommended settings with:
Example
npx tsc --init
Which should give you an output similar to:
Example
Created a new tsconfig.json with:
TS
target: es2016
module: commonjs
strict: true
esModuleInterop: true
skipLibCheck: true
forceConsistentCasingInFileNames: true
You can learn more at TypeScript Config
Here is an example of more things you could add to the tsconfig.json file:
Example
{
"include": ["src"],
"compilerOptions": {
"outDir": "./build"
}
}
You can open the file in an editor to add those options.
This will configure the TypeScript compiler to transpile TypeScript files located in the src/ directory of your project, into JavaScript files in the build/ directory.
Your First TypeScript Program
Let's create a simple "Hello, World!" program to verify your TypeScript setup.
- Create a new file named
hello.tswith the following content:
hello.ts
function greet(name: string): string {
return `Hello, ${name}!`;
}
const message: string = greet("World");
console.log(message);
- Compile your TypeScript code:
Example
npx tsc hello.ts
This will generate a hello.js file in the same directory:
Example
function greet(name) {
return "Hello, ".concat(name, "!");
}
const message = greet("World");
console.log(message);
- Run the compiled JavaScript:
Example
node hello.js
You should see the output:
Example
Hello, World!
Note: If you're using the tsconfig.json configuration mentioned earlier, you would place your TypeScript files in the src directory and the compiled JavaScript will appear in the build directory.
