[TS] 2. Usage

📣  Module

✔️ 모듈은 전역 변수과 구분되는 자체 유효 범위를 가지며 export, import와 같은 키워드 없이는 다른 파일에서 접근할 수 없다.

 

📣  Export, Import

✔️ ES6의 export와 같은 방식으로 변수, 함수, 타입, 인터페이스 등에 붙여 사용한다.

➕ JS ES6 문법

➰ 2015년에 출시된 ECMAScript, 자바스크립트의 표준

➰ let, const 키워드 추가

➰ 템플릿 리터럴, 객체 리터럴, 화살표 함수 등이 추가 된 문법

// math.ts
export interface Triangle {
	width: number;
    height: number;
}

// index.ts
import { Triangle } from './math.ts';

class SomeTriangle implements Triangle {
	//...
}

import { WheatBeerClass } from './index.ts';

class Cloud extends WheatBeerClass {
}

➕ Extends VS Implements

✔️ Extends

➰ 상속받고자 하는 부모 클래스를 명시하는 것

➰ 해당 클래스의 프로퍼티와 메서드를 따로 구현하기 않아도 인스턴스에서 자유롭게 사용할 수 있다.

➰ '부모 꺼 맘대로 갖다 쓸 수 있음'

 

✔️ Extends

➰ 미리 추상화 된 인터페이스를 채택하여 사용하는 것

➰ 상속과 다르게 어떤 인터페이스를 채택하면 추상화 된 메서드나 프로퍼티를 반드시 구현해야 한다.

➰ '해당 클래스는 이 인터페이스 모양이니까 반드시 이 조건을 가져야 해'

 

📣  TS는 모듈 코드를 어떻게 변환할까?

✔️ tsconfig.json 파일에 설정한 컴파일러 모드에 따라 모듈 코드가 각기 다르게 변환된다.

# commonjs 모드인 경우
tsc --module commonjs Test.ts

# amd 모드인 경우
tsc --module amd Test.ts

---

📣 d.ts 파일

✔️ 타입스크립트 선언 파일로, 코드의 타입 추론을 돕는 파일

✔️ 기존 JS로 만들어진 써드파티 모듈들을 TS환경에서도 사용할 수 있도록 따로 타입만 정리해서 넣어둔 파일

declare const global = "sth";

➰ 전역 변수로 선언한 변수를 특정 파일에서 import 구문 없이 사용하는 경우 해당 변수를 인식하지 못한다.

➰ 그럴 때, 위처럼 해당 변수를 선언해서 에러가 나지 않게 할 수 있다.

 

✔️ 전역 변수와 전역 함수에 대한 타입 선언

➰ 해당 타입스크립트 파일에서 사용할 순 있지만 선언되어 있지 않은 전역 변수나 전역 함수는 타입을 선언할 수 있다.

// 전역 변수
declare const pi = 3.14;

// 전역 함수
declare namespace myLib {
	function greet(person: string): string;
    let name: string;
}
myLib.greet('캡틴');
myLib.name = '타노스';

 

➕ declare & declare namespace 

✔️ declare 

➰ 타입스크립트 컴파일러에게 특정한 변수가 있다고 선언하는 키워드

➰ 내가 만든 라이브러리의 타입 정보를 외부 사용자에게 알려줄 목적으로 d.ts 파일을 정의할 때 사용한다.

 

✔️ declare namespace

➰ 컴파일러는 namespace로 선언한 TS 코드를 JS 일반 객체로 컴파일 하는데, declare 키워드를 붙여주면 JS 코드로 컴파일을 하지 않는다.

➰ 객체의 타입 정보만 알려주는 역할을 하게 된다.

---

📣  인덱싱

✔️ 배열 요소 접근

interface StringArray {
	[index: number]: string;
}

const arr: StringArray = ['Thor', 'Hulk'];
arr[0];	// 'Thor'

➰ 타입스크립트에서는 인터페이스를 이용해서 인덱싱 타입을 정의할 수 있다.

➰ 배열의 인덱스의 타입은 숫자, 이 인덱스로 특정 요소를 접근했을 때 해당 요소의 타입은 string 이라는 것을 명시했다.

 

✔️ 타입으로 배열 변경 제한하기

interface ReadonlyStringArray {
	readonly [index: number]: string;
}

const arr: ReadonlyStringArray = ['Thor', 'Hulk'];
arr[2] = 'Capt';	//에러!

➰ 배열의 요소를 변경하지 못하게 하려면 readonly를 붙여주어야 한다.

---

📣  유틸리티 타입

✔️ 이미 정의해 놓은 타입을 변환할 때 사용하기 좋은 타입 문법

✔️ 유틸리티 타입을 쓰지 않아도 기존 문법으로 타입을 변화할 수 있지만, 유틸리티 타입을 쓰면 훨씬 더 간결하게 가능하다.

 

📣  자주 사용되는 유틸리티 타입

1️⃣ Partial<Type>

➰ 특정 타입의 부분 집합을 만족하는 타입을 정의할 수 있다.

interface Address {
    email: string;
    address: string;
}

type MayHaveEmail = Partial<Address>;
const me: MayHaveEmail = {};	//가능
const you: MayHaveEmail = { email: 'test@abc.com' };	//가능
const all: MayHaveEmail = { email: 'capt@hero.com', address: 'Pangyo' }; //가능

➰  아무 속성을 가지지 않거나, 하나만 가지거나, 모두 가지는 타입을 정의할 수 있다.

 

2️⃣ Pick<Type, Keys>

➰ 특정 타입에서 몇 개의 속성을 선택하여 타입을 정의할 수 있다.

➰ Type에서 keys의 집합을 선택해 타입을 생성

interface Hero {
    name: string;
    skill: string;
}
const human: Pick<Hero, 'name'> = {
	name: '스킬이 없는 사람',
};

➰ name 속성만 선택해서 정의 가능

 

type HasThen<T> = Pick<Promise<T>, 'then' | 'catch'>;
let hasThen: HasThen<Number> = Promise.resolve(4);
hasThen.then	//위에서 'then'만 선택하면 'then'만 제공, 'catch' 선택하면 'catch'만 제공

➰ 타입스크립트에서 Promise는 위처럼 제네릭 클래스 형태로 사용한다.

 

3️⃣ Omit<Type, Keys>

➰ 특정 타입에서 지정된 속성만 제거한 타입을 정의해 준다.

➰ Type에서 모든 프로퍼티를 선택하고 keys를 제거한 타입을 생성 

interface AddressBook {
    name: string;
    phone: number;
    address: string;
    company: string;
}
const phoneBook: Omit<AddressBook, 'address'> = {
    name: '재택근무',
    phone: 123422223333,
    company: '내 방'
}
const chingtao: Omit<AddressBook, 'address'|'company'> = {
    name: '중국집',
    phone: 44455556666
}

---

📣  맵드 타입(Mapped Type)

✔️ 기존에 정의되어 있는 타입을 새로운 타입으로 변환해 주는 문법을 의미한다.

✔️ 마치 JS의 map() API 함수를 타입에 적용한 것과 같은 효과를 가진다.

✔️ 맵드 타입의 기본 문법

➰ 자바스크립트의 map 함수를 타입에 적용했다고 보면 된다.

{ [ P in K ] : T }
{ [ P in K ] ? : T }
{ readonly [ P in K ] : T }
{ readonly [ P in K ] ? : T }

 

✔️ 맵드 타입의 기본 예제

type Heroes = 'Hulk' | 'Thor' | 'Capt';

➰ 헐크, 토르, 캡틴을 유니온 타입으로 묶어주는 Heroes 타입

➰ 세 영웅의 이름에 각각 나이까지 붙인 객체를 만들고 싶다면?

type HeroProfiles = { [K in Heroes]: number );
const heroInfo: HeroProfiles = {
    Hulk: 54,
    Thor: 1000,
    Capt: 33,
}

➰ Heroes 타입의 3개의 문자열을 각각 순회하여 number 타입을 값으로 가지는 객체의 키로 정의가 된다.

type HeroProfiles = {
    Hulk: number;
    Thor: number;
    Capt: number;
}

 

✔️ 맵드 타입의 실용 예제1

type Subset<T> = {
    [K in keyof T]? : T[K];
}

➰ 키와 값이 있는 객체를 정의하는 타입을 받아 그 객체의 부분 집합을 만족하는 타입으로 변환해주는 문법

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

const ageOnly: Subset<Person> = { age: 23 };
const nameOnly: Subset<Person> = { name: 'Tony' };
const ironman: Subset<Person> = { age: 23, name: 'Tony' };
const empty: Subset<Person> = {};

 

✔️ 맵드 타입의 실용 예제2

➰ 사용자 프로필을 조회하는 API 함수

interface UserProfile {
    username: string;
    email: string;
    profilePhotoUrl: string;
}

function fetchUserProfile(): UserProfile {
	//...
}

 

 

➰ 프로필의 정보를 수정하는 API

type UserProfileUpdate = {
    [p in keyof UserProfile]?: UserProfile[p]
}