Spread Operator and Immutables

Challenge.ts

/* MERGING */
interface Foo{
  kungfoo: string
}

interface ExtraFooy extends Foo{
  tofu: string;
}

interface Bar{
  cliffBar: string;
}

type FooyBar = ExtraFooy & Bar;

let fu: Foo = {
  kungfoo: 'pow!'
}

//use merge syntax to create an instance of Extra Fooy.  Can specify extra fooys props inline
let extraFooy: ExtraFooy = ; //use spread operator

//use merge syntax to create an instance of Foobar
let fooybar: FooyBar = ; //use spread operator


/* WORKING WITH IMMUTABLES */


//= Object mutations
interface Immutable {
  readonly name: string;
  readonly doesntChange: ImmutableChild;
  readonly changes: ImmutableChild;
}

interface ImmutableChild{
  readonly name: string;
}

let immut: Immutable = {
  name: 'abc',
  doesntChange: {
    name: 'dont need to change this'
  },
  changes: {
    name: 'change-this-abc'
  }
};


//update immut:
// 1: Set name: '123
// 2: Set "changes.name" to 'changed-this-123': 
let updatedImmut = ;//use spread operator here

console.log(immut !== updatedImmut ? 'pass' : 'fail')
console.log(immut.changes !== updatedImmut.changes ? 'pass' : 'fail')
console.log(immut.doesntChange == updatedImmut.doesntChange ? 'pass' : 'fail')

//= Array mutations
let arr1 = [1, 2, 3]

//add '4' to end 
// let arr2 = ;
console.log(arr1 !== arr2 ? 'pass' : 'fail')
console.log(arr2[3] == 4 ? 'pass' : 'fail')

//remove second element
// let arr3
console.log(arr2 !== arr3 ? 'pass' : 'fail')
console.log(arr3.length === 3 ? 'pass' : 'fail')

//insert 2.5 into second position
// let arr4
console.log(arr3 !== arr4 ? 'pass' : 'fail')
console.log(arr4[1] === 2.5 ? 'pass' : 'fail')

let letterArr = ['a', 'b', 'c']
// concat letterArr to end of arr4
//let arr5
console.log(arr4 !== arr5 ? 'pass' : 'fail')


//= Dictionary mutations

let dictionary = {
  "one": '1',
  "two": '2',
  "three": '3'
}

// update the value of "two" to equal "too"
// let updatedDictionary = 
// console.log(dictionary !== updatedDictionary ? 'pass' : 'fail')
// console.log(updatedDictionary['two'] == 'too' ? 'pass' : 'fail')

/* DESTRUCTURING */

interface IProps {
  title: string,
  style: string,
  className: string,
  removeMe: string;
  removeMe2: string;
}

let prop: IProps = {
  title: 'abc',
  style: 'green',
  className: 'error',
  removeMe: 'get me outta here',
  removeMe2: 'and me'
}

//use destructing to create a new object without removeMe & removeMe2
 

Solution.ts

/* MERGING */
interface Foo{
  kungfoo: string
}

interface ExtraFooy extends Foo{
  tofu: string;
}

interface Bar{
  cliffBar: string;
}

type FooyBar = ExtraFooy & Bar;

let fu: Foo = {
  kungfoo: 'pow!'
}

//use merge syntax to create an instance of Extra Fooy.  Can specify extra fooys props inline
let extraFooy: ExtraFooy = {...fu, ...{tofu: 'eehhh'}}

//use merge syntax to create an instance of Foobar
let fooybar: FooyBar = { ...extraFooy, ...{ cliffBar: 'peanuts' } };


/* WORKING WITH IMMUTABLES */


//= Object mutations
interface Immutable {
  readonly name: string;
  readonly doesntChange: ImmutableChild;
  readonly changes: ImmutableChild;
}

interface ImmutableChild{
  readonly name: string;
}

let immut: Immutable = {
  name: 'abc',
  doesntChange: {
    name: 'dont need to change this'
  },
  changes: {
    name: 'child-abc'
  }
};


//update name & "changes" name.  replace abc with 123
let updatedImmut = { ...immut, ...{name: '123', changes: {...immut.changes, ...{name:'child-123'}}} }

console.log(immut !== updatedImmut ? 'pass' : 'fail')
console.log(immut.changes !== updatedImmut.changes ? 'pass' : 'fail')
console.log(immut.doesntChange == updatedImmut.doesntChange ? 'pass' : 'fail')

//= Array mutations
let arr1 = [1, 2, 3]

//add '4' to end 
// let arr2 = ;
console.log(arr1 !== arr2 ? 'pass' : 'fail')
console.log(arr2[3] == 4 ? 'pass' : 'fail')

//remove second element
// let arr3
console.log(arr2 !== arr3 ? 'pass' : 'fail')
console.log(arr3.length === 3 ? 'pass' : 'fail')

//insert 2.5 into second position
// let arr4
console.log(arr3 !== arr4 ? 'pass' : 'fail')
console.log(arr4[1] === 2.5 ? 'pass' : 'fail')

let letterArr = ['a', 'b', 'c']
// concat letterArr to end of arr4
//let arr5
console.log(arr4 !== arr5 ? 'pass' : 'fail')


//= Dictionary mutations

let dictionary = {
  "one": '1',
  "two": '2',
  "three": '3'
}

// update the value of "two" to equal "too"
// let updatedDictionary = 
// console.log(dictionary !== updatedDictionary ? 'pass' : 'fail')
// console.log(updatedDictionary['two'] == 'too' ? 'pass' : 'fail')

/* DESTRUCTURING */

interface IProps {
  title: string,
  style: string,
  className: string,
  removeMe: string;
  removeMe2: string;
}

let prop: IProps = {
  title: 'abc',
  style: 'green',
  className: 'error',
  removeMe: 'get me outta here',
  removeMe2: 'and me'
}

//use destructing to get removeMe and removeMe2 out of prop
const { removeMe, removeMe2, ...rest } = prop;