TypeScript

타입을 미리 정하기 애매할 때 (union, any, unknown)

2023. 7. 2. 04:29


Union-type
let 이름: string | number = 'hong';
let 나이: (string | number) = 20;

OR( | ) 연산자를 이용하여 타입 1 or 타입 2를 설정할 수 있다.

let 리스트 : (number | string )[] = [1,'2',3];
let 오브젝트 : {data : string | number} = {data : '123'}

array와 object도 마찬가지도 union타입을 설정할 수 있다.


주의할 점
var 배열1: number | string[] = [1,'2',3] // 1 or ['1','2','3']
var 배열2: (number | string)[] = [1,'2',3]

기본 타입의 경우 소괄호( )를 생략할 수도 있었지만, 두 케이스 의미는 전혀 다르다.

배열1 : number 또는 sring [ ]을 타입으로 지정하여 값은 숫자 또는 문자열 array가 돼야 한다. -> (에러발생)

배열 2 : 소괄호를 값에 맞게 잘 처리해 주었기 때문에 소괄호를 잘 활용한 케이스다.


Any-type
let 이름: any = 'hong';
이름 = 123;
이름 = false;
이름 = [];

변수명 : any

어떠한 타입의 자료형이던 변수를 마음대로 설정할 수 있다.


주의할 점

타입스크립트의 장점인 타입에러를 확인할 수 없다. -> 자바스크립트랑 다를 것이 없음.

비상시에만 타입 해제용으로 사용할 것을 권한다.

 


Unknown-type
let 이름 : unknown = "hong";
이름 = 123;
이름 = false;
이름 = {};

변수명 : unknown

any와 같이 모든 타입을 설정할 수 있다.

let 이름: unknown;

let 변수1: string = 이름;
let 변수2: boolean = 이름;
let 변수3: number = 이름;

이 코드는 에러가 발생한다.

-> unknown타입을 다른 곳에 넣으려 했기 때문에 타입에러가 발생한다.

any보다 엄격한 편. (any는 가능)

let 이름: unknown;
이름 -1;

똑같이 이 코드 역시 에러가 발생한다.

-> unknown타입에 number타입의 특성인 계산을 하려 했기 때문에

에러가 발생한 것이다. (any는 가능)


응용예제
let 나이: string|number;
나이 + 1;

에러 발생.

-> string | number (unionType)이기 때문에 number타입의 특성인 계산이 불가능

let 이름 : unknown = "hong";
let 변수 : string = 이름;

에러 발생.

-> unknown타입에 string타입을 설정했기 때문에 에러가 발생한다.


이러한 에러를 해결하기 위해 타입변수를 조작하는 방법이 있는데,

그것은 타입스크립트 기술로 narrowing 또는 assertion을 사용한다고 한다.

변수에 뭐가 들어있는지 모르고 추측해야 할 상황에 반드시 필요하다고 한다.

저작자표시

'TypeScript' 카테고리의 다른 글

타입 확정하기 (Narrowing & Assertion)  (0) 2023.07.02
함수에 타입 지정하는 법  (0) 2023.07.02
타입스크립트 기본 타입 정리 (primitive types)  (0) 2023.07.02
TypeScript 컴파일 세부설정 (tsconfig.json)  (0) 2023.07.02
React 프로젝트에서 TypeScript를 사용하려면  (0) 2023.07.02
'TypeScript' 카테고리의 다른 글
  • 타입 확정하기 (Narrowing & Assertion)
  • 함수에 타입 지정하는 법
  • 타입스크립트 기본 타입 정리 (primitive types)
  • TypeScript 컴파일 세부설정 (tsconfig.json)
www.seok.com
www.seok.com
www.seok.com
웹린이 일기장
www.seok.com
전체
오늘
어제
  • 분류 전체보기 (64)
    • TypeScript (26)
    • Next.js (20)
    • MongoDB (2)
    • AWS (2)
    • Node.js (1)
    • Flutter (7)
    • FireBase (5)
    • Error (1)

태그

  • OAuth
  • node.js
  • REACT
  • extends
  • Firebase
  • rest parameter
  • token
  • SSR
  • 캡슐화
  • studio
  • DART
  • Props
  • typeScript
  • server component
  • next-auth
  • Narrowing
  • destructuring
  • Next.js
  • MongoDB
  • spread operator
  • &연산자
  • client component
  • s3
  • Android
  • app
  • fcm
  • Flutter
  • Object
  • Push
  • Interface

인기 글

최근 글

최근 댓글

hELLO · Designed By 정상우.
www.seok.com
타입을 미리 정하기 애매할 때 (union, any, unknown)
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.