DEV Community: AyomikeCharles

Setting up Typescript in React

AyomikeCharles — Sat, 04 Mar 2023 15:27:12 +0000

Introduction
React is a JavaScript library use for building user interface.

TypeScript is a syntactic superset of JavaScript, this means typeScript adds syntax on top of JavaScript.

in this tutorial, I will discuss how to set up typeScript in a react project.

Prerequisite
if you are familiar with React and the basic of typescript, you are good to go.
check out my typescript cheatsheet part 1 writeup here TypeScript Cheatsheet Part 1

Getting started

if you are starting a new react project,

ensure you have node and npm installed in your system.
first of all, open your terminal and create a folder to work in

mkdir Reat-typscript-setup
cd Reat-typscript-setup

next, install your react typeScript project

npx create-react-app name-of-app --template typescript

yarn create react-app name-of-app --template typescript

its as simple as that, your react typeScript project should install and you are good to go.

if you already have an existing react project and you want to add typescript to the project, you simply install typeScript into the project. make sure you are in the project directory in you terminal, then install typeScript as seen below

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

yarn add typescript @types/node @types/react @types/react-dom @types/jest

Finally, rename all javaScript file to be a TypeScript file (e.g. src/App.js to src/App.tsx) and restart your development server!

you now have a fully typeScript project, but some type errors show up in the same console as the build one, correct these errors and continue your development.

Enjoy typing.

TypeScript Cheatsheet Part 1

AyomikeCharles — Fri, 03 Mar 2023 22:43:57 +0000

declaring variable (explicit)

let username: string = 'Janet Austin';

declaring variable (implicit)
declaring variable implicit is just like writing JavaScript

let firstname = 'jane';

in this case (implicit), typescript guess the type of data firstname is. Having TypeScript "guess" the type of a value is called infer.

Error in re assignment

let myName : string = 'janet';
myName = 30;
//Type 'number' is not assignable to type 'string'.ts(2322)

javascript would not give such error if a varable is assign to a value of different type.

TypeScript may not properly infer what the type of a variable is. In such cases, it will set the type to any which will disable type checking.

Special types
there are four special types
1. any
any is a type that disables type checking and effectively allows all types to be used.

let x : any = 'boy';
x = 7

the code above does not have an error even though the variable was first assigned to string and later re assigned to number. this is because the type check has been disable by any.

2. unknown
unknown is a similar, but a safer alternative to any.

let age: unknown = 1;
console.log(age)
//Error:'age' is of type 'unknown'.ts(18046)

const person: unknown = {
    firstname:'sara',
    age:25
}
console.log(person.age)
//Error:'person' is of type 'unknown'.ts(18046)

TypeScript will prevent unknown types from being used, the variable age and the object person, cannot be use in our code because their type is explicit unknown. We have to narrow or case the unknown type before we can use it.

Narrowing

let age: unknown = 1;
if (typeof age === 'number') {
  //we can now use age in our code without getting any error
  console.log(age)  
}

Casing

const person: unknown = {
    firstname:'sara',
    age:25
}
console.log((person as{age:number}))

age in the object person was given a specific type before person can be use

3. Never
never throws an error whenever it is defined.

let i: never = true;
// Error: Type 'boolean' is not assignable to type 'never'.

4. Underfine & Null
undefined and null are types that refer to the JavaScript primitives undefined and null respectively.

let q: undefined = undefined;
let z: null = null;

Array

const array: string[] = [];
array.push('john');
array.push(9)//Error: Argument of type 'number' is not assignable to parameter of type 'string'

const names: number[] = [];
names.push(5);
names.push(3);

The readonly keyword can prevent arrays from being changed.

const firstname: readonly string[] = ["Emeka"];
surname.push("Jack");
//Error: Property 'push' does not exist on type 'readonly string[]'.

TypeScript can infer the type of an array if it has values.

const numbers = [1, 2, 3]; // inferred to type number[]
numbers.push(4);

Tuples
A tuple is a typed array with a pre-defined length and types for each index.

let tuple : [string, boolean, number];
tuple = ['hello world', true, 5];

Always ensure your type correspond to your value, else there will be an error as seen below

let tuple : [string, boolean, number];
tuple = [8, 'hello', false]
//Type 'string' is not assignable to type 'boolean'.ts(2322)
//Type 'boolean' is not assignable to type 'number'.ts(2322)
//Type 'number' is not assignable to type 'string'.ts(2322)

it is advisable to also make your tuple readonly, because more values can be added to it and there is not type safety for these now values.

let tuple : [string, boolean, number];
tuple = ['hello world', true, 5];
tuple.push('hello again')

a new value was push to the tuple as seen above, the new value can be anything since there's no type safety.

const tuple: readonly [number, boolean, string] = [5, true, 'i love typescript'];
tuple.push('hi')*
//Property 'push' does not exist on type 'readonly [number, boolean, string]'.ts(2339)

the above code gives an error because the tuple is now readonly, so we can push a new value to the tuple

Named Tuples
Named tuples allow us to provide context for our values at each index.

const person: [age: number, pet: string] = [29, 'dog'];

Destructuring Tuples
tuples are arrays so we can destructure them

let info:[string, number] = ["hello",7];
const [valueOne,valueTwo] = info;

console.log(valueOne)//hello

typescrip object

const house :{ type:string,year:number} = {
  type:'mansion',
  year:1678
}

TypeScript can infer the types of properties based on their values.

const person = {
  name:'Efe'
}
//person.name is infer to as a string

optional index in object

const car: { type: string, mileage: number } = { 
  type: "Toyota",
};
car.mileage = 2000;
// Error: Property 'mileage' is missing in type '{ type: string; }' but required in type '{ type: string; mileage: number; }'.

to make an optional index, we use the ? sign as seen below

const car: { type: string, mileage?: number } = {
  type: "Toyota"
};
car3.mileage = 2000;

Index signatures can be used for objects without a defined list of properties.

const Age: { [index: string]: number } = {};
Age.Paul = 25;

Age.Karo = "Fifty";
// Error: Type 'string' is not assignable to type 'number'.

Enums
An enum is a special "class" that represents a group of constants (unchangeable variables).
Enums come in two flavors string and numeric. Lets start with numeric.

enum Shapes {
  Square,
  Triangle,
  Rectangle
}

console.log(Shapes.Square)//returns 0
//plus 1 is added to the remaining value
console.log(Shapes.Rectangle)//returns 2

enum Shapes {
  Square = 1,
  Triangle,
  Rectangle
}

console.log(Shapes.Square)//returns 1
//plus 1 is added to the remaining value
console.log(Shapes.Rectangle)//returns 3

each value can also be assign parmanent number or string

enum response {
  success = 200,
  redirect = 300,
  NotFound = 404,
}

enum CardinalDirection {
  North = 'North',
  East = "East",
  South = "South",
  West = "West"
};

Type Aliases and Interfaces
TypeScript allows types to be defined separately from the variables that use them.

Aliases and Interfaces allows types to be shared between different variables and objects easily.

Type Aliases
Type Aliases allow defining types with a custom name (an Alias).
Type Aliases can be used for primitives like string or more complex types such as objects and arrays:

type year = number;
type model = string;
type data = {
    theYear:year,
    theModel:model
}

const realVal : data = {
  theYear:2003,
  theModel:'masion'
}

Interfaces
Interfaces are similar to type aliases, except they only apply to object types.

interface Person {
  age: number,
  surName: string
}

const person: Person = {
  age: 20,
  surName: 'Johnsons'
};

Extending Interfaces
To extend an interface means you are creating a new interface with the same properties as the original.

interface Animal {
  name: string
}

interface Bird extends Animal {
  sound:string
}

const Animal: Bird = {
  name:'Parrot',
  sound:'squawk'
}

Union | (OR)
Union are use on value with more than one types.
Such as when a property would be string or number.
Using the | we are saying our parameter is a string or number

let age:string | number

age can be a string or a number and there will be no type error

Union Type Errors
Note: you need to know what your type is when union types are being used to avoid type errors:

let code: string | number = 7
  console.log(code.toUpperCase()) 
 // Property 'toUpperCase' does not exist on type 'number'

// error: Property 'toUpperCase' does not exist ontype 'string | number'.

In our example we are having an issue invoking toUpperCase() as its a string method and number doesn't have access to it.

these are some basic you need to know to enable you become a type script developer, part 2 loading soon.

Setting up typescript

AyomikeCharles — Mon, 27 Feb 2023 22:04:29 +0000

Introduction
typescript is a syntactic superset of JavaScript, this means typescript adds syntax on top of JavaScript. JavaScript is a loosely type language which can cause confusion as to what type of data are being pass around. typescript solve this problem by adding static typing to JavaScript.

requirement
before learning typescript, you should have some basic understanding of JavaScript, node and npm eco system.

getting started
ensure you have node and npm installed in your system.

first of all, open your terminal and create a folder to work in

mkdir typescript_setup
cd typescript_setup

next, create a package.json file

npm init -y

install typescript as a dev dependency

npm i typescript --save-dev

next, create a tsconfig.json file

npx tsc --init

the tsconfig file is where we configure typescript compiler
your tsconfig file should look like this.

{
  "compilerOptions": {
    /* Visit https://aka.ms/tsconfig to read more about this file */

    /* Projects */
    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */

    /* Language and Environment */
    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
    // "jsx": "preserve",                                /* Specify what JSX code is generated. */
    // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */

    /* Modules */
    "module": "commonjs",                                /* Specify what module code is generated. */
    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
    // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
    // "resolveJsonModule": true,                        /* Enable importing .json files. */
    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */

    /* JavaScript Support */
    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */

    /* Emit */
    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
    // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
    // "removeComments": true,                           /* Disable emitting comments. */
    // "noEmit": true,                                   /* Disable emitting files from a compilation. */
    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */

    /* Interop Constraints */
    // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */

    /* Type Checking */
    "strict": true,                                      /* Enable all strict type-checking options. */
    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
    // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
    // "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
    // "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
    // "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
    // "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
    // "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */

    /* Completeness */
    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
    "skipLibCheck": true,                                 /* Skip type checking all .d.ts files. */

  }
}

if you remove all the comment, the file should look like this

{

  "compilerOptions": {
    "target": "es2016",                                
    "module": "commonjs",                               
    "esModuleInterop": true,                             
    "forceConsistentCasingInFileNames": true,            
    "strict": true,                                     
    "skipLibCheck": true,                             

  }
}

add the following to your tsconfig file
"include": ["src"]
"outDir": "./build"

{

  "include": ["src"],
  "compilerOptions": {
    "target": "es2016",                                
    "module": "commonjs",                               
    "esModuleInterop": true,                             
    "forceConsistentCasingInFileNames": true,            
    "strict": true,                                     
    "skipLibCheck": true,                             
    "outDir": "./build"
  }
}

typescript compiler will transpile the typescript file in the src directory into a JavaScript file in the build directory.

you should create a src folder and inside it, create a tsx file

mkdir src
touch src/my_first_ts.tsx

now you can write your very first typscript code in my_first_ts.tsx.

let firstName :string = "John";
console.log(firstName);

compiling typescript
to compile typescript, you simply run the comman npx tsc in your terminal

npx tsc

compiled code
an index.js file will be created in our build folder. Check out build folder to access the index.js file.

"use strict";
let firstName = "John";
console.log(firstName);

congratulation, you can now set up typescript.