[TypeScript] 타입스크립트 고급 타입(Advanced Types)

고급 타입(Advanced Types)

타입스크립트의 타입 일관성을 더 효율적으로 지키기 위해서 

타입스크립트에서 지원하는 고급 타입을 알아두면 좋습니다. 

타입스크립트는 다음과 같은 고급 타입을 가지고 있습니다.

---

고급 타입 종류

• 인터페이스 병합(Declaration Merging)
• 숫자 구분자(Numeric Separators)
• 화살표 함수(Arrow Function)
• function this (함수에서 this 사용)
• 옵셔널 프로퍼티(Optional Properties)
• 옵셔널 체이닝(Optional Chaining)
• 데이터 타입 확인하기(typeof)

---

인터페이스 병합(Declaration Merging)

선언 합침 = 선언 머징 = declaration merging

같은 이름으로 여러 인터페이스를 선언할 수 있습니다. 
이러면 모든 Merge 인터페이스가 하나로 합쳐집니다. 

이를 선언 병합(declaration merging)이라고 부릅니다. 

interface Person { 
 name: string;
}

interface Person{
 age : number;
}

const person: Person = {
 name: "",
 age: 27,
};

interface A{ A():void; }
interface A{ B():void; }
class C implements A{
    A(): void{}
    B(): void{}
}

 

 

숫자 구분자(Numeric Separators)

numeric separators는 ES12(ES2021)에 추가된 최신 문법입니다. 

numeric separators는 숫자 단위를 간편하게 구분할 수 있게 해주는 문법입니다. 

 

넣고 싶은 숫자 구분 단위에 언더바를 삽입하기만 하면 됩니다.

사용은 언더바_로 합니다.

const BILLION = 1000000000;  //기존의 숫자 표기, 10억
const NEW_BILLION = 1_000_000_000; // numeric separators를 사용한 10억

// 100_000_000_000
// 1000_0000_0000
// 1.000_000_000_00

 

 

화살표 함수(Arrow Function) (람다 함수)

ES6부터 식(Expression)에 한해 화살표 함수식을 활용할 수 있습니다.

TypeScript 또한 화살표 함수식을 사용할 수 있고,

더 나아가 매개변수, 리턴 타입을 명시적으로 선언해

컴파일 과정에서 타입 검사를 수행해 사전에 문제를 방지할 수 있습니다.

 

화살표 함수는 function 함수지정 키워드를 사용하지 않고
변수에 함수를 저장할 수 있는 "익명함수" 기능을 제공하는 독특한 문법이다.
만일 화살표함수가 저장된 변수를 다른 값으로 초기화한다면 함수는 즉시 사라지게 된다.

 

📌 구성요소 간략화

       1. 화살표 함수도 매개변수가 없을 경우엔 파라미터 괄호() 내부를 비워준다.

       2. 표현식이 하나이며 즉시 반환되는 경우엔 {}와 return을 생략하여 간단하게 나타낼 수 있다.

 

📝 화살표함수 형태

const 함수변수명 = (매개변수명1 : 자료형1, 매개변수명2 : 자료형2[, ...]): 반환자료형 => {
              처리구문
}

// → 화살표함수를 만들 때 주의할 사항과 그에 따른 작성법의 변화
()=>{}                      // ▶ 매개변수 0개 리턴값 X

// → 코드가 여러줄일 필요 없이 return 줄 한줄만 있을 예정이라면 return도 적을 필요가 없겠다.
(a:number)=>0;              // ▶ 매개변수 1개 리턴값 O

// → 화살표 함수의 결과값 타입은 자료형 추측
(a:number)=>{ return 3; }   // ▶ 매개변수 1개 리턴값 O

 

사용예시

const arrow1 = (a: number, b: number): number => { return a + b } // 실행문 방식 몸통
const arrow2 = (a: number, b: number): number => a + b		  // 표현식 문 방식 몸통

 

 

function this (함수에서 this 사용)

화살표 함수 내부의 this : 생성된 객체를 가리킴
function 내부의 this : 호출 시 결정됨. (호출한 곳이 this를 가리킴)

그래서 화살표함수가 아닌 function으로 선언한 함수의 경우, 

해당 객체 내 this가 있다면 호출시 this가 달라지므로 에러가 발생한다. 

이 경우에 this:void 로 명시를 해주거나, 화살표 함수로 변경한다.

let w:any = {
    name: 'abcd',
    B(){
        console.log(this.name);
    },
    X:()=>{ // 화살표함수에서는 this 못쓴다.
        // console.log(this.name); // window 객체를 가르킨다.
    }
};

w.B();  // abcd

 

 

옵셔널 프로퍼티(Optional Properties) ➡️ ?

속성을 정의할 때 사용할 수 있습니다.
해당 속성의 값이 있어도 되고 없어도 선택적으로 받을 수 있습니다.

속성 이름 뒤에 물음표(?)를 추가

필수적으로 존재하지 않아도 되는 속성

 

chairman 프로퍼티명 뒤에 물음표(?)를 추가합니다. 

그러면, ICompanyInfo 인터페이스를 타입으로 하는 

객체를 생성할 때, chairman 프로퍼티의 값을 생략할 수 있습니다.

interface ICompanyInfo {
  name: string;
  chairman?: string;
}

let obj: ICompanyInfo = {
  name: 'FaceBook'
};

 

 

옵셔널 체이닝(Optional Chaining) ➡️ ?.

일반적으로 속성접근자(.)를 이용하여 속성의 값을 가져올 수 있습니다.
하지만 속성이 없을 경우에 오류가 발생합니다.

옵셔널 체이닝은 프로퍼티의 타입이 null 또는 undefined가 올 수 있는 경우 사용됩니다.

?.는 null과 undefined만 체크한다.

• 객체 접근 : obj?.name obj가 ➡️ null, undefined가 아니면 / name을 리턴
• 배열 접근 : arr?.[0] arr이 ➡️ null, undefined가 아니면 / 첫 번째 요소를 리턴
• 함수 호출 : func?.() 함수 func이 ➡️ null, undefined가 / 아니면 func 함수 호출

type K = {
    name:string
}

type G = {
    target?:K
}

let t: G = {

}
// 값을 안넣을 수도 있기 때문에 오류 난다.
// t.target.name

// Optional Properties를 이용할 때 빈 공간 참조를 해결하기 위해서
// 옵셔널 체이닝(Optional Chaining)이 나왔다.
// undefined == null 에러를 띄우지 않고 대신 undefined가 나오게 하는 기능
console.log(t.target?.name);    // undefined

 

 

타입 가드(Type Guards) ➡️ 데이터 타입 확인하기(typeof)

타입 가드는 타입의 범위를 좁혀주는 기능입니다. 

이를 통해 유니온 타입 등에서 해당 타입으로 좁힐 수 있습니다. 

예를 들어, 아래와 같이 typeof 연산자를 이용하여 타입 가드를 작성할 수 있습니다.

 

typeof는 값, 변수 또는 표현식의 타입을 반환하는 연산자입니다. 

종종 keyof와 함께 사용하여 타입의 키를 가져오는 데 사용됩니다.

 

number, string, boolean, symbol 타입의 경우 

if문과 tpyeof를 이용하여 특정 타입을 지정해 줄 수 있습니다.

function printID(id: string | number) {
  if (typeof id === "string") {
    console.log(id.toUpperCase());
  } else {
    console.log(id.toFixed(2));
  }
}

printID("123"); // 출력: "123"
printID(456);   // 출력: "456.00"

console.log(typeof 1);                  // number
console.log(typeof '1');                // string
console.log(typeof 1.1);                // number
console.log(typeof function A(){});     // function

 

---