[TS] 타입스크립트를 사용하는 이유, Type과 Interface의 차이점

[young-02]

타입스크립트를 사용하는 이유

TypeScript란?

Javascript의 슈퍼 셋. 상위 확장자로 Javascript 엔진을 사용하며 자신이 원하는 변수의 타입을 정의하고 프로그램밍 하면 Javascript로 컴파일 되어 실행할 수 있다.

컴파일 사람이 이해할 수 있는 언어를 컴퓨터가 이해할 수 있는 언어로 바꾸어 주는 과정. ts 는 js와 달리 브라우저에서 실행하려면 파일을 한번 변환 해 주어야 하는데 이러한 과정을 컴파일 이라고 한다.

TypeScript 장점

1. 손쉽게 버그를 예방할 수 있는 강력한 타입 시스텝
   • 컴파일 과정에서 타입을 지정하기 때문에 컴파일 에러를 예방할 수 있을뿐 아니라, 손쉬운 디버깅이 가능해 진다.
2. 같은 일을 두 번 하지 않는다. 높은 생산성의 타입 스크립트
   • js는 객체의 필드나 함수의 매개변수로 들어오는 값이 무엇인지 알기 위해 여러 파일을 살펴야한다.
   • ts는 변수 이름 뿐 아니라 그 데이터의 자료형까지 알수 있게 된다.
   • 타입 지정이 되어있기 때문에 리팩토링 후 예기치 않는 동작을 방지한다.

3. typescript는 javascript의 슈퍼셋 이다.

   슈퍼셋 특정한 언어의 모든 기능을 포함하면서 다른 기능까지 활용 가능하도록 확장된 것을 말한다

   • js로 짜여진 코드를 확장하는 식으로 대규모 수정 없이도 ts적용이 가능하다.

   • TypeScript vs Javascript

     js	ts
     동적타입 언어	정적타입 언어
     인프리터 언어	컴파일 언어
     독립적으로 사용 가능	자바스크립트에 의존적임(자바스크립트로 컴파일 된 후 실행)
     좀 더 유연함(타입에 제한을 받지 않는다)	더 나은 구조와 간결함, 일관성, 재사용성
     .js 확장자	.ts 확장자
     작고 간단한 프로젝트에 적합	복잡한 프로젝트에 적합

동적타입 변수의 타입이 런타임, 즉 실행 시간에 결정된다 런타임 에러가 발생할 가능성을 가지고 있다

정적타입 컴파틸 단계에서 타입을 체크 하기 때문에 코드 작성중 타입 오류를 방지하는 타입 체킹이 가능하다

인터프리터 언어 소스코드를 한 줄 한 줄 읽어가며 명령을 바로 처리하는 언어 컴파일 언어에 비해 빠르다.

컴파일 언어 기계어로 변환한는 언어 변환과 실행이 따로 이루어짐 인터프리터 언어에 비해 시간이 오래 걸리지만 런타임 상황에서 모든 소스코드가 변환되어 있기 때문에 빠르게 실행

Type과 Interface의 차이점

확장(상속)

interface

extends 키워드를 이용해 확장

interface Person {
    name: string;
    age: number
}

interface Student extens Person{
    school:string;
}
const maru: Student  ={
    name:'maru',
    age:8,
    school:'tdc'
}

type

& 기호 사용 확장

type Person = {
    name: string,
    age:number
}
type Student = Person & {
    school: string
}

const maru:Student = {
    name:'maru'
    age:8
    school:'tdc'
}

선언적 확장

interface

선언적 확장이 가능하다 같은 이름의 interface를 선언하면 자동으로 확장된다.

interface Person {
    name:string,
    age:number
}
interface Person {
    gender:string
}
const maru: Person = {
    name:'maru',
    age:8,
    gender: 'male'
}

type

선언적 확장이 불가능

type Person = {
    name:string,
    age: number
}
type Person = { //Error
    gender: string;
}

타입 객체의 확장성을 위해서는 interface를 사용하는 것이 더 좋다.

자료형(type)

interface

객체(Object)의 타입을 설정할 때 사용할 수 있으며, 원시 자료형에는 사용할 수 없다.

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

// 원시타입 확장 에러
interface name extends string {

}

type

객체 타입을 정의할 때도 사용할 수 있지만 객체타입을 정의할 때는interface를 사용하는게 좋고, 단순한 원시값(Primivite type)이나 튜플(Tuple), 유니언(Union)타입을 선언할때type을 사용하는 것이 좋다.

type name = string;
type Age = number;
type Person = [string, number, booleann] // tuple
type NumberString = string|number // union

// 객체는 interface
type Person = {
    name: string;
    age:number;
    gender:string
}

computed value 사용

interface

computed value 사용이 불가능

type Subjects = 'math'|'science'|'sociology'

//Error
interface Grades {
    [key in Subjects] :string 
}

type

computed value 사용이 가능

type Subjects = 'math'|'science'|'sociology'

type Grades = {
    [key in Subjects] :string
}

type 은 모든타입 선언할 때 사용할 수 있고 interface 는 객체에 대한 타입을 선언할 때만 사용할 수 있다.

확장 불가능한 타입을 선언하고 싶다면 type을 사용 확장 가능한 타입을 선언하고 싶다면 interface를 사용하면 된다.

[young-02]

https://tecoble.techcourse.co.kr/post/2022-11-07-typeAlias-interface/