본문 바로가기

패스트캠퍼스

타입스크립트 타입 4 [패스트캠퍼스 챌린지 17일차]

unknown

TS 3.0부터 지원

any와 짝꿍. any보다 Type-safe한 타입

(any를 쓸 자리에 unknown을 쓰려고 노력하자)

  • any처럼 아무거나 할당 가능
  • 컴파일러가 타입을 추론할 수 있도록 타입의 유형을 좁히거나 타입을 확정해주지 않으면?
    → 다른 곳에 할당할 수 없고, 사용할 수도 없음

unknown 타입을 사용하면 런타임 에러를 줄일 수 있음

→ 사용 전에 데이터의 일부 유형의 검사를 수행해야 함을 알리는 API에 사용할 수 있을 듯


We may need to describe the type of variables that we do not know when we are writing an application
응용 프로그램을 작성할 때 모르는 변수의 타입을 묘사해야 할 수도 있음

These values may come from dynamic content - e.g. from the user- or we may want to intentionally accept all values in our API
이러한 값은 동적 콘텐츠(예를 들면 사용자)에서 오거나, API의 모든 값을 의도적으로 accept할 수도 있음

In these cases, we want to provide a type that tells the compiler and future readers that this variable could be anything, so we give it the unknown type

typeguard

타입가드를 통해 타입을 한정시켜야지만 쓸 수 있는 게 unknown

//typeguard
//타입가드를 통해 타입을 한정시켜야지만 쓸 수 있는 게 unknown

//
declare const maybe: unknown;
//maybe는 unknown type

const aNumber: number = maybe; // 에러!
//unknown 형식은 number에 할당할 수 없대
//만약에 any였다면 이런 코드는 바로 통과과 됐을 거야

//
const aBoolean: boolean = maybe; // 에러!
//unknown' 형식은 'boolean' 형식에 할당할 수 없대

if (maybe === true) {
  const aBoolean: boolean = maybe;
}

//
const aString: string = maybe; // 에러!
// unknown 형식은 string에 할당할 수 없대

if(typeof maybe === "string") {
  const aString: string = maybe;
} 

any를 넣었을 때는 걍 넘어갈 에러들이 unknown을 쓰니까 빨간줄 빡빡 뜸

→ any를 사용했으면 생겼을 문제들을 unknown을 써서 막기
(타입 시스템이 unknown을 도와줌)

never

never는 모든 타입의 subtype이며, 모든 타입에 할당 가능

하지만 never에는 그 어떠한 것도 할당할 수 없음
(any도 never에 할당 불가)

잘못된 타입을 넣는 실수를 막고자할 때 사용하기도 함

never는 항상 error를 반환하거나 영원히 끝나지 않는 함수의 타입 / 결코 발생하지 않는 값

function showError(message: string):never {
    throw new Error(message);
};

function fail() { //fail(): never 라고 추론함
    return error("failed");
}

function infiniteLoop():never {
    while (true) {
        //do something
    }
};

let aa의 값을 바로 assign 했을 때

let aa: string = 'hello!' //assign
//aa는 스트링 타입
//만약 aa가 스트링 타입이 아니라면 aa는 never라는 타입으로 bb에 할당
if(typeof aa !== 'string'){
   aa; //never
   /**스트링이 아닌 경우.
    * 스트링에서 스트링을 빼면 아무것도 안 남잖아
    * 그니까 never
    */
}

assign하지 않고 declare 키워드를 사용해서 타입만 지정해보자

declare const aa: string;
//aa는 스트링 타입
//만약 aa가 스트링 타입이 아니라면 aa는 never라는 타입으로 bb에 할당
if(typeof aa !== 'string'){
   aa; //never
}

declare 키워드 써서 유니온 하면?

declare const aa: string | number ; //타입오브 가드 올려
//aa는 스트링 타입
//만약 aa가 스트링 타입이 아니라면 aa는 never라는 타입으로 bb에 할당
if(typeof aa !== 'string'){
   aa; // number
}

이건 뭐죠?

// 조건부 타입
type Indexable<T> = T extends string ? T & {[index: string]: any} :never;

type ObjectIndexable = Indexable<{}>;

/*타입이 변수처럼 쓰이는 제네릭
T extends string
-> T가 만약에 string이면 
T & {[index: string]: any} 
-> 이런식으로 만들어서 보내는 거고
그게 아니라면 never 타입 나와라!

만약 우리가 여기에 잘못된 타입을 넣게 되면 never 나옴
실수 막기용
*/

void

어떤 타입도 가지지 않는 '빈 상태'를 의미
값은 없고 타입만 있음

소문자 사용

void는 변수에다가 annotation하는 게 아니고,
값을 반환하지 않는 undefined를 return하는 그런 상태라고 보면 됨

return type함수의 반환 타입으로 쓰임

이외에는 사용할 일이 거의 없음

타입 추론으로 void 나옴

function returnVoid(message: string) {
  console.log(message);
}
//타입 추론 function returnVoid(message: string): void

return 키워드 입력해보면?

function returnVoid(message: string) {
  console.log(message);

    return;
}
//타입 추론 function returnVoid(message: string): void

함수를 사용해볼까요?

void로 지정된 함수는
→ 이 함수의 리턴을 가지고 무엇도 하지 않겠다 라고 명시적으로 표현하고, 그것을 막는 행위

function returnVoid(message: string) {
  console.log(message);
}
//타입 추론 function returnVoid(message: string): void

const r = returnVoid("리턴이 없다."); //const r: void

그 와중에 유일하게 void에 할당 가능한 녀석. undefined

이렇게 사용한다고 하더라도 어쨌든 void가 있기 때문에
리턴된 무언가를 가져다가 어딘가에서 무엇을 할 수는 없음

function returnVoid(message: string) :void {
  console.log(message);

  return undefined;
}
returnVoid("리턴이 없다."); //const r: void

void는 함수에서 아무 것도 반환하지 않을 때 사용

함수에서 반환값이 없을 경우에 사용

// 아무것도 return하는 게 없지?
function sayHello(){
    console.log('hello');
};
// 이때 void 입력
function sayHello():void {
    console.log('hello');
};


이제 타입 끝남!!!
새로운 마음으로 새로운 챕터!!

https://bit.ly/37BpXiC
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
#직장인인강 #직장인자기계발 #패스트캠퍼스 #패스트캠퍼스후기 #패캠챌린지 #한번에끝내는프론트엔드개발초격차패키지Online