Parsing CSV Files in TypeScript with Papa Parse

Parsing CSV (Comma-Separated Values) files is a common task in many web applications. Whether you need to import data into your system, process large datasets, or simply read data from a CSV file, a reliable parser is essential. In this tutorial, we'll explore how to parse CSV files in TypeScript using Papa Parse, a powerful and popular library for CSV parsing.

Contents

• What is Papa Parse?
• Getting Started
• Parsing Data from a CSV File
• Parsing Large CSV Files

What is Papa Parse?

Papa Parse is a fast, developer-friendly CSV parser for both browser and Node.js environments. It supports local and remote file parsing, handles type conversions, processes large files through readable streams, and easily converts CSV data into JSON objects. With available TypeScript typings, it can also return typed data.

Getting Started

First, you'll need to install Papa Parse and its TypeScript types in your project:

npm install papaparse @types/papaparse

Once installed, you can import Papa Parse into your TypeScript file and start parsing CSV data.

Parsing Data from a CSV File

Let's start with a simple example of parsing CSV data from a CSV file:

First Name;Last Name;Age
 
Benny;Neugebauer;37
Lara;Croft;56
Zoe;Schiefer;38

As you can see, the file contains header information, empty lines, and includes both text and numbers. With Papa Parse's configuration options, nothing of this will become a problem.

Example

import fs from 'node:fs';
import Papa from 'papaparse';
 
// Expected Type
type User = {
  Age: number;
  'First Name': string;
  'Last Name': string;
};
 
const file = fs.readFileSync('./users.csv', 'utf8');
 
const parsed = Papa.parse<User>(file, {
  delimiter: ';',
  dynamicTyping: true,
  header: true,
  skipEmptyLines: true,
});
 
const { data } = parsed;
 
console.log(data.length); // 3
console.log(data[0]?.['First Name']); // "Benny"
console.log(data[1]?.['First Name']); // "Lara"
console.log(data[1]?.Age); // 56
console.log(typeof data[1]?.Age); // "number"

Receiving data from the CSV file is straightforward. With the header: true setting, the header names become the property names of the retrieved data. Additionally, the dynamicTyping: true setting ensures that numbers are parsed as the number data type, rather than plain strings. Empty lines in the CSV file are not an issue, and delimiters can be customized.

The best part is that the Papa.parse function is generic and supports type arguments in TypeScript. By passing the User type, we receive typed data in return.

Parsing Large CSV Files

When parsing files, all data is often loaded into memory at once. This method can be inefficient for large files and consume significant memory. To handle large files more efficiently, use readable streams. Papa Parse supports this approach, enabling you to pass a stream with callback functions to process data in batches.

Example

import fs from 'node:fs';
import Papa from 'papaparse';
 
type User = {
  Age: number;
  'First Name': string;
  'Last Name': string;
};
 
const stream = fs.createReadStream('./users.csv', 'utf8');
 
Papa.parse<User>(stream, {
  delimiter: ';',
  dynamicTyping: true,
  header: true,
  skipEmptyLines: true,
  complete: () => {
    console.log('Finished parsing');
  },
  error: (error) => {
    console.error(error);
  },
  step: (results) => {
    console.log(results.data['First Name']);
  },
});