TypeScript(2)-Type,Type annotation

2024. 11. 11. 15:17·🥏TypeScript

TypeScript 추가 제공 타입

Any

애플리케이션 만들때, 잘알지 못하는 타입을 표현해야할때가 있다. 이 값은 유저로 부터 받은 데이터나 서드파티 라이브러리 같은 동적인 컨텐츠에서 올 수도 있다.
이 경우, 타입검사를 하지않고, 그 값들을 컴파일 시간에 검사할때 타입검사를 통과하기를 원한다.

하지만 any를 최대한 안쓰는 걸 추천
그래서 nolmplicitAnt라는 옵션을 주게되면 any를 썻을때 오류가 나오게 할 수 있음

let someting :any = "hello";
something = 23;
something = true;
let arr:any[] = ["john",212,true];
arr.push("smith");
console.log(arr);
//output : ['john',212,true,'smith']

Union

TS를 사용하면 변수 또는 함수 매개변수에 대해 둘 이상의 데이터 유형을 사용할 수 있음.

let code: (string|number);
code =123; //가능
code ="abc";  //가능
code = false;  //불가능 - 컴파일 에러

Tuple

Enum

enum은 enumerated type(열거형)을 의미하며 값들의 집합을 명시하고 사용하도록함.

enum PrintMedia{
  newspaper,  //0
  newsletter, //1
  magazine, //2
  book //3
}

여기서 printmedia 라 불리는 집합을 기억하기 어려운 숫자 대신 친숙한 이름으로 사용하기 위해 enum을 활용하고 있음.
열거된 각 PrintMedia는 별도의 값이 설정되지 않으면 0부터 시작

let mediaType : number = PrintMedia.Book//3

위코드에서 mediaType변수에 할당된 값은 3이다.

enum PrintMedia{
  newspaper =1,
  newsletter=50,
  magazine=55,
  book        //55+1
}

enum에 설정된 아이템에 값을 할당할 수도 있음 값이 할당되지 않은 아이템은 이전에 아이템의 값에 +1 된 값이 설정됨

let type : string = PrintMedia[55]
// magazine

enum과 객체의 차이점

object는 코드내에서 새로운 속성을 자유롭게 추가할 수 있지만, enum은 선언할때 이후에 변경할 수 없음.
object 속성값은 js가 허용하는 모든 타입이 올 수 있지만, enum의 속성값으로는 문자열 혹은 숫자만 허용된다.

void

데이터가 없는 경우 사용되고 예를 들어 함수가 값을 반환하지 않으면 반환 유형으로 void지정 가능하다.

타입이 없는 상태이며, any와 반대의 의미를 가짐
void는 소문자로 사용해야하며, 주로 리턴없을 때 사용

function sayHi() :  void{
  console.log("hi");
}
let speech : void = sayHi();
console.log(speech);

//output : undefined

never

TS는 절대 발생하지 않을 값을 나타내는 새 Type never를 도입했음.

never은 일반적으로 함수의 리턴타입으로 사용됙, 리턴타입으로 never가 사용될경우, 항상 오류를 리턴하거나 리턴값을 절대로 내보내지 않음을 의미함.

function throwError(errorMsg : string):never{
  throw new Error(errorMsg);
}

function keepProcessing():never{
  while(true){
    console.log("asd");
  }
}

void와 never의 차이

void타입은 값으로 undefined나 null값을 가질수 있는데
never은 어떠한 값도 가질 수 없다.

never유형은 컴파일 오류를 발생시킴

type annotation, type inference

const rate : number = 5 //직졉 지정

type annotation : 개발자가 타입을 TS에게 직접 말해주는 것

const rate =5  //알아서 추론

type inference : TS가 알아서 타입을 추론하는 것

타입을 추론 못해서 annotation을 꼭 해줘야하는 경우

1. any 타입을 리턴하는 경우

cosnt json = '{"x":4,"y":7}'
const coordinates = JSON.parse(json)
console.log(coordinates)

coordinates에 hover해보면 const coordinates : any라고 뜬다. JSON.parse는 json을 파싱해주는데 인풋으로 들어가는 json을 확인하면 어떤 타입이 될지 개발자는 예상할 수 있지만,
TS는 지원하지 않는다. 리턴 타입이 일정하지 않으므로, any를 리턴한다고 추론해버린다. 그래서 타입 annotation을 해줘야함!!

2. 변수 선언을 먼저하고 나중에 초기화 하는 경우

let greeting
greeting = 'hello'  //let greeting :any

변수선언과 동시에 초기화하면 타입을 추론하지만, 선언을 먼저하고 나중에 초기화할때 추론하지 못함.

3. 변수에 대입될 값이 일정하지 않은 경우

let num = [-7,-2,10]
let numAboveZero: boolean | number = false

for(let i = 0;i<num.length;i++){
  if(num[i]>0 ){
    numAboveZero = num[i]
  }
}

여러 타입이 지정되어야 할 때에는 | 로 annotation해줌

'🥏TypeScript' 카테고리의 다른 글

TypeScript(6)-Utility Type  (0) 2024.11.11
TypeScript(5)-함수 오버로딩,Generics  (0) 2024.11.11
TypeScript(4)-Type Alias,Interface,호출 시그니처,인덱스 시그니처  (0) 2024.11.11
TypeScript(3)-tsconfig.json  (0) 2024.11.11
TypeScript(1)  (0) 2024.11.11
'🥏TypeScript' 카테고리의 다른 글
  • TypeScript(5)-함수 오버로딩,Generics
  • TypeScript(4)-Type Alias,Interface,호출 시그니처,인덱스 시그니처
  • TypeScript(3)-tsconfig.json
  • TypeScript(1)
gprorogpfus
gprorogpfus
:- >
  • gprorogpfus
    gpfusdldks
    gprorogpfus
  • 전체
    오늘
    어제
    • 분류 전체보기 (55)
      • 🎭JavaScript (2)
      • 👚 CSS (1)
      • ⚛️ React (13)
      • 🌃 Next.js (5)
        • 🔜 next.js-study (3)
      • 🥏TypeScript (10)
      • 🏴알고리즘 (2)
      • 🌴트러블슈팅 (3)
      • ⛲ 프로젝트 (6)
        • 👖gproro-shop-app (8)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
    • 글쓰기
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    TypeScript
    react
    JavaScript
    Redux
    GIT
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.2
gprorogpfus
TypeScript(2)-Type,Type annotation
상단으로

티스토리툴바