타임 스크립트 기초

• 타입스크립트란?
• 변수에 타입 지정하기
• 함수에 타입 지정하기
• 객체와 타입 정의 (type)
• 배열과 튜플
• 유니언 타입과 타입 가드
• 인터페이스 (interface)
• 타입스크립트와 웹3 연동
• 마무리
• 타입 어서션
• 타입 엘리어스
• 타입 클래스 수정자 , 전략 패턴 

 

타입스크립트(TypeScript) 기초 정리

Solidity와 연동되는 프론트엔드를 만들다 보면 자바스크립트만으로는 타입 안정성 확보가 어렵다는 걸 자주 느끼게 된다. 특히 블록체인처럼 데이터 구조가 명확해야 하는 분야에서는 타입이 중요하다. 그래서 타입스크립트를 함께 배우는 것이 좋다. 이 글에서는 타입스크립트의 가장 기본적인 개념들을 간단하게 정리해본다.

---

타입 시스템

타입스크립트는 자바스크립트에 **정적 타입(type)**을 추가한 언어다. 코드를 작성할 때 변수, 함수의 매개변수, 반환값 등에 타입을 명시할 수 있어서, 런타임 에러를 줄이고 코드를 더 안전하게 만들 수 있다.

let name: string = "Alice";
let age: number = 25;
let isActive: boolean = true;

위처럼 변수 선언 시 :타입을 붙여 사용한다. 타입을 지정하지 않아도 타입스크립트는 자동으로 추론하지만, 명시적으로 선언하면 더 안전하다.

 

함수에 타입 지정

함수를 선언할 때도 매개변수와 반환값에 타입을 붙일 수 있다.

함수의 매개변수 a, b는 숫자 타입이고, 이 함수는 숫자를 반환한다. 타입이 일치하지 않으면 컴파일 단계에서 오류를 알려주기 때문에 디버깅이 쉬워진다.

function add(a: number, b: number): number {
  return a + b;
}

객체와 타입

객체를 사용할 때는 미리 객체의 구조를 타입으로 정의하면 좋다.

type User = {
  id: number;
  name: string;
  isAdmin: boolean;
};

const user: User = {
  id: 1,
  name: "Bob",
  isAdmin: false,
};

이렇게 타입을 정의해두면, 오타나 누락된 속성으로 인한 오류를 방지할 수 있다. 스마트컨트랙트에서 받아온 데이터를 구조화할 때 매우 유용하다.

 

배열과 튜플

배열에도 타입을 명시할 수 있다.

let scores: number[] = [100, 90, 85];

또한 고정된 형태의 배열은 튜플로 표현할 수 있다.

let position: [number, number] = [10, 20];

튜플은 위치마다 타입이 고정되기 때문에 스마트컨트랙트에서 구조화된 데이터를 처리할 때 자주 쓰인다.

 

유니언 타입과 타입 가드

유니언 타입은 하나 이상의 타입을 허용할 수 있게 해준다.

let value: string | number;
value = "hello";
value = 123;

값의 타입을 체크하면서 다르게 처리하고 싶다면 typeof 같은 타입 가드를 사용할 수 있다.

 

인터페이스

interface는 객체의 구조를 정의하는 또 다른 방법이다. 주로 외부 라이브러리나 스마트컨트랙트에서 받은 데이터 구조를 명확하게 정의할 때 쓴다.

interface TokenInfo {
  symbol: string;
  decimals: number;
}

const token: TokenInfo = {
  symbol: "USDC",
  decimals: 6,
};

 

타입스크립트와 웹3

스마트컨트랙트를 프론트엔드에서 호출할 때, 예를 들어 ethers.js나 web3.js를 사용할 경우, 타입스크립트를 쓰면 계약 주소, 메서드, 반환값 등을 명확하게 다룰 수 있다. ABI를 기반으로 자동 생성된 타입을 활용하면 실수를 줄이고 안정적인 개발이 가능하다.

 

타입 어서션

타입 어서션은 TypeScript에서 개발자가 직접 "이 변수는 특정 타입이다"라고 단언하는 방식이다. 예를 들어 DOM 요소를 가져올 때처럼 타입을 명확하게 알려줄 수 없는 상황에서 유용하게 사용된다. 코드에서 as 키워드를 사용하여 타입을 명시하면, 컴파일러는 해당 타입으로 취급하게 된다. 단, 실제 값이 그 타입이라고 보장할 수 있어야 하며, 잘못된 어서션은 런타임 오류를 일으킬 수 있다.

const el = document.getElementById('box') as HTMLDivElement;
el.style.backgroundColor = 'blue';

 

타입 엘리어스

타입 앨리어스는 복잡한 타입을 간단한 이름으로 정의해 재사용할 수 있도록 해주는 기능이다. 특히 객체 타입이나 유니온 타입처럼 자주 쓰는 복합 구조를 한 번만 선언하고, 여러 곳에서 간편하게 활용할 수 있게 해준다. 코드의 가독성을 높이고 유지보수를 쉽게 만들어주는 장점이 있다.

type User = {
  id: number;
  name: string;
};

const getUser = (user: User) => {
  console.log(user.name);
};

 

타입 클래스 수정자

클래스 수정자는 TypeScript에서 클래스의 속성과 메서드의 접근 범위를 제어할 때 사용한다. 대표적으로 public, private, protected, readonly가 있다. public은 어디서나 접근이 가능하며, private는 해당 클래스 내부에서만 접근할 수 있다. protected는 클래스 자신과 자식 클래스에서만 접근할 수 있고, readonly는 값을 오직 읽기 전용으로 제한한다. 이처럼 수정자는 객체지향에서 캡슐화와 정보 은닉을 도와준다.

class Person {
  public name: string;
  private age: number;
  protected address: string;
  readonly id: number;

  constructor(name: string, age: number, address: string, id: number) {
    this.name = name;
    this.age = age;
    this.address = address;
    this.id = id;
  }
  }

 

전략 패턴 

전략 패턴은 객체의 행위를 동적으로 바꿀 수 있도록 하는 디자인 패턴이다. 핵심 아이디어는 알고리즘(전략)을 인터페이스로 정의하고, 각각의 구현을 독립적인 클래스로 분리하여 상황에 따라 전략을 교체할 수 있게 만드는 것이다. 주로 복잡한 조건문을 줄이고, 기능을 유연하게 구성할 때 사용한다. 예를 들어 결제 방식(카드, 페이, 현금 등)을 전략으로 정의하면, 런타임에 필요한 전략을 바꿔 끼우는 식으로 유연한 설계가 가능하다.

interface PaymentStrategy {
  pay(amount: number): void;
}

class CardPayment implements PaymentStrategy {
  pay(amount: number) {
    console.log(`${amount}원을 카드로 결제했습니다.`);
  }
}

class CashPayment implements PaymentStrategy {
  pay(amount: number) {
    console.log(`${amount}원을 현금으로 결제했습니다.`);
  }
}

class PaymentContext {
  constructor(private strategy: PaymentStrategy) {}

  setStrategy(strategy: PaymentStrategy) {
    this.strategy = strategy;
  }

  checkout(amount: number) {
    this.strategy.pay(amount);
  }
}

const payment = new PaymentContext(new CardPayment());
payment.checkout(10000); // 카드 결제
payment.setStrategy(new CashPayment());
payment.checkout(5000); // 현금 결제

마무리

Solidity로 스마트컨트랙트를 작성하고 프론트에서 그 결과를 다루는 구조에서는 타입스크립트의 정적 타입 지정이 큰 도움이 된다. API 응답값, 트랜잭션 결과, 유저 입력 등을 타입으로 명확히 구분하면 코드의 가독성과 안정성이 향상된다. 앞으로 스마트컨트랙트와 연동되는 리액트 환경에서 타입스크립트를 적극 활용해보자.