타입스크립트 union type, any, unknown, 함수타입

Lipton·2022년 2월 16일
0

TypeScript

목록 보기
2/6
post-thumbnail

union type

let name: string | number = 'kim';
let age: (string | number) = 100;

name, age 변수엔 string 또는 number만 들어옴
그리고 할당하는 순간 타입은 string 또는 number 중 하나로 변한다.

array, object 자료 만들 때 union type

var array: (number | string)[] = [1,'2',3]
var object: {data : (number | string) } = { data : '123' }

괄호를 안하고 number | string[]이면 number 또는 string 배열이라고 인식.(number는 배열이라고 인식 안함)

any type

아무 자료나 집어넣을 수 있는 타입

let 이름: any = 'kim';
이름 = 123;
이름 = undefined;
이름 = [];

any 타입은 막쓰면 타입스크립트 쓰는 의미가 없음.
타입관련 버그가 생길 경우 왜 그런지 추적하기가 어렵다.

unknown

any와 똑같이 모든 타입을 집어넣을 수 있다.
자료집어넣어도 타입은 그대로 unknown
unknown은 숫자를 넣어도 number타입이 아님(연산 불가능)

let 이름: unknown = 'kim';
이름 = 123;
이름 = undefined;
이름 = [];
// 아래 코드는 불가능, any타입에서는 가능

let 이름: unknown;

// unknown타입은 다른 타입이 안됨
let 변수1: string = 이름;
let 변수2: boolean = 이름;
let 변수3: number = 이름;
// unknown타입이라 불가능
이름[0]; // 배열 값 할당해주면 가능
이름 - 1; // 숫자 할당해줘도 불가능
이름.data; // object 할당해줘도 불가능

아직 뭘 집어넣을지 모르겠는데 약간의 안정성을 도모하고 싶으면 unknown 타입을 쓰는 것이 좋다.

함수 타입

함수는 총 두 군데 타입지정이 가능
1. 함수로 들어오는 자료 (파라미터)
2. 함수에서 나가는 자료 (return)

function 내함수(x :number) :number { 
  return x * 2 
} 

void 타입

return할 자료가 없는 함수의 타입

function 내함수(x :number) :void { 
  x * 2
} 

파라미터 옵션

함수에 파라미터자리를 만들어놨지만 가끔 파라미터 없이 쓸 때

function 내함수(x? :number) { 

}
내함수(); //가능
내함수(2); //가능

파라미터의 물음표는 x : number | undefined 이거랑 똑같은 의미

함수 Union type

// 에러 발생
function 함수(x :number | string): number{ 
  return x + 1 
} 

타입스크립트에선 변수의 타입이 number | string 이런 union type인 경우 자료 조작을 금지시킵니다.
아직 이 파라미터의 타입이 확실하지 않으니까 파라미터 조작을 일단 실드로 막고 금지하는 것입니다.
에러 발생 하지 않으려면 narrowing을 사용해야 함

Type Narrowing

if문 등으로 타입을 하나로 정해주는 것

function 내함수(x :number | string){
  if (typeof x === 'number') {
    return x + 1
  } 
  else if (typeof x === 'string') {
    return x + 1
  }
  else {
    return 0
  }
}

if문과 typeof 키워드로 현재 파라미터의 타입을 검사

  • 꼭 typeof를 쓸 필요는 없고 타입을 하나로 확정지을 수 있는 코드라면 어떤 것도 Narrowing 역할을 할 수 있습니다.

  • in, instanceof 키워드도 사용가능합니다.

Type Assertion

타입 덮어씌우기 변수명 as string

function 내함수(x :number | string){ 
    return (x as number) + 1 // x를 number로 덮어 씌우기, number타입 됨
}
console.log( 내함수(123) )

}

여러개의 타입을 하나로 하고 싶을 때 사용
타입을 다른걸로 변경하는 것은 안됨
무슨 타입이 들어올지 100% 확실할 때(다른 타입을 넣으면 에러를 띄우지 못함)


출처: coding apple

profile
Web Frontend

0개의 댓글