Flash cards
Review the key moves
What is the main idea behind TypeScript Getting Started?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___ install typescript --save-devPut the learning moves in the order that makes the concept easiest to apply.
TypeScript Compiler
TypeScript is transpiled into JavaScript using a compiler.
TypeScript being converted into JavaScript means it runs anywhere that JavaScript runs!
Installing the Compiler
TypeScript has an official compiler which can be installed through 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-devWhich should give you an output similar to:
Example
added 1 package, and audited 2 packages in 2s
found 0 vulnerabilitiesThe compiler is installed in the node_modules directory and can be run with: npx tsc .
Example
npx tscWhich should give you an output similar to:
Example
Version 4.5.5
tsc: The TypeScript Compiler - Version 4.5.5Followed 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 typescriptExample
tsc -vPros
- Quick access to tsc from 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 --initWhich 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: trueYou 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.ts with 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.tsThis 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.jsExample
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.