Building a TypeScript and Node.js App
Building number-app#
We'll start by setting up the Express server in app.ts:
import express from 'express';
import path from 'path';
const app = express();
const port = 3000;
app.use('/dist', express.static('dist'));
app.listen(port, () => console.log(`server started at localhost:${port}`));
The html file#
Our server doesn't do much at the moment: we've used express.static() to serve static files in the /dist folder, but that folder is currently empty. Let's create an index.html file so the user at least has a place to land when they land on the home page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Express App</title>
</head>
<body>
<h1>Num Info</h1>
</body>
</html>
Serving the HTML#
To serve that file, we set up a route for the root page and delivery that file:
import path from 'path';
app.get('/', (_, res) => {
res.sendFile(path.join(__dirname, './index.html'));
});
Trying it out#
To test that everything is working as expected, we can start our server by running the following command:
npm start
Navigating to localhost:3000 will take us to a page containing a heading "Num Info". Once completed, our page will show the following info about a given number:
Number of digits
Is number even?
Is number prime?
Building NumInfo#
We can express that info in a NumInfo type under the file types/NumInfo.ts:
type NumInfo = {
num: number,
numDigits: number,
isEven: boolean,
isPrime: boolean,
};
export default NumInfo;
We'll use our new type to create a getNumInfo() function in our app.ts file, but before we can do so let's implement an isPrime() function:
function isPrime(num: number): boolean {
if (num <= 1) {
return false;
}
for (let i = 2; i < num; i++) {
if (num % i === 0) {
return false;
}
}
return true;
}
And with that function we can implement getNumInfo() as follows:
function getNumInfo(num: number): NumInfo {
console.log('getting numinfo for: ', num);
return { num,numDigits: String(Math.abs(num)).length,
isEven: num % 2 === 0,
isPrime: isPrime(num),
}
}
Adding a new route#
Now to set up a route that will return the num info when the user hits that route. We'll call this route /numInfo/:num and capture the num in a num parameter which can be captured and used as follows:
app.get('/numInfo/:num', (req, res) => {
const num = Number(req.params.num);
res.json(getNumInfo(num));
});
Before passing the number to getNumInfo(), we must convert it from a string to a number, so we use the Number() function to do so. To test our new route, start the server again by running npm start and navigate to localhost:3000/numInfo/13 on your browser. You should see the following JSON:
{}Now that we've completed the backend of our app, we can move on to the client. The idea for the client is that we'll set up a form that allows the user to input a number, and a submit button that will make an API test to our server to get the num info that will then be displayed on the screen.
This page is a preview of Beginners Guide to TypeScript