How to Compile TypeScript Code With tsc
TypeScript is a development tool geared towards making building JavaScript applications more robust. In an application's deployed state (browser or server), TypeScript must be compiled to valid JavaScript. In this lesson, we'll see how the TypeScript compiler provides us with a command to compile and produce JavaScript code from TypeScript.
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL with a single-time purchase.
[00:00 - 00:15] Though our application is now suited for TypeScript development, to have our code be ready for production, it first must be built as a JavaScript project. This is perfectly okay because TypeScript was only created to help developers during the development phase.
[00:16 - 00:25] Once the app is in production, known bugs should have all been fixed. To achieve this, we're going to create a new script in our package JSON file.
[00:26 - 00:38] And this script is going to be the build script. Build is going to be responsible in building, or in other words, compiling the TypeScript code in our project to validate JavaScript.
[00:39 - 00:51] And we can do so by using the TSC command that TypeScript provides. TSC takes an option known as -p, which is shorthand for --project.
[00:52 - 01:11] This -p option essentially allows us to compile the TypeScript code in a project that contains a TS config JSON file. The project option requires an argument of the project directory with which we can simply specify in our case, .slash.
[01:12 - 01:39] This is essentially stating that the build command should help compile all the TypeScript code in the TypeScript project in which this package JSON file currently lives in. We'll save the file, and now we can actually head to the terminal, exit the server, and attempt to build our actual TypeScript project by running the newly created build script.
[01:40 - 01:54] And pm run build. When complete, we can now see a build folder has been introduced in the root of the server project.
[01:55 - 02:18] This build folder contains the JavaScript code for our index.js file that has essentially been compiled from the TypeScript index.ts file. If we really wanted to, we can actually run the JavaScript from this file directly within the build folder, node build index.js.
[02:19 - 02:33] And as you can see, we can see the console log message that has been generated from our code. So now this is essentially the bundle or the build that we'll use during deployment, because once again, TypeScript is a development dependency.
[02:34 - 02:58] The moment we're ready to actually complete our app and have our app be deployed, we'll need to build our application, retrieve the compiled JavaScript code, and then finally place that bundle into any deployment process that we want. Other than that, we'll very hardly ever find the need to ever dive into the build code to see the generated compiled JavaScript code.
[02:59 - 03:06] [ Silence ]