타입스크립트 복습하기

//리턴 타입을 지정해주지 않아도 타입스크립트가 추론해준다
function add (a:number, b:number){
  return console.log(a+b);
}

//같은 로직의 arrow 
const addArrow = (a:number, b:number) =>{
  return console.log(a+b);
}
addArrow(1,3);

//numberType 이라는 타입을 만들어 지정
//이렇게 쓰면 다른데에서도 쉽게쓸수있지않을까 ?
type numberType = (a:number, b:number) => number;
//인자 이름은 어차피 그냥 이름이라 바뀌어도 상관없다.
const useAdd : numberType = ( a, b ) =>{return (a+b) };
const useMinus : numberType = ( c, d ) =>{return (c-d)};

//pick. omit 알아보기 

//OverLoading : 하나의 함수가 복수의 콜 시그니쳐를 가졌을때 발생

//타입 지정에서 콜 시그니쳐가 두개임
type AddOverLoading = {
  (a: number, b: number) : number,
  (a: number, b: number, c:number) :number
}

//c 를 선택사항 (?) 으로 두고 그에 대한 로직을 if 문으로 짜줌
const addOver : AddOverLoading = (a, b, c?:number)=>{
  if(c) return a+b+c;
  return a+b;
}

//다형성(영어는 알아서찾아보기)

//제네릭 쓸때 보통쓰는 알파벳
/**
 * T : type : 그냥타입 (...)
 * V : value : 객체의 값 타입
 * K : key : 객체의 키값
 * E : enum (요소) : 열거형의 각 항목을 나타내는데 사용
 * 
 */

type SuperPrint = {
  //타입을 내가 일일히 경우의 수를 따지지않고 지정하는게아니고, TS의 타입 추론을 이용해서 사용한다.
  //<> : 제네릭 안에 쓰고 싶은 이름을 넣어서 사용한다 (통상적으로 T나 V를 쓴다)
  // (arr : number[]) : void,
  // (arr : string[]) : void,
  // (arr : boolean[]) : void, .... 경우의 수를 모두 생각해야하지만 ===
  //밑의 한줄로 끝낼수있다
  <T> (arr:T[]) :void,
}


const superPrint:SuperPrint = (arr) =>{
  arr.forEach(index => console.log(index));
}

superPrint([1,2,3]); //number 여도 가능
superPrint(["1","2","3"]); //string 이여도 가능
superPrint([true, false]); //boolean 이여도 가능
superPrint([]);//빈 배열이여도 가능 ^^ (never로 지정된다)

//하여튼 TS가 추론하게 해주는게 제네릭 타입 -> 다형성을 이용하는 것 이다.
//any는 타입추론을 하지않고 넘긴다 (일반 바닐라js쓰는거랑 같은거아닐까?)
//타입은 추론해주지만 인수의 갯수 는 추론해주지 않는다 (따로 명시해줘야함)
//추론을 하게해줄수도 있지만, 지정도해줄수있다
superPrint<string>(["안녕","하세요","김펭귄"]);

//타입 넣고 넣어보기 

type Player<T>={
  name:string,
  //extraInfo가 있을수도있고 없을수도있다
  extraInfo: T,
}

type ExtraFood = {
  favFood: string,
};

type PenguinPlayer = Player<ExtraFood>;

const penguin : PenguinPlayer ={
  name:"HeeJun",
  extraInfo: {
    favFood:"cake",
  }
}

// extraInfo 가 없을시에 제네릭에 null을 붙여준다
const heejun :Player<null> ={
  name: "Heejun",
  extraInfo: null,
  
}

// const [phoneNumber, setPhoneNumber] = useState<number>(1);