공부방

TypeScript 본문

프로젝트 회고

TypeScript

코딩 화이팅 2023. 12. 18. 18:07

TypeScript vs JavaScript?

  • 타입 체크
    • JavaScript는 런타임에 타입 오류를 감지한다. 즉 코드가 실행될 때까지 타입 관련 문제를 알 수 없다.
    • 하지만 TypeScript는 컴파일 시 타입 체크를 수행한다. 이는 개발 과정 중에 오류를 미리 발견하고 수정할 수 있게 해, 더 견고한 코드를 작성하도록 돕는다.
  • 개발 도구 지원
    • JavaScript는 다양한 개발 도구와 통합될 수 있지만, 코드의 복잡성이 높아지면 오류를 찾기 어려워질 수 있다.
    • TypeScript는 타입 시스템 덕분에 리팩토링 그리고 오류 감지 기능에 더 좋다.
  • 결론 : TypeScript는 JavaScript의 모든 기능을 포함하면서, 정적 타입 체크와 같은 추가적인 기능을 제공. 프로젝트에나 팀 작업을 할 때 특히 TypeScript의 이점이 두드러지며, 코드의 안정성과 유지보수성을 향상시키는데 도움이 된다. JavaScript는 더 빠른 개발과 더 넓은 호환성을 제공한다.

TypeScript에서 인터페이스와 타입의 차이는?

interface

  • 인터페이스는 확장이 가능하다. 즉 한 인터페이스에서 다른 인터페이스를 확장하여 새로운 속성을 추가할 수 있다.
  • 그리고 인터페이스는 객체 지향 프로그래밍의 개념과 잘 어울린다. 클래스와 함께 사용될 때 인터페이스는 클래스가 특정 메소드를 구현하도록 강제할 수 있다.

type

  • 유니온, 튜플, 기본 타입 등 다양한 타입의 조합을 표현할 수 있다.
  • 타입 별칭을 사용하여 더 복잡한 타입을 만들 수 있다.

결론 : 인터페이스는 주로 객체의 형태를 정의하거나 클래스와 함께 사용될 때 적합하고 타입은 튜플, 기타 복잡한 타입을 정의할 때 타입 별칭이 유용하다.

예 :

interface

주로 객체의 형태를 정의하거나, 클래스에 특정 메소드나 속성이 포함되도록 강제하는데 사용. 예를 들어 여러 객체가 동일한 구조를 가져야 할 때 인터페이스를 사용할 수 있다.

interface Person {
    name: string;
    age: number;
    greet(phrase: string): void;
}

let user1: Person;

user1 = {
    name: "John",
    age: 30,
    greet(phrase: string) {
        console.log(phrase + ' ' + this.name);
    }
};

user1.greet("Hi there, I am");

여기서 Person 인터페이스는 'name', 'age', 'greet' 메서드를 갖는 객체를 정의. 이 인터페이스를 사용하면 'Person' 타입의 모든 객체가 이 규칙을 따르도록 할 수 있다.

type

타입은 다양한 타입의 조합을 표현하거나, 복잡한 타입을 정의하는데 사용. 예를 들어, 여러 다른 타입을 결합해 새로운 타입을 만들거나, 함수의 반환 타입을 정의하는데 사용

type Combinable = string | number;
type ConversionDescriptor = 'as-number' | 'as-text';

function combine(
    input1: Combinable,
    input2: Combinable,
    resultConversion: ConversionDescriptor
) {
    let result;
    if (typeof input1 === 'number' && typeof input2 === 'number' || resultConversion === 'as-number') {
        result = +input1 + +input2;
    } else {
        result = input1.toString() + input2.toString();
    }
    return result;
}

const combinedAges = combine(30, 26, 'as-number');
const combinedNames = combine("Max", "Anna", 'as-text');

여기서 'Combinable' 타입은 'string' 또는 'number' 타입이 될 수 있고, 'ConversionDescriptor'는 두 개의 문자열 리터럴 타입 중 하나가 될 수 있다. 'combine' 함수는 이러한 타입들을 사용하여 더 유연하고 강력한 기능을 제공한다.

'프로젝트 회고' 카테고리의 다른 글

WebSocket  (0) 2023.12.19
React  (1) 2023.12.19
React의 DOM과 생명주기  (0) 2023.12.18
ES6  (3) 2023.12.17