[Typescript] Type

[hochan222]

주제 키워드는

✨Type✨

입니다.

☘️ 하위 주제 키워드

• Interface
• Type
• Union Types
• Intersection Types

⏳스레드에 각 페어당 소요시간 적어주세요!

(ex) holee 90분 소요

[hochan222]

공유하고싶은 자료 & 개인적으로 정리한 블로그 등이 있다면 여기👇👇👇에 댓글로 공유해주세요 😆

[hochan222]

• https://typescript-kr.github.io/pages/basic-types.html
• Do's and Don'ts
• TypeScript 튜플 타입 요리하기
• [April 2020] Epilogue & Session 3. 타입스크립트에게 내 의도를 이해시키는 방법 - 김혜성 님 (난이도: 상)

[hochan222]

• [8월 우아한테크세미나] 우아한 타입스크립트

[damilog]

unknown, any, void, never type

damilog 60분 소요

📚unknown

'이 값은 any 형의 값일 수 있으니 사용하기 전에 반드시 타입 선언여부를 체크하라'는 식의 메시지로서 사용할 때 유용하다. 이는 사용자에게 리턴값을 의심의 여지없이 안전하게 하도록 강요한다.

• unknown type은 typescript 3.0 버전에서 새로 소개된 타입이다.
• any 타입처럼 unknown 타입에는 어떤 타입의 값도 할당할 수 있다.
• any 타입의 값은 어느 타입의 변수에도 할당될 수 있으나, unknown 타입의 값은 any와 unknown 타입을 제외한 타입의 변수에는 할당할 수 없다. 예를 들어 number type의 변수 numberType 에 unknown 타입의 값을 할당하려고 하면 Type 'unknown' is not assignable to type 'number' 라는 컴파일 에러가 난다.
• unknown 타입으로 선언된 변수(Object / Array / Function)는 프로퍼티에 접근할 수 없으며, 메소드를 호출할 수 없으며, 인스턴스를 생성할 수도 없다.
• type 사용에 자유로운 any와 달리 unknown은 type을 좁혀서 사용해야하는 의무가 있기에 any 보다는 unknown을 사용하는 것이 더 안전하게 코딩하는 방법!

let vAny: any = 10;          // We can assign anything to any
let vUnknown: unknown =  10; // We can assign anything to unknown just like any 


let s1: string = vAny;     // Any is assignable to anything 
let s2: string = vUnknown; // Invalid; we can't assign vUnknown to any other type (without an explicit assertion)

vAny.method();     // Ok; anything goes with any
vUnknown.method(); // Not ok; we don't know anything about this variable

📚any

• any 타입은 타입 체킹도 안하고 어떤 타입에도 할당될 수 있는 관대한 타입이다. any 타입은 프로그래밍을 할 때는 편하지만, 버그를 야기할 수도 있다.
• 개발 시 어떤 타입을 할당해야 할지 알지 못하는 경우(외부 라이브러리나 동적 콘텐츠를 사용할 경우)어떤 타입도 할당 가능하도록 any를 사용할 수 있다.
• JavaScript는 기본적으로 변수에 any가 할당된 것과 같다. (자동으로 형 변환이 이루어짐)

📚void

• 어떤걸 출력만 하고 리턴값이 없을 때 자동으로 그 함수는 void로 선언된다.
• 회사 컨벤션에 따라가는 게 좋다.
• 변수에 선언하는 경우는 드물다.

📚never

• 항상 예외를 throw하거나 반환하지 않는 함수 표현식 또는 화살표 함수 표현식의 반환 유형이다.
• 핸들링 할 수 없는 에러를 처리할 때 주로 사용한다.

// Function returning never must not have a reachable end point
function error(message: string): never {
  throw new Error(message);
}
 
// Inferred return type is never
function fail() {
  return error("Something failed");
}
 
// Function returning never must not have a reachable end point
function infiniteLoop(): never {
  while (true) {}
}

Interface vs Type allias

• interface의 거의 모든 기능을 type에서도 사용할 수 있지만, type은 새 프로퍼티를 추가하기 위해 재선언할 수 없지만 interface는 가능하다.
• interface의 경우에는 Object type을 정의할 때만 사용할 수 있고, Primitive type을 rename(alias)하는 용도로 사용할 수 없다.

Type 확장(Interface,Type allias)

• interface는 같은 이름으로 여러 번 선언을 해도 컴파일 시점에서 합쳐지기 때문에 확장성이 좋다. 따라서 일반적으로는 interface를 사용하고 union, tuple 등이 필요한 경우에만 Type allias를 쓰는게 좋다.

1. Interface

interface  Car {
  name: string
}

interface Tesla extends Car {
  fuel: boolean
}

2. Type allias

type Car = {
  name: string
}

type Tesla = Car & { 
  fuel: boolean 
}

[hochan222]

📚void

void는 어떤 타입도 존재할 수 없음을 나타낸다. void를 타입 변수를 선언하는 것은 유용하지 않은데, 왜냐하면 그 변수에는 null(--strictNullChecks을 사용하지 않을 때만 해당)또는 undefined 만 할당할 수 있기 때문이다.

let unusable: void = undefined;
unusable = null; // 성공  `--strictNullChecks` 을 사용하지 않을때만

📚never

never 타입은 모든 타입에 할당 가능한 하위 타입이지만, 어떤 타입도 never에 할당할 수 있거나, 하위 타입이 아니다.

[damilog]

Interface vs Type allias 추가

TypeScript 팀은 개방-폐쇄 원칙에 따라 확장에 열려있는 JavaScript 객체의 동작 방식과 비슷하게 연결하도록 Interface를 설계했다.
그래서 TypeScript 팀은 가능한 Type Alias보단 Interface를 사용하고, union, tuple 등이 필요한 경우에만 Type Alias를 사용하도록 권장하고 있다.

선언적 확장

type은 새로운 속성을 추가하기 위해서 다시 같은 이름으로 선언할 수 없지만, interface는 항상 선언적 확장이 가능하다.

// Interface 확장 가능

interface Person {
  name: string
}
interface Person{
  age: number
}

const coco :Person = {
  name:"coco",
  age:12,
}

// Type 확장 불가능 
//Duplicate identifier 'Book'.

type Book = {
  title: string,
}

type Book = {
  content: string
}

[hochan222]

holee 90분 소요

타입 시스템은 버그를 마술처럼 제거하는게 아니라, 처리되지 않는 조건을 지적하고 이것을 제대로 다루기를 요청합니다.

boolean, number, string, array, tuple, enum, null, undefined, object

📚 boolean

let isDone: boolean = false;

📚 number

JavaScript처럼, TypeScript의 모든 숫자는 부동 소수 값이다. 16진수, 10진수, 2진수, 8진수 리터럴을 지원한다.

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

📚 string

let color: string = "blue";
color = 'red';

let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ fullName }.
I'll be ${ age + 1 } years old next month.`;

📚 array

배열 타입은 두 가지 방법이 존재한다. 배열 요소들을 나타내는 타입 뒤에 []를 쓰는 것과 제네릭 배열 타입을 쓰는 것이다.

let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];

📚 tuple

튜플 타입을 사용하면, 요소의 타입과 개수가 고정된 배열을 표현할 수 있다.

// 튜플 타입으로 선언
let x: [string, number];

// 초기화
x = ["hello", 10]; // 성공

// 잘못된 초기화
x = [10, "hello"]; // 오류

console.log(x[0].substring(1)); // 성공
console.log(x[1].substring(1)); // 오류, 'number'에는 'substring' 이 없습니다.

정해진 인덱스 외에 다른 인덱스에 있는 요소에 접근하면, 오류가 발생하며 실패한다.

x[3] = "world"; // 오류, '[string, number]' 타입에는 프로퍼티 '3'이 없습니다.

console.log(x[5].toString()); // '[string, number]' 타입에는 프로퍼티 '5'가 없습니다.

as const 를 붙이면 튜플이 된다.

const days = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'] as const;

// type Days = 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' | 'sun';
type Days = typeof days[number];

• 일반적인 특징
  • 가장 일반적인 형태는 readonly any
  • 각 인덱스를 통해 타입 추론이 가능하다.
  • Array 인터페이스를 만족하는 객체이기도 하다.
  • 인덱스 타입도 불변이며, 컴파일러가 그 정확한 값을 기억하고 있다.

{
    0: 'Mon',
    1: 'Tue,
    ...
    readonly length: 7  // number가 아닌 7이 들어있음.
}

📚 enum

enum은 값의 집합에 더 나은 이름을 붙여줄 수 있다.

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

기본적으로 enum은 0부터 시작하여 멤버들의 번호를 매긴다. 이를 원하지 않는 경우, 멤버 중 하나의 값을 수동으로 설정하여 번호를 바꿀 수 있다.

enum Color {Red = 1, Green, Blue}
let c: Color = Color.Green;

enum의 유용한 기능 중 하나는 매겨진 값을 사용해 enum 멤버의 이름을 알아낼 수 있다

enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];

console.log(colorName); // 값이 2인 'Green'이 출력됩니다.

📚 null, undefined

undefined 과 null 둘 다 각각 자신의 타입 이름으로 undefined , null로 사용한다. 기본적으로 null 과 undefined는 다른 모든 타입의 하위 타입이여서, 다른 타입에 할당할 수 있다.

// 이 밖에 이 변수들에 할당할 수 있는 값이 없습니다!
let u: undefined = undefined;
let n: null = null;

--strictNullChecks를 사용하면, null과 undefined는 오직 any와 각자 자신들 타입에만 할당 가능하다. (예외적으로 undefined는 void에 할당 가능하다)

📚 object

object는 원시 타입이 아닌 타입이다.

declare function create(o: object | null): void;

create({ prop: 0 }); // 성공
create(null); // 성공

create(42); // 오류
create("string"); // 오류
create(false); // 오류
create(undefined); // 오류

Type assertions (타입 단언)

type assertions은 다른 언어의 타입 변환(형 변환)과 유사하지만, 다른 특별한 검사를 하거나 데이터를 재구성하지는 않는다. 이는 런타임에 영향을 미치지 않으며, 온전히 컴파일러만 이를 사용한다. 타입 스크립트는 개발자가 필요한 어떤 특정 검사를 수행했다고 인지한다.

타입 단언에는 angle-bracket 와 as 문법이 있으며, 어떤 것을 사용할지는 주로 선호에 따른 선택이다. 하지만, TypeScript를 JSX와 함께 사용할 때는 as-스타일의 단언만 허용된다.

let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;
let strLength_: number = (someValue as string).length;

[hochan222]

holee 20분 소요

Union Types

유니언 타입은 여러 타입 중 하나가 될 수 있는 값을 의미한다. 세로 막대 |로 각 타입을 구분하여, number | string | boolean은 값의 타입이 number, string 혹은 boolean이 될 수 있음을 의미한다.

function padLeft(value: string, padding: string | number) {
  // ...
}

공통 필드를 갖는 유니언

유니언 타입인 값이 있으면, 유니언에 있는 모든 타입에 공통인 멤버들에만 접근할 수 있다.

interface Bird {
  fly(): void;
  layEggs(): void;
}

interface Fish {
  swim(): void;
  layEggs(): void;
}

declare function getSmallPet(): Fish | Bird;

let pet = getSmallPet();
pet.layEggs();

// 두 개의 잠재적인 타입 중 하나에서만 사용할 수 있습니다.
pet.swim();

만약 변수가 실제로 런타임에 Fish이면, pet.fly()를 호출하는 것은 오류이다.

유니언 구별하기

리터럴 값을 정해서 switch문을 작성하여 구별할 수 있다.

type NetworkLoadingState = {
  state: "loading";
};

type NetworkFailedState = {
  state: "failed";
  code: number;
};

type NetworkSuccessState = {
  state: "success";
  response: {
    title: string;
    duration: number;
    summary: string;
  };
};

// 위 타입들 중 단 하나를 대표하는 타입을 만들었지만,
// 그것이 무엇에 해당하는지 아직 확실하지 않습니다.  따라서 switch로 state를 확인한뒤 코드를 작성한다.
type NetworkState =
  | NetworkLoadingState
  | NetworkFailedState
  | NetworkSuccessState;

Intersection Types

교차 타입은 여러 타입을 하나로 결합한다. 예를들어, Person & Serializable & Loggable는 세 가지 타입의 모든 멤버를 갖게 된다.

interface ErrorHandling {
  success: boolean;
  error?: { message: string };
}

interface ArtworksData {
  artworks: { title: string }[];
}

interface ArtistsData {
  artists: { name: string }[];
}

// 이 인터페이스들은
// 하나의 에러 핸들링과 자체 데이터로 구성됩니다.

type ArtworksResponse = ArtworksData & ErrorHandling;
type ArtistsResponse = ArtistsData & ErrorHandling;

const handleArtistsResponse = (response: ArtistsResponse) => {
  if (response.error) {
    console.error(response.error.message);
    return;
  }

  console.log(response.artists);
};