[TypeScript/타입스크립트] 기본 문법 정리 -1

이번에 프로젝트를 하면서 타입스크립트를 처음 써봤다. 대충 구글링하면서 프로젝트 진행 중이긴한데, 제대로 공부하고 싶어서 강의 들으면서 기본부터 정리해보려고 한다. 

 

---

JavaScript & TypeScript

 

1. 정적 타입 vs 동적 타입

• 자바스크립트: 동적 타입 언어로 변수의 타입이 런타임에 결정된다. 타입을 명시할 필요가 없기 때문에 유연하지만 타입 관련 오류가 런타임에 발생할 수 있다. 
• 타입스크립트: 정적 타입 언어로 변수의 타입이 컴파일 타임에 결정된다. 타입을 명시할 수 있으며, 타입 추론을 통해 코드의 안전성을 높일 수 있다. 타입 관련 오류를 컴파일 단계에서 잡아낼 수 있어 자바스크립트보다 타입 오류 잡기가 쉽다. 

2. 컴파일링

• 자바스크립트: 인터프리터 언어로, 코드를 작성하면 브라우저나 Node.js 환경에서 직접 실행된다.
• 타입스크립트: 컴파일이 필요한 언어로, 타입스크립트 코드는 자바스크립트 코드로 변환된 후 실행된다. tsc(TypeScript Compiler) 를 사용하여 컴파일한다. 

3. 코드 품질 및 유지보수성

• 자바스크립트: 타입이 없기 때문에, 대규모 프로젝트에서 코드의 복잡성이 증가할 수 있고 유지보수가 어려울 수 있다. 
• 타입스크립트: 정적 타입 체계를 통해 코드의 명확성을 높이고, 오류를 사전에 방지할 수 있어 대규모 프로젝트에서도 유지보수가 용이하다. 

정리하자면, 타입스크립트는 자바스크립트의 모든 기능을 가지고 있는 상위 집합으로 볼 수 있으며, 타입 시스템과 추가적인 언어 기능을 통해 더 안전하고 유지보수하기 쉬운 코드를 작성할 수 있도록 도와준다. 특히 대규모 프로젝트에서는 타입스크립트의 이점이 더욱 두드러지기 때문에 최근에는 타입스크립트를 많이 이용하는 추세이다!

 

 

기본형

• string: 문자열
• 숫자형: number
• 불린형: boolean
• undefined: undefined
• null: null

 

배열과 튜플

 

배열 타입을 만들려면 타입을 적고 뒤에 [] 를 붙입니다. 배열의 배열도 같은 방식으로 배열 타입 뒤에 [] 를 붙이면 된다. 

튜플은 개수랑 순서가 정해져 있는 배열로 [] 안에 타입을 쓰면 된다. 

// 배열
const cart: string[] = [];
cart.push('c001');
cart.push('c002');

// 배열의 배열
const carts: string[][] = [
  ['c001', 'c002'],
  ['c003'],
];

// 튜플
let mySize: [number, number, string] = [175, 30, 'L'];

 

 

객체 타입

 

자바스크립트 객체는 프로퍼티 이름 뒤에 쉼표(,) 를 썼지만, 타입스크립트에서는 프로퍼티 이름 뒤에 세미콜론(;)을 쓴다. 

필수 프로퍼티가 아닌 경우 프로퍼티 이름 뒤에 물음표를 붙이면 된다.

let product: {
  id: string;
  name: string;
  price: number;
  membersOnly?: boolean; // 필수가 아닌 프로퍼티
  sizes: string[];
} = {
  id: 'c001',
  name: '코드잇 블랙 후디',
  price: 129000,
  sizes: ['M', 'L', 'XL'],
};

if (product.membersOnly) {
  console.log('회원 전용 상품');
} else {
  console.log('일반 상품');
}

 

만약 프로퍼티의 개수를 알 수 없거나 개수를 정해놓고 싶지 않은 경우 프로퍼티 타입만 지정이 가능하다. 아래와 같이 하면 된다. 

[id: string] -> 프로퍼티 이름으로 아무 문자열이나 쓸 수 있다. id 부분은 아무렇게나 적어도 상관없는 이름이다. 

let stock: { [id: string]: number } = {
  c001: 3,
  c002: 0,
  c003: 2,
};

 

 

any 타입

 

자바스크립트를 사용할 때와 마찬가지로 자유롭게 쓸 수 있는 타입이다. 되도록이면 any 타입을 지정하지 않는 것을 권장하지만 어쩔 수 없이 any 타입을 사용해야 하는 경우 as 키워드를 쓰거나 콜론 타입을 지정할 수 있다.

// 타입을 모르는 경우 -> any 타입
const parsedProduct = JSON.parse(
    '{ "name:": "코드잇 토트백", "price": 12000 }'
);

// as 키워드를 써서 타입 지정
const parsedProduct = JSON.parse('{ "name": "코드잇 토트백", "price": 12000 }') as { name: string; price: number };


// 콜론으로 타입 지정
const parsedProduct: { name: string; price: number } = JSON.parse('{ "name": "코드잇 토트백", "price": 12000 }');

 

 

※ 참고

전에는 꺽쇠를 쓰는 방법도 있었지만 최근에는 프론트엔드 코드에서 꺽쇠를 많이 사용하기 때문에 문법적인 문제로 잘 사용하지 않는다.

const parsedProduct = <{name: string; price: number;}>JSON.parse('{ "name:": "코드잇 토트백", "price": 12000 }');

 

 

함수 타입

 

- 리턴 타입을 지정하는 경우

function addToCart(id: string, quanity: number): boolean {
    if (어떤 조건) {
     return false;
  }

  return true;
}

 

 

- 리턴 타입을 미리 주지 않고 리턴 값으로부터 추론하도록 하는 경우

function addToCart(id: string, quanity: number) {
    if (어떤 조건) {
     return false;
  }

  return true;
}

 

 

- 함수를 값으로 사용하는 경우 화살표 함수처럼 작성

(id: string, quanity: number) => boolean

 

 

Rest 파라미터는 배열 타입으로 쓰고 값을 리턴하지 않는 경우 타입을 void 로 할 수 있다. 

(...ids: string[]) => void;

 

 

Enum

 

열거형이라고 부르는 enum 타입은 관련 상수들의 집합을 정의할 때 사용된다. 상수 값들을 쉽게 관리할 수 있다. 

중괄호 안에 각 항목을 쉼표로 구분해서 적어준다. 따로 값을 주지 안는다면 기본값은 0 부터 시작하는 변수가 되기 때문에 enum 을 사용할 때는 되도록이면 값을 정해놓고 쓰는 것이 좋다.

enum Size {
  S,
  M,
  L,
  XL,
}

console.log(Size.S); // 0
console.log(Size.M); // 1
console.log(Size.L); // 2

enum Size {
  S = 'S',
  M = 'M',
  L = 'L',
  XL = 'XL',
}

 

 

Interface 

타입스크립트에는 자바스크립트에는 존재하지 않는 인터페이스라는 것이 존재한다. (타입스크립트는 자바스크립트와 달리 객체 지향 언어이기 때문!) 인터페이스는 객체가 가져야 할 속성과 메서드를 명시하며, 이를 통해 코드의 안정성을 높이고, 특정 객체가 일정한 구조를 따르도록 강제할 수 있다. 

 

인터페이스를 쓰는 방법은 인터페이스를 쓴 다음에 객체 타입처럼 만들면 된다. 인터페이스를 사용하면 데이터의 형태를 바꾸고 싶을 때 인터페이스의 데이터만 바꾸면 인터페이스를 사용하는 모든 곳에서 타입 오류가 나기 때문에 유지보수가 쉽다.

 

또 인터페이스는 상속이 가능한데, 인터페이스를 상속하고 싶으면 인터페이스 이름 뒤에 extends 를 적은 다음 부모 인터페이스 이름을 적어주면 된다. 아래의 printProduct 함수는 Product 타입의 매개변수를 받는데, Product 타입을 상속받은 ClothingProduct 타입은 Product 타입의 일종이기 때문에 printProduct 함수에 매개변수로 집어넣을 수 있다. 

enum Size {
  S = 'S',
  M = 'M',
  L = 'L',
  XL = 'XL',
}

interface Product {
    id: string;
    name: string;
    price: number;
    membersOnly?: boolean;
}

interface ClothingProduct extends Product {
  sizes: Size[];
}

const product1: ClothingProduct = {
  id: 'c001',
  name: '코드잇 블랙 후드 집업',
  price: 129000,
  membersOnly: true,
  sizes: [Size.M, Size.L],
};

const product2: Product = {
  id: 'd001',
  name: '코드잇 텀블러',
  price: 25000,
};

function printProduct(product: Product) {
	(생략)
}

 

 

인터페이스로 함수의 타입도 지정할 수 있다. 

interface printProductFunction {
	(product: Product): void;
}

function printProduct: PrintProductFuncion = (product) => {
	(생략)
}