Notice
Recent Posts
Recent Comments
Link
«   2025/04   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

개발의변화

우아한타입스크립트 3-1 고급타입 본문

카테고리 없음

우아한타입스크립트 3-1 고급타입

refindmySapporo 2023. 11. 9. 15:47
반응형

any타입

자바스크립트는 암묵적으로 모든 타입을 any로 동적 타이핑을 하고 있다.
타입스크립트도 자바스크립트 위에서 동작하는 언어로 타입 추론시에 아무런 지정이 없다면 any를 리턴하고
이는 정적 타입의 타입스크립트 동작에 좋지 않다.
그렇기에 noImplicityAny를 넣어서 any동작을 제어하는 것이 좋다
하지만 어쩔수 없이 any타입을 사용해야 할 때가 있다.

  1. 개발 단계에서 임시로 값을 지정해야 할 떄
  2. 어떤 값을 받아올지 또는 넘겨줄지 정할 수 없을 때
  3. 값을 예측할 수 없을 때 암묵적으로 사용

하지만 타입을 설정하지 않으면 컴파일러에서는 오류가 나지 않지만 실제 런타임에서 심각한 오류가 발생할 수 있다.

unknown타입

any타입과 유사하게 모든 타입의 값이 할당될 수 있다.

그러나 any말고 다른 타입은 unknow타입 값 할당 x

any: 어떤 타입으로도 할당 가능(never제외)
unknown: any타입 외에 다른 타입으로 할당 불가능

let unknownValue:unknown;
unknownValue = 100;

let someValue1: any = unknownValue; //(O)
let someValue2: number = unknownValue; //(X)

unknown은 이름처럼 무엇이 할당될지 아직 모르는 상태 왜 등장?
-> 함수, 객체의 속성 접근, 클래스 새엇ㅇ자 호출을 통한 인스턴스 생성 등 모든 시도에서 에러
-> 할당 시엔 문제가 없어도 호출 시 문제가 생기는지 의아
그렇기에 할당 시점에 unknown 타입은 어떤 타입이 할당되었는지 알 수 없음을 나타내기에 unknown 타입으로 선언된 변수는 값을 가져오거나 내부속성 접근제어

그렇기에 데이터 구조를 파악하기 힘들 때 any 타입 대신 unknown 타입으로 대체해서 사용하는 방법
또한 타입스크
립트 4.4부터 try-catch 에러 타입이 any에서 unknown으로 변경

void타입

함수 내부에 별도 반환문이 없다면 타입스크립트 컴파일러가 알아서 함수 타입을 void로 추론
그래도 다른 함수의 인자로 전달되는 경우에는 쓰긴함

never타입

일반적으로 함수와 관련해서 많이 사용되는 타입

값을 반환할 수 없는 타입

값을 반환할 수 없는 경우
1.에러를 던지는 경우

function generateError(res: Response): never {
 throw new Error(res.getMessage());
}

자바스크립트에서는 런타임에 의도적으로 에러를 발생시키고 캐치할 수 있다. throw 키워드를 사용하면 에러를 발생시킬 수 있는데, 이는 값을 반환하는 것으로 간주하지 않는다. 즉 에러를 던지는 작업을 수행하면 해당 함수의 반환 타입은 never

2.무한히 함수가 실행되는 경우
무한 루프는 함수가 종료되지 않음을 의미하기에 never를 사용한다

never타입은 모든 타입의 하위 타입이다. 즉 never 자신을 제외한 어떤 타입도 never 타입에 할당될 수 없다는 것을 의미

Array타입

배열 타입을 가리키는 Array 키워드는 자바스크립트에서 Object.prototype.toString.call(...) 연산자 사용하여 확인가능
typeof를 사용하여 타입을 알 수도 있지만, 이 함수를 사용하는 이유는 typeof의 경우 객체 타입을 단순히 object타입으로 알려주지만 Object.prototype.toString.call(...) g함수는 객체의 인스턴스 까지 알려주기 때문이다.

다른 정적 타입의 언어에서는 위와 같이 배열을 선언할 때 크기까지 동시에 제한하기도 하지만 정적 타입의 특징을 살려 크기의 제한은 두지않고 해당 타입의 원소만 관리한다.

const array : number[] = [1,2,3]

하나의 배열에 두가지 타입을 넣기 위해서는 유니온 타입을 활용한다

const array1: Array<number:string> = [1,"string"]
const array2: Arrray<string:boolean> = [1,false]

튜플

const httpStatusFromPaths: [number,string, ...string[]] = [
400,
"Bad Request",
"/users/:id",
"/users/:userId",
"/users/:uuid"

]

enum

열거형이라고도 부르는데 타입스크립트에서 지원하는 특수한 타입
enum이라는 키워드는 다른 언어에서도 사용하는 개념이기에 익숙할 수 있을 것이다.
enum은 일종의 구조체를 만드는 시스템
타입스크립트는 명명한 각 멤버의 값을 스스로 추론한다. 기본적인 추론 방식은 숫자 0부터 1씩 늘려가며 값을 할당하는 것

enum ProgrammingLangauge {
 TypeScript,
 Javascript,
 Java,
 Python,
 Kotlin,
 Rust,
 Go
}

ProgrammingLanguage.Typescript; //0
ProgrammingLangauage.Rust; //5
ProgrammingLanguage["Go"] // 6

또한 각 멤버에 명시적으로 값을 할당 할 수 있다.. 1씩 늘려짐

하지만 특히 문자열 상수를 이용할 때 많이 사용한다

enum ItemStatusType {
 DELIVERY_HOLD = "DELIVERY_HOLD",
 DELIVERY_READY = "DELIVERY_READY",
 DELIVERING = "DELIVERING",
 DELIVERED = "DELIVERED",
}

const checkItemAvaliable = (itemStatus: ItemStatusType) => {
 switch (itemStatus) {
   case ItemStatusType.DELIVERY_HOLD:
     return false

 }
}

이러한 방식으로 활ㅇ용하면 타입 안정성, 명확한 의미 전달과 높은 응집력, 가독성을 높일 수 있다.
숫자로만 이루어져 있거나 타입스크립트가 자동으로 추론한 열거형은 안전하지 않은 겨로가를 낳을 수 있다.

하지만 열거형을 사용할 때 특히 숫자는 역방향으로 접근가능핟. 할당된 값을 넘어서는 범위로 접근하더라도 타입스크립트는 막지 않는다.

그렇기에 문자열 상수 방식으로 열거형을 상요하는 것이 값의 할당이나 접근을 방지하는 데 도움이 된다.

열거형은 타입스크립트 코드가 자바스크립트로 변환될 떄 즉시 실행 함수(IIFE)형식으로 변환되는 것을 볼 수있기에 const enum, as const assertion을 활용해야 한다

반응형