Type space 와 Value space

타입스크립트를 사용하면 타입추론이 잘되서 오류를 예방해준다! 그래서
컴파일에러로 보여주므로 디버깅이 넘 쉽다
일단 타입스크립트 정의는

TypeScript는 JavaScript의 슈퍼 셋, 즉 상위 확장자로 JavaScript 엔진을 사용하며 자신이 원하는 변수의 타입을 정의하고 프로그래밍을 하면 JavaScript로 컴파일되어 실행할 수 있습니다.

1. typeScript는 컴파일 과정에서 타입을 지정하기 때문에 컴파일 에러를 예방할 수 있을뿐 아니라, 손쉬운 디버깅이 가능해집니다

2. 변수의 이름뿐만 아니라 그 데이터의 "type"까지 알 수 있게 해준다는 것입니다. 그래서 코드 작성이 좀 더 쉽고 직관적이게 만들어줍니다.

3. 코드 가이드 및 자동완성

Type space 와 Value space

Type space!

• 타입 검사를 위해서 작성하고 컴파일 타임에 제거되는 것들을 포함하고 있는 집합
• 아래의 예제에서 Type space로 표시한 부분들은 컴파일 타임에 제거된다.

type MyType = number; // 👈 Type space
const a: MyType = 1;
// -------👆---------- Type space

변환된 자바스크립트 코드는

const a = 1;

Value space

변수, 상수, 파라미터 등 분명히 값을 갖고 있고 런타임에서 존재하는 것

여기서 중요한건 Value space은 값이 있다

type MyType = number;
const a: MyType = 1;
// ---👆----------👆-- Value space

function foo(args: Args) {
// --👆-------👆----- Value space
// -----------------👆- Type space
 // do something
}

Object indexing

export type Event =  
| {  
  type: "click";  
  event: MouseEvent;  
}  
| {  
  type: "focus";  
  event: FocusEvent;  
}  
| {  
  type: "keydown";  
  event: KeyboardEvent;  
};  
  // 구분자를 index로 넣으면 구분자들의 값을 구할수 있다!!!
type EventType = Event["type"];

import {Equal, Expect} from "../../helper";

export const fakeDataDefaults = {
    foo: "bar",
    bar: 123,
    baz: true,
};

// typeof 로 지정헤줘야 타입지;정이 된다 만약 fakeDataDefaults로만 지정햇다면 값이 할당이 되는거디!!!
type fakeDataDefaultsType = typeof fakeDataDefaults

export type FooType = fakeDataDefaultsType['foo'];
export type BarType = fakeDataDefaultsType['bar'];
export type BazType = fakeDataDefaultsType['baz'];

type tests = [
    Expect<Equal<FooType, string>>,
    Expect<Equal<BarType, number>>,
    Expect<Equal<BazType, boolean>>,
];

as const vs enum

const Color = {  
  Red: "red",  // string
  Green: "green",  // string
  Blue: "blue",  // string
}
//각각  스트링으로 추론된다

const Color = {  
  Red: "red",   // "red"
  Green: "green",    //"green"
  Blue: "blue",  
} as const 

// as const 를 사용하게 된다면 string으로 추론되는 것이 아니라 String literal type(값자체가 타입이 되는것)로 추론 된다

enum과 그럼 다른점은 무엇일까

type ColorType = keyof typeof Color  
  
function color(c: ColorType){  
  // do something
}  
  
color(Color.Red)

enum으로 사용할 경우  "red"라고 넣으면 타입에러! Color.Red로 넣어줘야하만 as const는 가능! => 값이 타입이니 가능! 

keyof와 typeof

const obj ={a:'123',b:2}
// key만 꺼내 오고 싶을 경우

type a = keyof typeof obj// obj은 자바스크립트 값이기 때문에 타입으로 쓰려면typeof 붙이고 키만 꺼내오기 위해 keyof를 붙임

.... 더 추가 예정....

https://velog.io/@jeris/TypeScript-%EC%9C%A0%ED%8B%B8%EB%A6%AC%ED%8B%B0-%ED%83%80%EC%9E%85