Check Everyday

Basics

Types

unknown & any

let varUnknown: unknown;
let varAny: any;

string, boolean, number, array

let varString: string = "Hello World";
let varBoolean: boolean = true;
let varNumber: number = 10;
let varArray: string[] = ['one', 'two', 'three'];

object

const object: {[key: string]: any} = {}
object.key = "value";

object (+optional, function)

let varObject: {
  one: string;
  two?: boolean; // optional
  callback(): void;
} = {
  one: 'one',
  callback: () => { }
};

object (+optional) + interface

interface IVarObject {
  one: string;
  two?: boolean; // optional
}

const varObject: IVarObject = {
  one: 'one'
};

Functions

return void

function consoleLogMessage(message: any): void {
  console.log(message);
}

consoleLogMessage('Message'); // Message

return not void

function add(x: number, y: number): number {
  return x + y;
}

add(1, 2); // 3

param as object

function addFromObject({ x, y }: { x: number; y: number }): number {
  return x + y;
}

addFromObject({ x: 1, y: 2 }); // 3

Advanced

Types

null & undefined

const varNull: null = null;     // useless
const varUndefined: undefined;  // useless

unknown & any

const varArray: unknown[] = ['one', true, 3];
const varArray: any[] = ['one', true, 3];

Functions

function is type object

const varFunction: {} = () => {};

function with array param

const varFunctionArray = function (varArray: string[]) {
  return varArray;
}

varFunctionArray(['one', 'two', 'three']);

function with object param

const varFunctionObject = function (param1: string, param2: {}) { }

varFunctionObject('one', { one: 'one', two: true, three: 3 });

Classes

with interface

interface AClass {
  one: string;
  two: boolean;
  three?: number;
}

class aClass implements AClass {
  public one: string = 'one';
  public two: boolean = true;
  private four: string = 'four';
}

extends and implements

interface IOldClass {
  zero: number;
}

interface INewClass extends IOldClass {
  one: string;
  two: boolean;
  three?: number;
}

class NewClass implements INewClass {
  zero: number = 0;
  one: string = 'one';
  two: boolean = true;
}

hybrid

interface IHybridClass {
  one: string;
  two: {
    twoOne: boolean;
  };
  three(threeOne: string, threeTwo: boolean): number;
  four({ fourOne, fourTwo }: { fourOne: string, fourTwo: boolean }): number;
}

class HybridClass implements IHybridClass {
  one = 'one';

  two = {
    twoOne: true
  };

  three = (threeOne: string, threeTwo: boolean) => {
    return 3;
  };

  testingThree() {
    let three = this.three('one', true);
  }

  four = function ({
    fourOne,
    fourTwo
  }: { fourOne: string, fourTwo: boolean }) {
    console.log(fourOne, fourTwo);
    return 4;
  }

  testingFour() {
    let four = this.four({ fourOne: 'four', fourTwo: true });
  }
}

Generics

simple

function identity<T>(arg: T): T {
  return arg;
}

identity(10);
identity<number>(10);
identity('ten');
identity<string>('ten');

extends

interface ILoggingIdentity2 {
  length: number;
}

function loggingIdentity2<T extends ILoggingIdentity2>(arg: T): T {
  console.log(arg.length);
  return arg;
}

loggingIdentity2({ length: 1 });

Enums

enum TodoState {
  New = 1,
  Active,
  Complete,
  Deleted
}

Data Types

Literal Union'one' | 'two'
Type Unionboolean | string
anyavoid it
unknownavoid it
neverwhen a function returns an error
Omit

Opposite of Pick

interface Todo {
  one: string;
  two: string;
}

const todo: Omit<Todo, "one"> = {
  two: "Two"
}
Pick

Opposite of Omit

interface Todo {
  one: string;
  two: string;
}

const todo: Omit<Todo, "one"> = {
  one: "One"
}
Partial

All properties are optional

interface Todo {
  one: string;
  two: string;
}

const todo: Partial<Todo> = {}

Applied

React Component

interface IButton {
  text: string;
  color?: string;
  size?: number;
}

function Button({ text, color, size }: IButton) {
  // variables
  // logic
  // return <button>{text}</button>;
}

export default Button;

<Button text="Click Here" />
<Button text="Click Here" color="purple" size={10} />