Introducing TypeScript

This chapter assumes that you have prior experience with JavaScript and are interested in improving the quality of your code by learning TypeScript. TypeScript is a typed superset of JavaScript that compiles to JavaScript. In other words, TypeScript is essentially JavaScript with some additional features.

Designed by Anders Hejlsberg, the creator of C# at Microsoft, TypeScript is an open-source language that enhances the capabilities of JavaScript. By introducing static typing and other advanced features, TypeScript helps developers write more reliable and maintainable code.

In this chapter, we will explore the features of TypeScript and how to convert existing JavaScript code to TypeScript. By the end of this chapter, you will have a solid understanding of TypeScript’s benefits and how to leverage them to create more robust and scalable applications.

In this chapter, we will cover the following topics:

• TypeScript’s features
• Convert JavaScript code into TypeScript
• Types
• Interfaces
• Extending interfaces and types
• Implementing interfaces and types
• Merging interfaces
• Enums
• Namespaces
• Template literal types
• TypeScript configuration file

Technical requirements

To work through the contents of this chapter, you will need the following:

• Node.js 19+
• Visual Studio Code

TypeScript’s features

TypeScript, a popular open-source programming language developed and maintained by Microsoft, is rapidly gaining popularity among developers worldwide. It was introduced as a superset of JavaScript, aiming to facilitate larger-scale applications while enhancing code quality and maintainability. TypeScript leverages static typing and compiles to clean, simple JavaScript code, ensuring compatibility with existing JavaScript environments.

This robust language brings a host of powerful features that set it apart and make it an appealing choice for many programmers. Notably, TypeScript infuses strong typing into JavaScript, providing better error checking and reducing runtime bugs. Moreover, it fully supports object-oriented programming with advanced features like classes, interfaces, and inheritance.

Since any valid JavaScript code is also TypeScript, transitioning from JavaScript to TypeScript can be done gradually, with developers introducing types to their codebase progressively. This makes TypeScript a flexible, scalable solution for both small and large-scale projects.

In this section, we will summarize the essential features of TypeScript that you should take advantage of:

• TypeScript is JavaScript: TypeScript is a superset of JavaScript, which means that any JavaScript code you write will work with TypeScript. If you already know how to use JavaScript, you have all the knowledge you need to use TypeScript. You just need to learn how to add types to your code. All TypeScript code is transformed into JavaScript in the end.
• JavaScript is TypeScript: This just means that you can rename any valid .js file with the .ts extension, and it will work.
• Error checking: TypeScript compiles the code and checks for errors, which helps identify issues before running the code.
• Strong typing: By default, JavaScript is not strongly typed. With TypeScript, you can add types to all your variables and functions, and even specify the return value types.
• Object-oriented programming supported: TypeScript supports advanced concepts such as classes, interfaces, inheritance, and more. This allows for better organization of code and enhances its maintainability.

After having discussed the key features of TypeScript, let us delve into a practical demonstration of converting JavaScript code into TypeScript.

Converting JavaScript code into TypeScript

In this section, we will see how to transform some JavaScript code into TypeScript.

Let’s suppose we have to check whether a word is a palindrome. The JavaScript code for this algorithm will be as follows:

function isPalindrome(word) {
  const lowerCaseWord = word.toLowerCase()
  const reversedWord = lowerCaseWord.split('').reverse().join('')
  return lowerCaseWord === reversedWord
}

You can name this file palindrome.ts.

As you can see, we are receiving a string variable (word), and we are returning a boolean value. So, how will this be translated into TypeScript?

function isPalindrome(word: string): boolean {
  const lowerCaseWord = word.toLowerCase()
  const reversedWord = lowerCaseWord.split('').reverse().join('')
  return lowerCaseWord === reversedWord
}

You’re probably thinking, “Great, I just specified the string type as word and the boolean type to the function returned value, but now what?”

If you try to run the function with some value that is different from string, you will get a TypeScript error:

console.log(isPalindrome('Level')) // true
console.log(isPalindrome('Anna')) // true
console.log(isPalindrome('Carlos')) // false
console.log(isPalindrome(101)) // TS Error
console.log(isPalindrome(true)) // TS Error
console.log(isPalindrome(false)) // TS Error

So, if you try to pass a number to the function, you will get the following error:

Figure 2.1: Type number is not assignable to parameter of type string

That’s why TypeScript is very useful, because it will force you to be stricter and more explicit with your code.

Types

In the last example, we saw how to specify some primitive types for our function parameter and returned value, but you’re probably wondering how you can describe an object or array with more details. Types can help us to describe our objects or arrays in a better way. For example, let’s suppose you want to describe a User type to save the information into the database:

type User = {
  username: string
  email: string
  name: string
  age: number
  website: string
  active: boolean
}
const user: User = {
  username: 'czantany',
  email: '[e-mail]',
  name: 'Carlos Santana',
  age: 33,
  website: 'http://www.js.education',
  active: true
}
// Let's suppose you will insert this data using Sequelize...
models.User.create({ ...user }}

We get the following error if we forget to add one of the nodes or put an invalid value in one of them:

Figure 2.2: Age is missing in type User but is required

If you need optional nodes, you can always put a ? next to the age of the node, as shown in the following code block:

type User = {
  username: string
  email: string
  name: string
  age?: number
  website: string
  active: boolean
}

You can name type as you want, but a good practice to follow is to add a prefix of T. For example, the User type will become TUser. In this way, you can quickly recognize that it is type and you don’t get confused thinking it is a class or a React component.

Interfaces

Interfaces are very similar to types and sometimes developers don’t know the differences between them. Interfaces can be used to describe the shape of an object or function signature just like types, but the syntax is different:

interface User {
  username: string
  email: string
  name: string
  age?: number
  website: string
  active: boolean
}

You can name an interface as you want, but a good practice to follow is to add a prefix of I. For example, the User interface will become IUser. In this way, you can quickly recognize that it is an interface, and you don’t get confused thinking it is a class or a React component.

An interface can also be extended, implemented, and merged.

Extending interfaces and types

An interface or type can also be extended, but again, the syntax will differ as shown in the following code block:

// Extending an interface
interface IWork {
  company: string
  position: string
}
interface IPerson extends IWork {
  name: string
  age: number
}
// Extending a type
type TWork = {
  company: string
  position: string
}
type TPerson = TWork & {
  name: string
  age: number
}
// Extending an interface into a type
interface IWork {
  company: string
  position: string
}
type TPerson = IWork & {
  name: string
  age: number
}

As you can see, by using the & character, you can extend a type, while you extend an interface using the extends keyword.

Understanding the extension of interfaces and types paves the way for us to delve into their implementation. Let us transition to illustrating how classes in TypeScript can implement these interfaces and types while keeping in mind the inherent constraints when dealing with union types.

Implementing interfaces and types

A class can implement an interface or type alias in the exact same way. But it cannot implement (or extend) a type alias that names a union type. For example:

// Implementing an interface
interface IWork {
  company: string
  position: string
}
class Person implements IWork {
  name: 'Carlos'
  age: 35
}
// Implementing a type
type TWork = {
  company: string
  position: string
}
class Person2 implements TWork {
  name: 'Cristina'
  age: 34
}
// You can't implement a union type
type TWork2 = {   company: string;   position: string } | {   name: string;   age: number } 
class Person3 implements TWork2 {
  company: 'Google'
  position: 'Senior Software Engineer'
}

If you write the preceding code, you will get the following error in your editor:

Figure 2.3: A class can only implement an object type or intersection of object types with statically known members

As you can see, you are not able to implement a union type.

Merging interfaces

Unlike a type, an interface can be defined multiple times and will be treated as a single interface (all declarations will be merged), as shown in the following code block:

interface IUser {
  username: string
  email: string
  name: string
  age?: number
  website: string
  active: boolean
}
interface IUser {
  country: string
}
const user: IUser = {
  username: 'czantany',
  email: '[e-mail]',
  name: 'Carlos Santana',
  country: 'Mexico',
  age: 35,
  website: 'http://www.js.education',
  active: true
}

This is very useful when you need to extend your interfaces in different scenarios by just redefining the same interface.

Enums

Enums are one of the few features TypeScript has that is not a type-level extension of JavaScript. Enums permit a developer to define a set of named constants. Using enums can make it easier to document intent or create a set of distinct cases.

Enums can store numeric or string values and are normally used to provide predefined values. Personally, I like to use them to define a palette of colors in a theming system, as follows:

Figure 2.4: Enums used for color palette

Moving on to another useful feature of TypeScript, let’s explore namespaces.

Namespaces

You may have heard of namespaces in other programming languages, such as Java or C++. In JavaScript, namespaces are simply named objects in the global scope. They serve as a region in which variables, functions, interfaces, or classes are organized and grouped together within a local scope to avoid naming conflicts between components in the global scope.

While modules are also used for code organization, namespaces are more straightforward to implement for simple use cases. However, modules offer additional benefits such as code isolation, bundling support, re-exporting components, and renaming components that namespaces do not provide.

In my own projects, I find namespaces useful for grouping styles when using styled-components, for instance:

import styled from 'styled-components'
export namespace CSS {
  export const InputWrapper = styled.div`
    padding: 10px;
    margin: 0;
    background: white;
    width: 250px;
  `
  export const InputBase = styled.input`
    width: 100%;
    background: transparent;
    border: none;
    font-size: 14px;
  `
}

Then when I need to use it, I consume it like this:

import React, { ComponentPropsWithoutRef, FC } from 'react'
import { CSS } from './Input.styled'
export interface Props extends ComponentPropsWithoutRef<'input'> {
  error?: boolean
}
const Input: FC<Props> = ({
  type = 'text',
  error = false,
  value = '',
  disabled = false,
  ...restProps
}) => (
    <CSS.InputWrapper style={error ? { border: '1px solid red' } : {}}>
      <CSS.InputBase type={type} value={value} disabled={disabled} {...restProps} />
    </CSS.InputWrapper>
)

This is very useful because I don’t need to worry about exporting multiple styled components. I just export the CSS namespace and I can use all the styled components defined inside that namespace.

Template literals

In TypeScript, template literals are based on string literal types and can be expanded into multiple strings using unions. These types are useful for defining a theme name, for instance:

type Theme = 'light' | 'dark' 

Theme is a union type that can only be assigned one of the two string literal types: 'light' or 'dark'. This provides type safety and prevents runtime errors caused by passing an invalid value as the theme name.

Using this approach, you can define a set of possible values for a variable, argument, or parameter and ensure that only valid values are used at compile time. This makes your code more reliable and easier to maintain.

TypeScript configuration file

The presence of a tsconfig.json file in a directory indicates that the directory is the root of a TypeScript project. The tsconfig.json file specifies the root files and the compiler options required to compile the project.

You can check all the compiler options at the official TypeScript site: https://www.typescriptlang.org/tsconfig.

This is the tsconfig.json file that I normally use in my projects. I’ve always separated them into two files: the tsconfig.common.json file will contain all the shared compiler options, and the tsconfig.json file will extend the tsconfig.common.json file and add some specific options for that project. This is very useful when you work with MonoRepos.

My tsconfig.common.json file looks like this:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "alwaysStrict": true,
    "declaration": true,
    "declarationMap": true,
    "downlevelIteration": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "jsx": "react-jsx",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "module": "commonjs",
    "moduleResolution": "node",
    "noEmit": false,
    "noFallthroughCasesInSwitch": false,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "outDir": "dist",
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "strictFunctionTypes": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": false,
    "target": "ESNext"
  },
  "exclude": ["node_modules", "dist", "coverage", ".vscode", "**/__tests__/*"]
}

And my tsconfig.json looks like this:

{
  "extends": "./tsconfig.common.json",
  "compilerOptions": {
    "baseUrl": "./packages",
    "paths": {
      "@web-creator/*": ["*/src"]
    }
  }
}

In Chapter 14, I will explain how to create a MonoRepos architecture.

Summary

In this chapter, we covered the basics of TypeScript, including creating basic types and interfaces, extending them, and using enums, namespaces, and template literals. We also explored setting up our first TypeScript configuration file (tsconfig.json) and splitting it into two parts – one for sharing and the other for extending tsconfig.common.json. This approach is particularly useful when working with MonoRepos.

In the next chapter, we will delve into using JSX/TSX code and explore various configurations that can be applied to improve your code style. You will learn how to leverage the power of TypeScript to create efficient and maintainable React applications.