[TypeScript-07] Import, Generic

Comely·2025년 6월 6일

TypeScript

목록 보기
7/9

1. Import/Export 기본 문법

변수와 함수 내보내기/가져오기

a.ts (내보내는 파일)

export var 이름 = 'kim';
export var 나이 = 30;

b.ts (가져오는 파일)

import {이름, 나이} from './a';
console.log(이름);  // 'kim'

핵심 규칙:

  • export: 다른 파일에서 사용할 수 있도록 내보내기
  • import: 다른 파일에서 내보낸 것을 가져오기
  • 파일 경로는 ./로 시작 (현재 경로)
  • .ts 확장자는 생략

전체 가져오기

import * from './a';  // a.ts의 모든 export를 가져옴
console.log(이름);
console.log(나이);

타입 내보내기/가져오기

a.ts

export type Name = string | boolean;
export type Age = (a: number) => number;

b.ts

import {Name, Age} from './a';

let 이름: Name = 'kim';
let 함수: Age = (a) => { return a + 10 };

로컬 타입: export를 붙이지 않으면 해당 파일에서만 사용 가능

2. Namespace (구버전 방식)

기본 문법

타입스크립트 1.5 이전에 사용되던 방식. 타입명 중복을 방지

a.ts

namespace MyNamespace {
  export interface PersonInterface { age: number };
  export type NameType = number | string;
}

b.ts

/// <reference path="./a.ts" />

let 이름: MyNamespace.NameType = '민수';
let 나이: MyNamespace.PersonInterface = { age: 10 };

특징:

  • /// <reference path=""/> 태그로 파일 연결
  • 네임스페이스명.타입명 형식으로 사용
  • 타입명 중복 문제 해결

Generic 타입

1. Generic이 필요한 이유

문제 상황

function 함수(x: unknown[]) {
  return x[0];  // return 타입이 unknown
}

let a = 함수([4, 2]);
console.log(a + 1);  // 에러! unknown 타입이라 연산 불가

문제점: TypeScript는 타입을 자동으로 변경해주지 않음

2. Generic 기본 문법

함수에 Generic 적용

function 함수<MyType>(x: MyType[]): MyType {
  return x[0];
}

let a = 함수<number>([4, 2]);     // a는 number 타입
let b = 함수<string>(['kim', 'park']);  // b는 string 타입

동작 원리:

  • <MyType>: 타입 파라미터 정의
  • 함수<number>(): 사용 시 타입 지정
  • MyType 자리에 입력한 타입이 대입됨

타입 추론

let a = 함수([4, 2]);  // <number> 생략 가능, 자동으로 타입 추론

3. Generic 제약 조건 (Constraints)

extends로 타입 제한

function 함수<MyType extends number>(x: MyType) {
  return x - 1;  // number 타입만 허용하므로 연산 가능
}

let a = 함수<number>(100);  // 성공

커스텀 타입으로 제한

interface lengthCheck {
  length: number;
}

function 함수<MyType extends lengthCheck>(x: MyType) {
  return x.length;  // length 속성이 있는 타입만 허용
}

let a = 함수<string>('hello');    // 성공 (string에 length 있음)
let b = 함수<number>(1234);       // 에러 (number에 length 없음)

4. 다양한 활용법

Class에서 Generic

class Person<T> {
  name: T;
  constructor(a: T) {
    this.name = a;
  }
}

let a = new Person<string>('어쩌구');  // name이 string 타입

Type에서 Generic

type Age<MyType> = MyType;

5. 실무 예제

숙제 1: 문자/배열 길이 측정 함수

function 함수<MyType extends string | string[]>(x: MyType) {
  console.log(x.length);
}

함수<string>('hello');           // 5 출력
함수<string[]>(['kim', 'park']); // 2 출력

숙제 2: JSON 파싱 함수

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

function 함수<Type>(x: string): Type {
  return JSON.parse(x);
}

let data = '{"name": "dog", "age": 1}';
let result = 함수<Animal>(data);  // Animal 타입으로 변환

숙제 3: 타입 중복 해결 (Namespace)

namespace GoodDog {
  export type Dog = string;
}

namespace BadDog {
  export interface Dog { name: string };
}

let dog1: GoodDog.Dog = 'bark';
let dog2: BadDog.Dog = { name: 'paw' };

정리

Import/Export

  • 목적: 파일 간 코드 재사용
  • 방법: export로 내보내고 import로 가져오기
  • 타입도 동일하게 적용 가능

Generic

  • 목적: 타입을 파라미터처럼 전달하여 재사용성 높이기
  • 방법: <타입파라미터> 문법 사용
  • 제약: extends로 허용할 타입 범위 제한 가능
profile
App, Web Developer

0개의 댓글