FE Mentoring - Meeting 1 (TypeScript)

meet-1-task-1.ts

interface Product {
  name?: string;
  price: number;
}

// type Product = {
//   name: string;
//   price: number;
// }

type CartItem = {
  product: Product;
  qty: number;
}

type Cart = {
  items: CartItem[];
  // items: Array<CartItem>;
}

function getSubtotal(cartItem: CartItem) : number {
  return cartItem.product.price * cartItem.qty;
}

function getCartTotal(cart: Cart) : number {
  return cart.items
    .map((item) : number => getSubtotal(item)) // Array<number> | number[]
    .reduce((total, price) => total + price, 0);
}

const cart = {
  items: [
    { product: { price: 20 }, qty: 2 },
    { product: { price: 10 }, qty: 1 },
  ]
}

console.log(getCartTotal(cart))

meet-1-task-2.ts

// type CharMap = Record<string, number>;

interface CharMap {
  [key: string]: number;
}

type StringCharMapReducer = (acc: CharMap, char: string) => CharMap;

type MyTuple = [string, string];

const x : MyTuple = ['1', 3];

function createOccurenceMap(str: string) : CharMap {
  const charMap : CharMap = str.split('')
    .reduce((acc: CharMap, char: string) => Object.assign(acc, { [char]: 0 }), {});

  for (let i = 0; i < str.length; i++) {
    const char = str[i]
    charMap[char] += 1;
  }

  return charMap
}

function getOccurence(str: string) : string {
  const map : CharMap = createOccurenceMap(str);

  let newStr = '';
  for (let char in map) {
    newStr += `${char}${map[char]}`;
  }

  return newStr;
}

console.log( getOccurence('occurrences') )

meet-1-task-3.ts

// https://pokeapi.co/

const baseUrl : string = 'https://pokeapi.co/api/v2';

interface Pokemon {
  name: string;
  url: string;
}

interface PokemonDetailResponse {
  id: number;
  height: number;
  name: string;
}

interface PokemontListResponse {
  count: number;
  next: string | null;
  previous: string | null;
  results: Array<Pokemon>;
}

function getPokemonList(offset = 0, limit = 10) : Promise<PokemontListResponse> {
  return fetch(`${baseUrl}/pokemon?offset=${offset}&limit=${limit}`)
    .then(res => res.json())
}

function getPokemonById(id: string) : Promise<PokemonDetailResponse> {
  return fetch(`${baseUrl}/pokemon/${id}`)
    .then(res => res.json())
}

async function renderPokemonList() : Promise<number> {
  // assert itu ketika kalian yakin suatu function yg memiliki
  // lebih dari satu return type, bakal ngereturn salah satu type
  const listEl : Element | null = document.querySelector('.list-container');

  if (listEl === null) return 0;

  let response : PokemontListResponse;
  try {
    response = await getPokemonList();

    response.results.forEach((pokemon : Pokemon) => {
      const itemEl = createPokemonItem(pokemon);
      listEl.appendChild(itemEl);
    });
  } catch (err) {
    return 0;
  }

  return 1;
}

function createPokemonItem(pokemon: Pokemon) : HTMLDivElement {
  const el = document.createElement('div');
  el.innerText = pokemon.name;
  el.setAttribute('class', 'pokemon-item')

  return el;
}

renderPokemonList()
  .then((ret: number) => {
    console.log(ret);
  });