TS스터디 이펙티브 item33~35

🥵item 33 string 타입보다 더 구체적인 타입 사용하기

string 타입의 범위는 매우 넓다. string 타입으로 변수를 선언하려 할때, 혹시 그보다 더 좁은 타입이 적절하지 않을지 검토해야한다.

//string 타입이 남발된 모습이다. 주석으로 타입 정보를 적어두는 것은 잘못된 설계이다.
interface Album {
  artist: string;
  title: string;
  releaseDate: string;
  recordingType: string;
}

// 위에 코드보단 아래 코드처럼 하는 것이 좋다
type RecordingType = 'live' | 'studio';

interface Album {
  artist: string;
  title: string;
  releaseDate: Date;
  recordingType: RecordingType;
}

이러한 방식에는 3가지 장점이 있는데

• 1.타입을 명시적으로 정의함으로써 다른 곳으로 값이 전달되어도 타입 정보가 유지 된다.
• 2.타입을 명시적으로 정의하고 해당 타입의 의미를 설명하는 주석을 붙여넣을 수 있다.
• 3.keyof 연산자로 더욱 세밀하게 객체의 속성 체크가 가능해진다.

(3)예를들어 객체의 속성 키를 매개변수로 받을 때

function pluck<T, K extends keyof T>(records: T[], key: K): T[K][] {
  return records.map(r => r[key]);
}

매개변수 타입을 단순히 string으로 지정하면 너무 넓은 범위의 타입이 되버린다.
이러한 경우 keyof 연산자를 이용해 객체 속성이 타입이 되어 적절히 타입을 좁혀줄 수 있다.

다른 예를 들어, 이메일 주소를 다루는 경우를 생각해보면 이메일 주소는 일반적으로 다음과 같은 형식을 가지고 있다.

username@domain.com

이 때, ts에서 string 타입으로 선언하면 다음과 같이 작성할 수 있다.

let email: string = "hello@example.com";

하지만 이렇게 하면 email 변수에 잘못된 형식의 문자열이 할당될 가능성이 있다. 따라서 이메일 주소를 다룰 때는 다음과 같은 형식을 가진 타입을 사용하는 것이 더 안전하다.

type EmailAddress = `${string}@${string}.${string}`;

let email: EmailAddress = "hello@example.com";

이렇게 하면 email 변수에 유효한 이메일 주소만 할당될 수 있다. ${string}은 어떠한 문자열도 가능하다는 것을 의미하며, @와 .은 문자 그대로 해당 문자가 포함되어야 한다는 것을 의미합니다.

이외에도 전화번호, 우편번호 등과 같이 특정한 형식을 가지는 문자열을 다룰 때에는 더 구체적인 타입을 사용하는 것이 코드의 안정성을 높일 수 있다.

-요약-

• 문자열을 남발하여 선언된 코드를 피하자. 조금 더 구체적인 타입을 사용해야 한다.

• 변수의 범위를 보다 정확하게 표현하고 싶다면 string 타입보다는 문자열 리터럴 타입의 유니온을 사용하자.

• 객체의 속성 이름을 함수 매개변수로 받을 때는 string 보단 keyof T 를 사용하자.

🤢item 34 부정확한 타입보다는 미완성 타입을 사용하기

ts에서 부정확한 타입을 사용하는 것은 코드의 실행 결과를 예측하기 어렵게 만들 수 있다. 따라서 ts에서는 미완성 타입을 사용하여 부정확한 타입보다는 더욱 안정적인 코드를 작성할 수 있다.

미완성 타입은 any나 unknown과 같은 타입이다.

any는 모든 값이 가능한 타입
unknown은 알 수 없는 타입

미완성 타입을 사용하면 컴파일러가 해당 값의 타입을 추론하지 못할 때 경고를 표시하므로 코드의 안정성을 보장할 수 있다.

예를 들어, any 타입을 사용하면 해당 변수나 값이 어떤 타입인지 알 수 없기 때문에 예상치 못한 동작이 발생할 가능성이 있고 반면에 unknown 타입을 사용하면 해당 변수나 값이 알 수 없는 타입이지만, 타입 체크를 통해 안전하게 사용할 수 있다.

또한, 미완성 타입을 사용하면 코드를 작성하는 동안 ts에서 제공하는 IntelliSense 기능을 활용하여 코드 작성을 도와준다. IntelliSense는 해당 변수나 값이 가지는 속성과 메서드를 자동으로 추론하여 제공하기 때문에 더욱 편리하게 코드를 작성할 수 있다.

따라서, 부정확한 타입보다는 미완성 타입을 사용하여 더욱 안정적인 코드를 작성하는 것이 좋다.

-요약-

• 타입이 없는 것보단 잘못된 것이 더 나쁘다.

• 정확하게 타입을 모델링할 수 없다면, 부정확하게 모델링하지 말아야 한다. 또한 any와 unknown을 구별해서 사용해야 한다.

• 타입 정보를 구체적으로 만들수록 오류 메시지와 자동 완성 기능에 주의를 기울여야 한다.

🐺item 35 데이터가 아닌, API와 명세를 보고 타입 만들기

명세를 참고해 타입을 생성하는 것이 사용자가 실수를 줄일 수 있게 도와준다. 데이터를 사용해 타입을 생성하면 눈앞에 있는 데이터만 참고하기 때문에 예기치 않은 곳에서 오류가 발생할 수 있다.

ts에서 API와 명세를 보고 타입을 만드는 것은 API 요청과 응답에 사용되는 데이터 형식과 구조를 정확히 파악하여 코드 안정성과 가독성을 높이는 방법이다.

API와 명세를 보면 보통 JSON 형식의 데이터가 포함되어 있다. 이 JSON 데이터를 기반으로 ts에서 해당 데이터를 처리하는 코드를 작성할 수 있다.

먼저, API 요청과 응답의 데이터 형식을 정확하게 파악해야한다. 이때, API 문서를 참고하여 요청과 응답의 JSON 데이터 스키마를 파악한다. 스키마는 데이터의 형식과 구조를 정의하는데, 이를 기반으로 타입을 만들게 됩니다.
(스키마(Schema)란 데이터의 형식과 구조를 정의하는 데 사용되는 문서나 파일이다. 스키마는 데이터베이스, API, JSON 등 다양한 데이터 형식에서 사용된다.)

ts에서는 이러한 JSON 스키마를 기반으로 인터페이스(Interface)나 타입(Type)을 정의할 수 있다. 예를 들어, 다음과 같은 JSON 스키마가 있다고 가정해보면

{
  "name": "Park",
  "age": 29,
  "email": "Park@example.com"
}

이 JSON 스키마를 기반으로 타입을 만들려면 다음과 같이 인터페이스를 작성할 수 있다.

interface User {
  name: string;
  age: number;
  email: string;
}

이렇게 정의된 User 인터페이스는 API 요청과 응답에 사용되는 데이터의 형식과 구조를 정확히 파악하여 코드 안정성과 가독성을 높일 수 있다. 또한, 이를 기반으로 ts에서 자동 완성과 타입 체크 등의 IntelliSense 기능을 제공하기 때문에 코드 작성을 더욱 편리하게 할 수 있다.

-요약-

• 코드의 안전성을 얻기 위해서는 api 또는 데이터 형식에 대한 타입 생성을 고려해야 한다.

• 데이터에 드러나지 않는 예외적인 경우가 문제가 될 수 있기 때문에 데이터보단 명세로부터 코드를 생성하는 것이 좋다.