TypeScript and PropTypes

What is TypeScript?

TypeScript adds static type definition to Javascript. Valid Javascript code is valid Typescript code. Typescript has its own type checking errors because Typescript code is transformed into Javascript via the Typescript compiler. Type allows the user to describe the shape of an object and validates the code is working correctly. TypeScript’s type interface allows users to get a lot of power without writing additional code.

For a successful program, we need to be able to work with the simplest units of data. Typescript supports these primitive data types such as: boolean, number, and string.

The simplest example is Boolean.

let isDone: boolean = false;

Numbers are either floats, big integers as bigint, hexadecimal and decimals. Numbers also support binary and octal but these are rarely used.

let decimal: number = 6; 
let hex: number = 0xf00d; 
let binary: number = 0b1010; 
let octal: number = 0o744; 
let big: bigint = 100n;

Strings are indicated with both single and double quotes just like Javascript, template strings are also counted as strings.

Typescript also supports other data types but some of the most used advance data types are: Arrays, Objects and Any.

let list: number[] = [1, 2, 3];
declare function getValue(key: string): any; 
// OK, return value of 'getValue' is not checked 
const str: string = getValue("myString");

In some situations, not all type information is available or its declaration would take an inappropriate amount of effort. This allows some information to opt-out of type checking.

Typescript also works with React, Next and Gatsby. TypeScript compiles React code to type check not emit any Javascript output.

Project setup to start a React/Typescript app is simple by just penning the typescript template to create-react-app my-app — template typescript

npx create-react-app my-app --template typescript

PropTypes exports a range of validators that can be used to make sure the data you receive is valid. In this example, we’re using PropTypes.string. When an invalid value is provided for a prop, a warning will be shown in the JavaScript console.

MyComponent.propTypes = {
  // You can declare that a prop is a specific JS type. By default, these
  // are all optional.
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol, }

Proptypes check similar data types as TypeScript. Arrays, Booleans, Functions, Numbers and Objects, and Strings. PropType is also used as a validator for fragments, a react element or element type.

optionalElement: PropTypes.element,
optionalElementType: PropTypes.elementType,

With PropTypes.element you can specify that a single child is passed to a component. You can also define default values for your props by assigning the special defaultProps property.

I prefer using Proptypes over Typescript because Proptypes is very modular and can be implemented inside of a component.

The modular design of PropType has made it the go to for my type checking needs. At this point in my career I don’t see the need to type the entire program. But I do understand how Typescript can be useful.