Converting a React Codebase to Typescript. Part 1: Getting it to compile


Plugging in the Typescript compiler

npm install -g create-react-app # Or use yarn create-react-app flatris --scripts-version=react-scripts-ts
Bugfixing is often like this, but with more tears.

Error Whack-A-Mole

Can’t find index.tsx

Error: Can’t find index.tsx

React has no default export

Error: (1,8): Module flatris/node_modules/@types/react/index"' has no default export.
import React from "react";
import React from ‘react’
import * as React from ‘react’

Could not find declaration file for module

Error: (3,26): Could not find a declaration file for module ‘react-redux’. ’flatris/node_modules/react-redux/lib/index.js’ implicitly has an ‘any’ type.Try `npm install @types/react-redux` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-redux';`
"noImplicitAny": true,
"strictNullChecks": true
"defaultSeverity": "warning",

Type errors

Error: /flatris/src/index.tsx (24,76): Property 'game' does not exist on type '{}'.
localStorage.setItem('flatrisState', JSON.stringify(store.getState().game);
localStorage.setItem('flatrisState', JSON.stringify((store.getState() as any).game));

React components contain invalid characters

Error: InvalidCharacterError: String contains an invalid character
Warning: </static/media/App.e52f775a.jsx /> is using uppercase HTML. Always use lowercase HTML tags in React.
Dante never got to write about it, but the tenth circle of hell primarily consists of monkey-patching minified javascript.
"prepare": "patch-package"
yarn add --dev patch-package postinstall-prepare
test: /\.(ts|tsx)$/,
include: paths.appSrc,
use: [
loader: require.resolve('ts-loader'),
options: {
// disable type checker - we will use it in fork plugin
transpileOnly: true,
test: /\.(ts|tsx|js|jsx)$/,
patch-package react-scripts-ts
Hallelujah! No more errors!




Software Developer at SCADA Minds

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to Use Google Cloud Firestore With Glitch

React Native Deep Link

Phase 4…Fetch and Click

Want To Build Faster Web Apps? Use JavaScript Memoization

time-lapse photo of headlights and taillights on a highway at night

React Redux Tutorial | Create Youtube Player -3

Android Skeleton Content Loader 💀

Next.js: Converting JS components to TSX components

Real time Chat application with in NodeJS

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Gustav Wengel

Gustav Wengel

Software Developer at SCADA Minds

More from Medium

JavaScript Utility Methods in Detail

JavaScript syntax for CRUD operations

Special Concepts about JavaScript & MongoDB

Which Frontend Javascript Framework/library is the Best?