Share
Explore
How to use the TypeScript compiler (tsc) to compile TypeScript code:
Here's a detailed lab worksteps guide on how to use the TypeScript compiler (tsc) to compile TypeScript code:
Lab Worksteps Guide: Using TSC to Compile TypeScript
Objective: Learn how to set up a TypeScript project and use the TypeScript compiler (tsc) to compile TypeScript code into JavaScript.
Prerequisites:
- Node.js installed on your system
- Basic understanding of TypeScript syntax
Step 1: Install TypeScript Globally
1. Open your terminal or command prompt.
2. Run the following command to install TypeScript globally:
```
npm install -g typescript
```
3. Verify the installation by checking the TypeScript version:
```
tsc --version
```
Step 2: Create a New TypeScript Project
1. Create a new directory for your project:
```
mkdir ts-compile-demo
cd ts-compile-demo
```
2. Initialize a new Node.js project:
```
npm init -y
```
3. Install TypeScript as a dev dependency in your project:
```
npm install --save-dev typescript
```
Step 3: Configure TypeScript
1. Create a TypeScript configuration file (tsconfig.json):
```
npx tsc --init
```
2. Open tsconfig.json in your text editor and make sure the following options are set:
```json
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"strict": true
}
}
```
Step 4: Create TypeScript Files
1. Create a src directory:
```
mkdir src
```
2. Create a TypeScript file named app.ts in the src directory:
```
touch src/app.ts
```
3. Add some TypeScript code to app.ts:
```typescript
function greet(name: string): string {
return `Hello, ${name}!`;
}
console.log(greet("TypeScript"));
```
Step 5: Compile TypeScript Using TSC
1. Compile your TypeScript code:
```
npx tsc
```
2. Verify that a dist directory has been created with app.js inside.
Step 6: Run the Compiled JavaScript
1. Run the compiled JavaScript file:
```
node dist/app.js
```
2. You should see the output: "Hello, TypeScript!"
Step 7: Watch Mode
1. Use tsc's watch mode to automatically recompile on file changes:
```
npx tsc --watch
```
2. Make changes to src/app.ts and observe that tsc automatically recompiles the code.
Step 8: Compile Multiple Files
1. Create another TypeScript file named utils.ts in the src directory:
```
touch src/utils.ts
```
2. Add some code to utils.ts:
```typescript
export function capitalize(str: string): string {
return str.charAt(0).toUpperCase() + str.slice(1);
}
```
3. Update app.ts to use the new utility function:
```typescript
import { capitalize } from './utils';
function greet(name: string): string {
return `Hello, ${capitalize(name)}!`;
}
console.log(greet("typescript"));
```
4. Compile the project:
```
npx tsc
```
5. Run the compiled JavaScript:
```
node dist/app.js
```
6. You should see the output: "Hello, Typescript!"
Step 9: Use TSC with npm scripts
1. Open package.json and add the following scripts:
```json
"scripts": {
"build": "tsc",
"start": "node dist/app.js",
"dev": "tsc --watch"
}
```
2. Now you can use npm to run these scripts:
- To compile: `npm run build`
- To run the compiled code: `npm start`
- To start watch mode: `npm run dev`
Conclusion:
You've now learned how to set up a TypeScript project, use tsc to compile TypeScript code, work with multiple files, and integrate tsc into your npm scripts.
This workflow forms the foundation for developing larger TypeScript applications.
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.