JavaScript

타입스크립트(TypeScript) 란?

dev.mk 2024. 11. 24. 15:55
반응형

타입스크립트(TypeScript)란? 

- 타입스크립트(TypeScript)는 마이크로소프트가 개발한 오픈소스 프로그래밍 언어이다. 

- 자바스크립트(JavaScript)의 상위 확장 언어이다. 

- 자바스크립트의 문법을 기반으로 하면서 정적 타입(static type)을 지원하여, 코드를 작성할 때 타입 오류를 사전에 검출할 수 있는 장점이 있다.

- 최신 ECMAScript(ES) 기능을 사용할 수 있으며, 코드가 자바스크립트로 컴파일되어 브라우저나 Node.js 환경에서 실행할 수 있다.

 

타입 안정성: 변수, 함수 등의 데이터 타입을 명시할 수 있어 타입 오류를 컴파일 단계에서 발견할 수 있다.

코드의 안정성과 유지보수성이 크게 향상된다.

 

개발 생산성 향상: 코드 자동 완성, 리팩토링 도구가 강화되어 대규모 프로젝트에서 코드 관리가 쉬워진다.

 

ES6+ 지원: 최신 자바스크립트 문법을 사용할 수 있으며, 구형 브라우저에서도 호환되도록 ES5로 트랜스파일(transpile)할 수 있다.

객체 지향 프로그래밍 지원: 클래스, 인터페이스, 상속 등 객체 지향 프로그래밍(OOP) 기능이 강화되어 보다 구조적인 코딩이 가능하다.

 

 

예제 

test.ts

// 타입을 명시한 변수 선언
let userName: string = "홍길동";
let age: number = 30;
let isActive: boolean = true;

// 함수에 타입 지정
function greet(name: string): string {
  return `Hello, ${name}`;
}

console.log(greet(userName));  // 결과: Hello, 홍길동

// 인터페이스 사용 예제
interface User {
  name: string;
  age: number;
  isActive: boolean;
}

// 객체에 인터페이스 적용
const user: User = {
  name: "김철수",
  age: 25,
  isActive: false
};

// 클래스 사용 예제
class Person {
  name: string;
  age: number;

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

  introduce(): string {
    return `안녕하세요, 저는 ${this.name}이고, ${this.age}살입니다.`;
  }
}

const person = new Person("박영희", 22);
console.log(person.introduce());  // 결과: 안녕하세요, 저는 박영희이고, 22살입니다.

 

 

위의 내용을 js로 컴파일한 결과

 

test.js

// 타입을 명시한 변수 선언
var userName = "홍길동";
var age = 30;
var isActive = true;
// 함수에 타입 지정
function greet(name) {
    return "Hello, ".concat(name);
}
console.log(greet(userName)); // 결과: Hello, 홍길동
// 객체에 인터페이스 적용
var user = {
    name: "김철수",
    age: 25,
    isActive: false
};
// 클래스 사용 예제
var Person = /** @class */ (function () {
    function Person(name, age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype.introduce = function () {
        return "안녕하세요, 저는 ".concat(this.name, "이고, ").concat(this.age, "살입니다.");
    };
    return Person;
}());
var person = new Person("박영희", 22);
console.log(person.introduce()); // 결과: 안녕하세요, 저는 박영희이고, 22살입니다.

 

 

타입스크립트의 핵심 인터페이스 그리고 클래스

 

1. 인터페이스(Interface)

인터페이스는 객체의 구조를 정의하는 타입으로, 객체가 가져야 할 속성과 메서드를 명시할 수 있다.

인터페이스는 주로 코드의 일관성과 명확성을 높이고, 코드 작성 시 타입 검사를 강화하는 데 도움이 된다.

인터페이스의 주요 사용 이유

  • 타입 안정성: 인터페이스를 사용하면 객체가 미리 정의된 구조를 따르게 강제할 수 있다. 타입 오류를 컴파일 단계에서 사전에 발견할 수 있어 코드 안정성이 높아진다.
  • 코드 일관성: 인터페이스를 사용하면 일관된 데이터 구조를 강제할 수 있다. 예를 들어, 여러 곳에서 동일한 데이터 구조가 필요할 때 인터페이스를 정의하고 그 구조를 공유함으로써 일관성을 유지할 수 있다.
  • 유연한 확장성: 인터페이스는 상속을 지원하여 하나의 인터페이스를 확장해 새로운 인터페이스를 만들 수 있다. 이를 통해 코드의 재사용성을 높이고, 기존 구조를 유연하게 확장할 수 있다.

예제

interface Person {
  name: string;
  age: number;
  introduce(): string;
}

const person: Person = {
  name: "홍길동",
  age: 30,
  introduce() {
    return `안녕하세요, 저는 ${this.name}이고, ${this.age}살입니다.`;
  }
};

 

위 예제에서 Person 인터페이스를 정의하고, person 객체가 그 인터페이스 구조를 따르도록 설정했다.

만약 객체에 정의되지 않은 속성을 추가하거나 필요한 속성이 누락되면 타입 오류가 발생한다.

 

 

2. 클래스(Class)

클래스는 객체 지향 프로그래밍(OOP)의 기본 요소로, 상태와 동작을 캡슐화한 객체를 생성하기 위한 청사진 역할을 한다. TypeScript는 클래스 기반 프로그래밍을 지원하여, 자바스크립트보다 객체 지향적 패턴을 쉽게 사용할 수 있다.

클래스의 주요 사용 이유

  • 캡슐화: 클래스는 데이터(속성)와 메서드(기능)를 하나의 단위로 묶어 캡슐화할 수 있다. 이렇게 하면 객체의 내부 상태를 보호하고, 외부에서 접근할 수 있는 부분을 제한하여 코드의 안정성을 높일 수 있다.
  • 재사용성: 클래스는 인스턴스를 생성하여 동일한 구조와 동작을 갖는 객체를 여러 개 만들 수 있다. 이를 통해 코드 재사용이 용이하며, 유지 보수가 편리해진다.
  • 상속과 다형성: 클래스를 사용하면 상속을 통해 기존 클래스를 확장할 수 있고, 여러 클래스가 동일한 인터페이스를 구현하여 다형성을 제공할 수 있다. 이를 통해 유연하고 확장 가능한 구조를 설계할 수 있다.

예제

class PersonClass {
  name: string;
  age: number;

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

  introduce(): string {
    return `안녕하세요, 저는 ${this.name}이고, ${this.age}살입니다.`;
  }
}

const personInstance = new PersonClass("홍길동", 30);
console.log(personInstance.introduce());  // 결과: 안녕하세요, 저는 홍길동이고, 30살입니다.

위 예제에서 PersonClass라는 클래스를 정의하고, 그 안에 name과 age 속성을 포함하고, introduce 메서드를 구현했다. new 키워드를 사용하여 이 클래스의 인스턴스를 생성할 수 있다.

 

인터페이스와 클래스의 차이점 및 결합 사용

  • 역할: 인터페이스는 주로 데이터의 구조를 정의하는 데 사용되며, 클래스는 데이터와 행동을 묶어 실제로 객체를 생성하는 데 사용된다.
  • 추상화: 인터페이스는 구현이 없고 오로지 타입만을 정의하므로, 여러 클래스가 같은 구조를 따르도록 강제할 수 있다. 클래스는 구현체를 포함하며, 구체적인 객체의 인스턴스를 생성하는 데 사용된다.
  • 결합 사용: 클래스와 인터페이스를 함께 사용하여 객체 지향적인 구조와 타입 안정성을 동시에 제공할 수 있다. 예를 들어, 클래스가 특정 인터페이스를 implements 키워드로 구현하여 인터페이스에서 정의된 타입을 따르도록 강제할 수 있다.

결합 사용 예제

interface Person {
  name: string;
  age: number;
  introduce(): string;
}

class Student implements Person {
  name: string;
  age: number;
  studentId: number;

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

  introduce(): string {
    return `안녕하세요, 저는 ${this.name}이고, ${this.age}살이며, 학번은 ${this.studentId}입니다.`;
  }
}

const student = new Student("김영희", 20, 2021001);
console.log(student.introduce());  // 결과: 안녕하세요, 저는 김영희이고, 20살이며, 학번은 2021001입니다.

위 예제에서 Student 클래스는 Person 인터페이스를 구현하여, name, age 속성과 introduce 메서드를 반드시 포함하도록 강제한다. 이를 통해 일관된 구조를 유지하면서 필요한 속성과 기능을 추가하여 확장할 수 있다.

 

요약

  • 인터페이스는 객체의 구조를 정의하여 일관된 데이터 형태를 강제하고 타입 안정성을 제공한다.
  • 클래스는 실제 객체의 인스턴스를 만들고 캡슐화, 상속 등의 객체 지향적 특징을 활용하는 데 사용된다.
  • 결합 사용을 통해 인터페이스와 클래스의 장점을 모두 활용하여 안정성과 유연성을 동시에 갖춘 구조를 설계할 수 있다.

TypeScript에서 인터페이스와 클래스를 사용하는 이유는 이렇게 명확한 구조와 유지보수성 높은 코드를 작성하고, 대규모 프로젝트에서도 안정적이고 일관된 코드를 유지하기 위함임.

 

 

 

출처 GPT-4

반응형
저작자표시