TypeScript Tutorial: Building a Simple Web-Based Stock Ticker

Written by

learnmodernjavascript

in

In today’s fast-paced world, staying informed about the stock market is crucial for investors, traders, and anyone interested in financial news. Wouldn’t it be great to have a real-time, interactive stock ticker right in your web browser? This tutorial will guide you through building a simple yet functional web-based stock ticker using TypeScript. We’ll cover the fundamental concepts, from fetching data from a public API to dynamically updating the display. This project is perfect for beginners and intermediate developers looking to expand their TypeScript skills and learn about working with APIs and DOM manipulation.

Why Build a Stock Ticker?

A stock ticker is more than just a visual element; it’s a window into the financial markets. It allows you to:

  • Monitor Real-Time Data: Keep track of stock prices, changes, and other relevant information as it happens.
  • Gain Practical Experience: Learn how to fetch data from APIs, process it, and update the user interface dynamically.
  • Enhance Your Portfolio: Understand how to build a tool that can help you make informed investment decisions.
  • Improve Your TypeScript Skills: Practice essential TypeScript concepts like types, interfaces, classes, and asynchronous programming.

This project provides a hands-on opportunity to apply your TypeScript knowledge in a real-world scenario. You’ll also learn how to interact with external APIs, which is a fundamental skill in modern web development.

Prerequisites

Before we begin, make sure you have the following:

  • Basic Understanding of HTML, CSS, and JavaScript: Familiarity with these languages is essential for understanding how the front-end components work.
  • Node.js and npm (or yarn) installed: We’ll use these to manage our project dependencies and run our development server.
  • A Code Editor: Visual Studio Code (VS Code) is highly recommended, but you can use any editor you prefer.
  • TypeScript installed globally (optional): You can install it using npm: npm install -g typescript. However, we’ll also set it up locally in our project.

Setting Up the Project

Let’s start by setting up our project directory and installing the necessary dependencies.

1. Create a Project Directory

Open your terminal or command prompt and create a new directory for your project:

mkdir stock-ticker-app
cd stock-ticker-app

2. Initialize npm

Initialize a new npm project in your directory:

npm init -y

This will create a package.json file in your project directory.

3. Install TypeScript and other dependencies

Install TypeScript as a development dependency, along with a bundler like Parcel or Webpack (we’ll use Parcel for simplicity), and a type definition library for working with the DOM:

npm install --save-dev typescript parcel @types/dom

4. Create TypeScript Configuration File

Create a tsconfig.json file in your project root. This file tells the TypeScript compiler how to compile your code. You can generate a basic configuration by running:

npx tsc --init

This will create a tsconfig.json file. You can customize this file to suit your project’s needs. Here’s a basic configuration you can start with:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "dist",
    "sourceMap": true,
    "esModuleInterop": true,
    "strict": true
  },
  "include": ["src/**/*"]
}
  • target: Specifies the JavaScript version to compile to.
  • module: Specifies the module system to use (CommonJS is a good default).
  • outDir: Specifies the output directory for the compiled JavaScript files.
  • sourceMap: Generates source map files for debugging.
  • esModuleInterop: Enables interoperability between CommonJS and ES modules.
  • strict: Enables strict type checking.
  • include: Specifies the files and directories to include in the compilation.

Project Structure

Let’s outline the project structure we’ll use:

stock-ticker-app/
├── src/
│   ├── index.ts
│   ├── styles.css
│   └── index.html
├── dist/
├── package.json
├── tsconfig.json
└── .gitignore
  • src/index.ts: The main TypeScript file where our application logic will reside.
  • src/styles.css: Our stylesheet for styling the stock ticker.
  • src/index.html: The HTML file that will serve as the entry point for our application.
  • dist/: The output directory for the bundled files (automatically created by Parcel).
  • package.json: Contains project metadata and dependencies.
  • tsconfig.json: TypeScript compiler configuration.
  • .gitignore: Specifies intentionally untracked files that Git should ignore.

Writing the TypeScript Code

Now, let’s dive into the core of our application – the TypeScript code. We’ll break down the code into logical sections to make it easier to understand.

1. Fetching Stock Data

We’ll use a public API to fetch stock data. There are several free APIs available; for this tutorial, we will use a hypothetical API endpoint for demonstration. Replace this with a real API endpoint when building your application.

// src/index.ts

interface StockData {
  symbol: string;
  price: number;
  change: number;
  changePercent: number;
}

async function fetchStockData(symbol: string): Promise {
  try {
    const response = await fetch(`https://api.example.com/stock/${symbol}`); // Replace with a real API endpoint
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data: StockData = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching stock data:', error);
    return null;
  }
}

This code does the following:

  • Defines an interface StockData to represent the structure of the stock data we’ll receive from the API.
  • Creates an asynchronous function fetchStockData that takes a stock symbol (e.g., “AAPL”) as input.
  • Uses the fetch API to make a request to the API endpoint.
  • Checks if the response is successful (status code 200-299). If not, it throws an error.
  • Parses the response as JSON and returns the StockData object.
  • Includes error handling to catch and log any errors that occur during the fetch operation.

2. Displaying Stock Data

Next, we’ll create functions to display the fetched stock data in the HTML. We’ll also define some helper functions to format the data for better readability.


// src/index.ts (continued)

function formatPrice(price: number): string {
  return price.toFixed(2);
}

function formatChange(change: number): string {
  return change.toFixed(2);
}

function formatChangePercent(changePercent: number): string {
  return changePercent.toFixed(2) + '%';
}

function updateStockDisplay(data: StockData | null): void {
  const stockElement = document.getElementById('stock-ticker');
  if (!stockElement || !data) {
    return;
  }

  stockElement.innerHTML = `
    <span>${data.symbol}</span>
    <span>${formatPrice(data.price)}</span>
    <span>= 0 ? 'green' : 'red'}">${formatChange(data.change)} (${formatChangePercent(data.changePercent)})</span>
  `;
}

This code:

  • Defines helper functions (formatPrice, formatChange, and formatChangePercent) to format the stock data.
  • Creates a function updateStockDisplay that takes a StockData object (or null if there was an error).
  • Gets the HTML element with the ID “stock-ticker”.
  • If the element exists, updates its innerHTML with the formatted stock data. The change is colored green if positive and red if negative.

3. Main Application Logic

Now, let’s put it all together. We’ll define an asynchronous function that fetches the data and updates the display.


// src/index.ts (continued)

async function main() {
  const stockSymbol = 'AAPL'; // You can change this to any stock symbol
  const data = await fetchStockData(stockSymbol);
  updateStockDisplay(data);

  // Refresh the data every 10 seconds (adjust as needed)
  setInterval(async () => {
    const newData = await fetchStockData(stockSymbol);
    updateStockDisplay(newData);
  }, 10000);
}

main();

This code:

  • Defines an asynchronous function main.
  • Sets the stock symbol to “AAPL” (you can change this).
  • Calls fetchStockData to fetch the data.
  • Calls updateStockDisplay to display the data.
  • Uses setInterval to refresh the data every 10 seconds (10000 milliseconds).
  • Calls main() to start the application.

4. Creating the HTML and CSS

Create an index.html file in your src directory with the following content:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stock Ticker</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        <h1>Stock Ticker</h1>
        <div id="stock-ticker">Loading...</div>
    </div>
    <script src="index.ts"></script>
</body>
</html>

Create a styles.css file in your src directory with some basic styling:


body {
  font-family: sans-serif;
  text-align: center;
}

#stock-ticker {
  font-size: 1.2em;
  margin-top: 20px;
}

Building and Running the Application

Now that we’ve written the code, let’s build and run the application.

1. Build the Project

Open your terminal and run the following command in your project directory:

npx parcel src/index.html

Parcel will bundle your code and create a dist directory containing the compiled JavaScript and other assets.

2. Run the Application

Parcel will also start a development server. You can open your browser and go to the URL provided by Parcel (usually http://localhost:1234) to see your stock ticker in action.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to fix them:

  • Incorrect API Endpoint: Make sure you are using a valid API endpoint. Double-check the URL and any required parameters.
  • CORS Errors: If you encounter CORS (Cross-Origin Resource Sharing) errors, the API you are trying to use may not allow requests from your domain. You might need to use a proxy server or find an API that supports CORS.
  • Type Errors: TypeScript will help you catch type errors during development. Carefully review the error messages and ensure your types are correct.
  • DOM Manipulation Errors: Make sure you’re selecting the correct HTML elements and that your updates are being applied correctly. Use the browser’s developer tools to inspect the DOM.
  • Asynchronous Issues: When working with asynchronous operations (like fetch), make sure you’re handling the results correctly and that your code is not blocking the main thread.

Enhancements and Next Steps

Here are some ways you can enhance your stock ticker:

  • Add Error Handling: Implement more robust error handling to gracefully handle API errors or network issues.
  • Implement User Input: Allow users to enter a stock symbol and see its data.
  • Add More Data: Display more information about the stock, such as the open, high, low, and volume.
  • Implement a Chart: Use a charting library (like Chart.js or D3.js) to visualize the stock price over time.
  • Add Data Persistence: Use local storage to save user preferences, such as the list of stocks to track.
  • Implement a Real API: Replace the placeholder API endpoint with a real-world stock API. Some popular choices include IEX Cloud, Alpha Vantage, and Yahoo Finance API. Be aware that some APIs require an API key.

Summary / Key Takeaways

In this tutorial, you’ve learned how to build a simple web-based stock ticker using TypeScript. You’ve explored the basics of fetching data from an API, displaying it on a webpage, and updating it dynamically. You’ve also learned about essential TypeScript concepts like interfaces, types, and asynchronous programming. This project is a great starting point for exploring more advanced web development concepts and building more complex applications. You can extend this project by adding more features like user input, charting, and more detailed stock information. This tutorial provided a solid foundation, and the possibilities for expansion are endless, encouraging you to continue learning and experimenting with TypeScript and web development.

FAQ

Q: Where can I find a free stock API?

A: Several free stock APIs are available, such as IEX Cloud (with limitations), Alpha Vantage (with limitations), and some APIs that offer free tiers. Be sure to check the API’s terms of service and any usage limits.

Q: How do I handle CORS errors?

A: CORS (Cross-Origin Resource Sharing) errors occur when your web application tries to access resources from a different domain. You can often resolve this by using a proxy server, enabling CORS on the API server (if you control it), or finding an API that supports CORS.

Q: How do I debug TypeScript code?

A: You can debug TypeScript code using your browser’s developer tools. Make sure your tsconfig.json file has sourceMap: true. Then, you can set breakpoints in your TypeScript files and step through your code. You can also use console.log() statements for debugging.

Q: Can I use a different bundler instead of Parcel?

A: Yes, you can use other bundlers like Webpack or Rollup. You’ll need to configure them to work with TypeScript and handle your project’s assets.

By building this stock ticker, you’ve taken a significant step forward in your TypeScript journey. The skills you’ve acquired will serve you well as you continue to explore the world of web development. Remember to practice regularly, experiment with different features, and never stop learning. The world of programming is constantly evolving, and the more you practice, the more confident and capable you will become. Keep building, keep learning, and enjoy the process!

More posts