[ Typescript ] 타입스크립트의 타입에 대해 알아보자.

• kyounghwan님의 GitHub.io

Guide | 기억보다 기록을

 

 

⚠️ any 타입은 어떠한 값들이든 받을 수 있다고 선언되는데, any를 중구난방으로 사용할 경우, VanillaJS와 다른 점이 없으므로 any 타입의 선언은 하지 않는 것을 길들이자.

 

작성자는 프로젝트를 진행하면서 type을 위주로 쓴다.

그 이유는,

interface 정의 후 마우스를 호버하여 확인하려고 하면 타입 종류를 바로 확인 할 수 없는 반면,

 

 

type 정의 후, 마우스 호버 시 타입을 바로 확인 가능하기 때문이다.

 

🤔 타입 추론

타입스크립트 는 변수를 선언하거나, 값을 할당 할 때 추론이 일어난다.

const a = 1;

사람이 보았을 때, "a에는 숫자가 들어가는 변수구나~" 하는 거 처럼

타입스크립트는 a를 number 타입이라는 것을 추론한다.

 

함수를 선언할 때에도 마찬가지이다.

파라미터에 기본값을 넣으면 추론이 일어난다.

const fx = (a=10) => {
  return a;
}

파라미터에 기본값을 선언함으로 a는 number라는 추론이 일어난다.

 

🤔 인터페이스 추론

interface User<T> {
  name: string;
  age: number;
  address: T;
}

interface UserIdentityCard<K> extends User<K> {
  id: K
  // 위에 User<T> 타입을 그대로 적용
  // name: string;
  // age: number;
  // address: K
} 

const 홍길동: User<string> = {
  name: "홍길동",
  age: 29,
  address: "Chosun"
}

const 홍길동민증: UserIdentityCard<string> = {
  id: "139200-191000",
  name: "홍길동",
  age: 29,
  address: "Chosun"
}

제네릭값에 따라서 입력된 string 값이 적용된다.

 

🤔 Best Common Type 추론

배열 안에 여러 타입이 정의된 경우 추론은 유니온 타입으로 정의된다.

const arr = [1, true, "a"];

해당 arr는 Array<number | boolean | string> 혹은 (number | boolean | string)[] 으로 추론된다.

 

추론은 작은 변수에 개발자가 타입을 정의할 수고를 덜어준다.

 

🖐🏻 타입 단언 (Type Assertion)

타입스크립트에서 추론하는 값보다 개발자가 해당 변수 타입을 더 잘 알고있을 때 변수에 원하는 타입을 강제로 부여한다.

 

let a;
a = "Hello, World!"
a = 10;
let b = a;
// 이때 타입스크립트는 a가 어떠한 값이 담길 변수인지 정확히 인지하지 못하여 any로 추론한다.
// 즉 b도 any 타입으로 추론을 하게 되는데.
// 우리는 b에 number임을 알기에 number를 강제로 Assertion한다.
b = a as number;

as <T> 를 통하여 해당 값이 number타입임을 타입스크립트에게 알려준다.

간혹 개발하다 추론에 실패하여 오류가 발생할 때 as <T> 를 통하여 린팅 오류를 해결한다.

 

DOM에 접근할 때 가장 많이 사용된다.

import { useEffect } from 'react'

function Home() {
  
  useEffect(() => {
    // 마운트된 DOM이 아니라면 useEffect를 통해 마운트 된 다음 DOM을 찾아주자
    
    // ⚠️ Type1. id값으로 찾은 Element가 없을 수 있다는 오류
    const box = document.getElementybyId("box");
    box.innerText = "content"; // error: Object is possible null;
   
    // ✅ Type2. 조건문을 통하여 Element가 존재할 때 작업
    const box = document.getElementybyId("box");
    if(box) {
      box.innerText = "content";
    }
   
    // ✅ Type3. box가 마운트 된 후, 무조건 존재한다는 상황임을 알림
    const box = document.getElementybyId("box") as HTMLDivElement;
    box.innerText = "content";
   
  }, [])

  return <div id="box"></div>
}

 

🛡️ 타입 가드 (Type Guard)

함수의 파라미터로 유니온 타입이 지정된 경우 타입이 2개 이상임으로 공통되는 속성만 사용이 가능하다.

type NPC = {
  name: string;
  gender: "M" | "F";
  
}

type User = {
  name: string;
  gender: "M" | "F";
  skill: string[];
}

function getInstance(): NPC | User {
  return { name: "개발자", gender: "M", skill: ['ctrl-C', 'ctrl-V'] };
}


const dev = getInstacne(); // NPC |  User의 공통된 속성만 사용 가능. (or 연산자)
// dev 객체에 접근하기 위해 .을 찍으면
// intellgence 공통인 name과 gender만 표시.

// skill을 사용하고 싶은 경우, Assertion을 사용한 경우
if ((dev as User).skill) {
  console.log((dev as User).skill);
} else {
  console.log('얘 NPC네');
}

// 타입 가드 정의
function getInstanceWithGuard(target: NPC | User): target is User {
  return (target as User).skill !== undefined
}

if(getInstanceWithGuard(dev)) {
  console.log(dev.skill)
} else {
  console.log('얘 NPC라고');
}

 

---

🎭 기본 타입

⭕❌ boolean

const bool: boolean = true; // true or false

 

🔢 number

// 정수, 실수 모두 number로 표기
const naturalNumber: number = 100;
const integer = 0.123;

 

 

👻 null / undefined

const a: null = null;
const b: undefined = undefined;

 

---

☠️ Object

// 필수
const required: { name: string; age: number } = { name: 'dev', age: 29 };

// 필수 속성이지만 바로 정의하고 싶지 않은 경우
const required = {} as { name: string; age:number };

// 선택
const optional: {name: string; age?: number } = { name: 'dev' };

// (Partial) 필수 속성으로 정의된 인터페이스를 선택 속성으로
const partial: Partial<{name: string; age: number }> = {};

// 읽기 전용 ReadOnly
// readonly.name = "junior" 로 재할당 불가
const readonly: {readOnly name: string} = { name: 'dev' };

// Empty Object 타입
const emptyObject: Recored<string, never> = {};

 

🚂 Array

// string 타입만 받는 배열
const onlyString: string[] = ["a", "b"];
const onlyArrayString: Array<string> = ["a", "b"];

// number 타입만 받는 배열
const onlyNumber: number[] = [1, 2];
const onlyArrayNumber: Array<number> = [1, 2];

 

🚂 Tuble

배열의 길이가 고정되고, 각 요소의 타입이 지정되어 있는 배열 형식이다.

const tuple: [string, number] = ["str", 10];

 

🎎 Enum

상수의 집합으로, HTML의 option 태그 같이 어떠한 종류에 대한 지정된 타입이 들어올 경우 틀린 상수 값이 들어오는 것을 막기 위하여 Enum으로 상수의 집합을 만들고, 그 이외의 값은 받지 않는다.

enum ColorPalette {
  Red: "red",
  Green: "green",
  Blue: "blue"
}

const color: ColorPalette = ColorPlatte.Red;

 

🤷🏻‍♂️ any

말 그대로 어떠한 타입이든 허용한다. 자바스크립트로 된 파일을 타입스크립트로 바꿀 겨우 한 번에 데이터를 정적 타입으로 바꾸는 것이 어렵기에 천천히 타입을 적용하기 위해 일단 모든 데이터에 any를 적용 후, 점진적으로 타입으로 값을 적용.

⚠️타입스크립트로 프로젝트를 시작할 때는 사용하지 않도록 한다.

const anyType: any = ["any", "body~", 123, true];

 

👻 void

변수에는 undefined, null만 할당 가능하고, 함수에는 return 값이 없을 경우 설정하는 타입이다.

const unuseData: void = undefined;

const notReturnValue(): void {
  console.log('반환 없음');
}

 

🔁 never

해당 함수의 맨 마지막까지 도달하지 않는다는 타입으로 절대 발생하지 않는 값으로 에러 핸들링 함수에서 사용한다.

주로 함수의 리턴 타입으로 에러가 발생할 경우 에러를 무시하고 계속 진행시키는 역할을 한다.

또는 대체 불가한 값을 만들 때 사용한다. -> 재할당 불가

// 이 함수는 절대 함수의 끝까지 실행되지 않는다는 의미
const nerverEnd = (): never => {
  while(true) {
    ...
  }
  // 도달하지 않음
}

const errorThrow = (): never => {
  // 에러가 발생한 경우 중지하지 않고 throw 함수 실행
  throw new Error("error");
}

 

🛗 Union

union 타입은 하나의 변수에 여러 타입을 지정할 수 있다.

여러 타입을 지정하고 싶은 경우 " | " 를 사용한다.

let unionType: string | number = "str";
unionType = 123;
unionType = "word";
unionType = true; // error

 

🛗 Union 인터셉션

" | "가 OR 이라면 " & "는 AND 이다.

type User = {
  name: string
  age: number
  gender: 'male' | 'female'
}

type Robot = {
  name: string;
  age: number;
}

const printCommon = (someone: User | Robot) =>{
    console.log(someone.name);
    // 공통으로 정의된 내용만 허용
}

const printDiff = (someone: User & Robot) =>{
  console.log(someone.gender)
  // 두 타입의 모든 내용을 허용
}

 

🛡️ union Type Guard

여러 타입을 사용하면 해당 값의 타입에 따라 분기 처리할 때가 발생한다.

이럴 경우 각 타입에 따라 조건문을 만들어주면 된다.

type functionProps = {
  value: string | number;
}

function fx(value: functionProps): number {
  if(typeof value === 'string') {
    return value.length;
  }
  return value;
}

 

📢 declare

전역변수를 만들거나, 📄*.d.ts 를 만들 때 사용한다.

import 할 필요 없이, typescript 프로젝트에게 이러한 타입이 있다고 미리 정의하여 사용한다.

 

지도맵을 그린다고 가정하였을 때,

 

📄type.d.ts

declare function setupMap(config: MapConfig): void;

interface MapConfig {
  lng: number;
  lat: number;
  tileSize: 8 | 16 | 32;
}

 

📄App.tsx

// prev code...

// import 없이 사용 가능
setupMap({
  lng: 10,
  lat: 10,
  tileSize: 8
})

// next code ...

 

---

 

🏭 class protected 변수

protected로 선언된 멤버를 파생된 클래스에서 접근할 수 있다는 점만 제외하면 private 지정자와 매우 유사하다.

//private
class User {
  #name: string;
  //private name: string;

  constructor(name: string) {
    this.#name = name;
  }
  
  getName() {
    return this.#name
  }
}

class Employee extedns User {
  private department: string;
  
  constructor(name: string, department: string) {
    super(name);
    this.department = department;
  }
  
  public intoduce() {
    //❌ Error. 파생된 class에서도 private는 접근 불가
    return `Hello, My name is ${this.name} and I work in ${this.department}.`;
  }
}

const user = new Employee('dev', 'computer');
✅ user.getName();
✅ user.introduce();
❌ user.#name

//protected
class User {
  protected name: string;

  constructor(name: string) {
    this.#name = name;
  }
  
  getName() {
    return this.#name
  }
}

class Employee extedns User {
  private department: string;
  
  constructor(name: string, department: string) {
    super(name);
    this.department = department;
  }
  
  public intoduce() {
    //✅ protected는 상속받아 사용 가능
    return `Hello, My name is ${this.name} and I work in ${this.department}.`;
  }
}

const user = new Employee('dev', 'computer');
✅ user.getName();
✅ user.introduce();
✅ user.name