TypeScript 기본기 (1) 개념, 타입

LeeKyungwon·2024년 5월 17일

프론트엔드

목록 보기

34/56

런타임 오류 : 프로그램 실행 도중에 발생하는 오류

자바스크립트에서 유독 런타임 오류가 많이 발생하는 이유는 코드를 미리 기계어로 바꿔놓고 실행하는 컴파일 언어가 아니라 코드를 한 줄씩 읽어서 실행하는 인터프리터 언어이기 때문이다.
또한 자바스크립트는 동적 타이핑 언어이기 때문에 변수의 자료형을 자유롭게 바꿔서 사용 가능하다.
동적 타이핑 언어: 개발자가 마음대로 편하게 변수를 쓸 수 있음, 실수하기 쉽고, 실수를 발견하기 어려움

TypeScript

기존 자바스크립트 문법에 정적 타이핑 문법 추가
코드를 배포하기 전에 타입 체크
VS Code 같은 에디터를 활용하기 좋다.

TypeScript 프로젝트 만들기

npm init -> package.json 생김
npm install --save-dev typescript
npx tsc --init ->tsconfig.json 생성됨
package.json에 아래 코드 추가

  "scripts": {
    "build": "tsc"
    "start": "node main.js" //npm start로 main.js를 실행함
  },

tsc는 타입스크립트를 자바 스크립트로 바꾸는 역할

ts코드 쓰고 npm run build하면 js 파일이 생긴다.(타입스크립트 컴파일러가 ts코드를 js로 변환한 것)

TypeScript가 실행되는 과정

TypeScript는 기존 자바스크립트에 문법을 추가한 것
웹 브라우저나 node.js는 TypeScript를 바로 실행할 수 없고 자바스크립트로 변환하여 실행해야 한다.
이를 변환해주는 것을 TSC(TypeScript Compiler)이다.
보통 컴파일은 소스 코드를 컴퓨터가 실행할 수 있는 코드나 기계어로 바꾸는 것

TSC는 트랜스파일하기 전에 타입스크립트 코드를 검사한다. (에러나 오타 검사)
트랜스파일 (자바스크립트로 변환)
Node.js나 웹 브라우저에서 자바스크립트 실행

타입을 정하는 법

타입을 추측할 수 있는 경우에는 타입이 추론된다.
직접 타입을 정하는 방법: 변수 뒤에 콜론을 쓰고 타입을 적는다.

let size : number = 100;

타입은 타입 검사할 때만 쓰이고 실제 코드 실행에는 영향을 주지 않는다.

타입 오류 이해하기

밖에서 안으로 하나하나 차근히 읽어보면 된다.

기본형

let itemName: string = '코드잇 블랙 후드';
let itemPrice: number = 129000;
let membersOnly: boolean  = true;
let owner: undefined = undefined;
let seller: null = null;

let num = 2/0; //Infinity
let num2 = 0/0; //NaN

Infinity, NaN도 number 숫자형이다.

let monsterName: string;
let level: number;
let hasGold: boolean;
let skill: undefined;
let area: null;

monsterName = '코드잇 고블린';
level = 255;
hasGold = false;
skill = undefined;
area = null;

변수를 선언할 때 타입도 지정해야 함

배열과 튜플

문자열 배열 타입을 쓰고 싶으면 타입을 먼저 쓰고 대괄호를 열었다가 닫으면 된다.

const cart: string[] = [];
cart.push('c1');

const carts: string[][]=[
  ['c1', 'c2'],
  ['c3'],
  ];

배열 타입에는 크기가 정해져 있지 않다.
튜플은 개수랑 순서가 정해져 있는 배열이다.
요소 자리에 타입을 넣으면 됨

let mySize: [number, number, string] = [166, 28, 'M'];

-> 개수가 다르거나 타입이 다르면 타입 오류가 난다.

객체 타입

값 대신에 타입을 쓰고 ;을 쓴다. 필수가 아닌 프로퍼티(옵셔널 프로퍼티)는 이름 뒤에 물음표를 붙인다.

let stock:{
  id: string;
  name: string;
  price: number;
  membersOnly?: boolean; //옵셔널 프로퍼티
  sizes: string[];
}={
  id: 'c001',
  name: '코드잇 블랙 후디',
  price: 129000,
  membersOnly: true,
  sizes: ['M', 'L', 'XL'],
}

자바스크립트에서 객체에 값을 할당할 때 프로퍼티 이름에 변수를 쓰고 싶으면 다음과 같이 썼는데

let field = 'field name';
let odj = {
  [field]:'field value',
}

타입스크립트에도 비슷한 기능이 있다.
프로퍼티 개수가 정해져 있지 않거나 정할 수 없을 때에 프로퍼티 타입만 정할 수 있는데

let stock: {
  [id: string]:number;
}={
  c1:3,
  c2:0,
  c3:'c'//type error
};

any

any로 만들면 타입 오류가 사라진다.

const product: any={
  id: 'c001',
  name: '코드잇 블랙 후디',
  price: 129000,
  membersOnly: true,
  sizes: ['M', 'L', 'XL'],
};

console.log(product.reviews[2]);

any는 최대한 사용하지 않는게 좋다.
어쩔 수 없이 타입이 any가 되는 경우가 있다.(ex) JSON.parse)
이런 경우에는 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 stock: { [id: string]: number } = {
  c001: 3,
  c002: 1,
};
const cart: string[] = [];

function addToCart(id: string, quantity: number = 1): boolean {
  
  if (stock[id] < quantity) {
    return false;
  }

  stock[id] -= quantity;
  for (let i = 0; i < quantity; i++) {
    cart.push(id);
  }

  return true;
}

...

함수 자체에 타입 정하기

const codeitmall:{
  stock: { [id: string]: number };
  cart:string[];
  addToCart: (id: string, quantity?: number) => boolean;
}= {
  c001: 3,
  c002: 1,
},
  cart:[],
  addToCart,
};

Rest Parameter를 쓰는 경우에 타입을 정의하는 방법

const codeitmall:{
  stock: { [id: string]: number };
  cart:string[];
  addToCart: (id: string, quantity?: number) => boolean;
  addManyToCart: (...ids: string[]) => void;
}= {
  c001: 3,
  c002: 1,
},
  cart:[],
  addToCart,
  addManyToCart,
};
function addManyToCart(...ids: string[]) {
  for (const id of ids) {
    addToCart(id);
  }
}