Today I Learned_230131

• string과 String은 다름. 소문자로 하는 것 기억하기.

const a: string = 'hello';
const b: String = 'hell';

대문자로 하면 지옥이 펼쳐진다..

String과 string은 다르다. String은 래퍼 객체에 해당.

String은 new String();에서만 사용

대문자 쓰지 말자.

• 템플릿 리터럴 타입이 존재(유니언 등 사용 가능)
• type키워드를 통해 타입을 커스텀하게 만들 수 있다.
• const에서도 백틱을 쓸 수 있지만 type에서도 백틱을 쓸 수 있다.

type World = "world" | "hell";

// type Greeting = "hello world"
type Greeting = `hello ${World}`;

또는을 사용하면 타입 추천을 정교하게 만들 수 있다.

• hello world, hello hell 둘 중 하나만 선택할 수 있다.

• 배열, 튜플 문법

let arr: string[] = [];
let arr2: Array<string> = [];
function rest(...args: string[]) {} //function rest(...args) {} 와 같이 줄일 수 있음

const tuple: [string, number] = ['1', 1];
tuple[2] = 'hello'; //에러남. 2자리밖에 없는데 세번째 자리에 넣으니까 에러
tuple.push('hello'); //근데 타입스크립트는 바보라서 얘는 된다.
// 둘 다 세번째에 요소를 추가하는 요소이다

• rest parameter : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
  • 모든 매개변수를 받는다.
• 타입이 헷갈릴 때는 잠시 자바스크립트로 돌아가서 정신을 차리자.

//rest pamareter
function rest(...args: string[]) {
    console.log(args); //[1, 2, 3]
}
rest('1', '2', '3');

function rest(a, ...args: string[]) { //여기서 a는 any타입
    console.log(args); //1, [2, 3]
}
rest('1', '2', '3')

• enum, keyof, typeof
• enum은 변수들을 하나의 그룹으로 묶고싶을 때 사용
  • enum : javascript로 변환 시 남아있지 않는다.
  • 스크린샷 2023-01-31 오후 8.52.52.png
  • 객체 : javascript로 변환 시 남아있는다.
  • 
  • 남겨야 할지 안 남겨야 할지 모르겠다면 일단 객체로 만들어서 남기자.

const enum EDirection {
  Up,     //0
  Down,   //1
  Left,   //2
  Right,  //3
}
//첫 값을 지정할 수 있음. Up을 3으로 지정해주면 3, 4, 5, 6이 된다.
//3, 5, 4, 6과 같이 불규칙적으로도 할 수 있다.
//enum은 문자열도 가능
const enum EDirection {
    Up = '123',
    Down = 'hello',
    Left = 'wow',
    Right = 'enum',
}

//enum이 아닌 객체를 사용
const ODirection = {
  Up: 0,
  Down: 1,
  Left: 2,
  Right: 3,
} as const;

EDirection.Up;
           
(enum member) EDirection.Up = 0
 
ODirection.Up;
           
(property) Up: 0
 
// enum은 직접 타입으로 쓸 수 있음. dir은 4개중에 하나여야 한다.
function walk(dir: EDirection) {}
 
// enum 쓰기 싫을 땐 아래처럼 쓰면 된다.
type Direction = typeof ODirection[keyof typeof ODirection];
function run(dir: Direction) {}

//4개 중 하나의 방향을 입력
walk(EDirection.Left);
run(ODirection.Right);

• as const

  • 있을 때 : 정확하게 타입 추론

    

  • 없을 때 : 정확하게 타입 추론을 하지 않음

    

  • 타입스크립트가 바보가 되면 우리가 나서야 함

    • as const를 붙이거나 - 이 속성들을 전부 상수로 사용하겠다. 고정된 값으로 엄격한 타이핑 진행
    • 뒤에 타입을 붙여줄 수 있음

      const ODirection: {Up: 0, Down:1, Left:2, Right:3} = {
          Up: 0,
          Down: 1,
          Left: 2,
          Right: 3,
      };
            
      const ODirection = {
        Up: 0,
        Down: 1,
        Left: 2,
        Right: 3,
      } as const;
    

• keyof, typeof

  

  • obj의 a, b, c를 가져다 쓰고 싶음
  • 그런데 쓸라고 하니까 obj는 값이 아닌 타입이라고 한다 → typeof 필요

    const obj = {a: '123', b: 'hello', c:'world'};
    type Key = keyof typeof obj;
  

  • typeof : 값을 타입으로 사용하고 싶을 때

    

  • 여기서 키들만 뽑아내고 싶을 때 keyof 사용

    

  • as const와 typeof를 활용하면 이렇게 사용할 수 있음 → 값들만 뽑아내고 싶을 때 enum처럼 사용할 수 있다.