타입스크립트 특징, 사용하는 이유, 타입별 간단한 선언 방법

 

안녕하세요. 테이입니다. 최근에 회사에서 타입스크립트를 쓰게 되어서 뒤늦게 타입스크립트를 배우는 중이에요 :)

공부를 하면서 배운 내용들을 Typescript 카테고리에 정리를 해보려고 합니다.

타입스크립트를 써보면서 느꼈던 게 개발 시작을 자바로 해서 그런지 타입 검사를 하는 게 낯설지는 않고 오히려 자바스크립트할 때 불안했던 부분들이 해소되는 느낌이라 좋네요.

---

타입스크립트

🔵 특징

- 자바스크립트에 타입을 부여한 언어

- 자바스크립트의 확장된 언어

- 자바스크립트와 다르게 브라우저에서 실행하려면 파일을 한번 변환해줘야함 (컴파일)

 

 

🔵 쓰는 이유

function sum(a: number, b: number): number {
  return a + b;
}

// 1. 에러 사정 방지
sum(10, '20'); // 에러 표시

// 2. 코드 자동 완성과 가이드
var result = sum(10, 20);

// return에 따라 제공되는 속성도 접근 가능
result.toLocaleString();

 - 에러의 사전 방지

- 코드 자동 완성과 가이드

 

 

🔵 타입스크립트 선언

(1) 숫자, 문자열

let num: number = 123;

let str: string = 'hello';

 

(2) 배열

let heroes: Array<string> = ['A', 'B', 'C'];

let items: number[] = [1, 2, 3];

 

(3) 튜플 - 배열의 특정 index의 타입도 정의 하는 것

let address: [string, number] = ['A', 1];

 

(4) 객체 (기본, 객체 타입 지정)

let obj: object = {};
let person: { name: string, age: number } = {
    name: 'abc',
    age: 30
}

(5) 진위값

let show: boolean = true;

 

(6) 함수 ⭐

파라미터 타입 정의 방식

function sum(a: number, b: number) {
	return a + b;
}

 

→ 함수의 반환값이 number가 될거라 타입 추론

 

반환 값의 타입 정의 방식

function add(): number {
	return 10;
}

 

파라미터 제한 특성 비교

1. 자바스크립트의 함수 선언

- 자바스크립트의 유연함

- 파라미터를 추가로 더 넣어도 무시한다

function sum(a, b) {
    return a + b;
}

sum(10, 20, 30, 40, 50); → 에러 없이 호출

 

2. 타입스크립트의 함수 선언

- 파라미터가 정의한 것과 맞지 않으면 에러

function sum(a: number, b: number): number {
  return a + b;
}

sum(10, 20, 30, 40); → 에러가 나온다

 

3. 타입스크립트 함수의 옵셔널 파라미터 ( ?: ) 활용

function log(a: string, b?: string, c?: string) { 어쩌구 저쩌구 로직 }

log('A'); → 에러 없음
log('A', 'B'); → 에러 없음

 

 

🔵 타입스크립트 타이핑 예시

* 타이핑(typing) : 타입이 정의되지 않은 코드에 타입을 입혀주는 행위

* return이 없으면 반환타입 void로 명시

 

1단계. 기본적인 타입만 타입명시

(1) 객체로 이루어진 배열 타입 (object[])의 items

let items: object[];

 

(2) items와 동일한 타입을 반환하는 함수

 function fetchItems(): object[] {
    const items = [
        { id: 1, name: '김테이', pass: true },
        { id: 2, name: '김자반', pass: false },
        { id: 3, name: '감자탕', pass: false },
    ];
    return items;
}
items = fetchItems();

 

(3) items의 내부 객체를 파라미터로 받는 함수

function addItem(item: object): void {
    items.push(item);
}

 

(4) filter를 통해 items의 내부 객체의 속성들을 검사하여 통과한 객체만 반환하는 함수 

function showPassed(): object[] {
    return items.filter(item => item.pass);
}

→ item.pass에 에러가 표시된다.

왜냐면 items 배열 내부 객체의 각 속성들에 대한 타입이 없어서 에러 표시

 

2단계. 구체적으로 타입명시

(1) 객체로 이루어진 배열 타입이며, 어떤 객체인지 구체화

let items: { id: number; name: string; pass: boolean }[];

 

 

(2) items와 동일한 타입을 반환하는 함수, 반환하는 타입이 구체적

function fetchItems(): { id: number; name: string; pass: boolean }[] {
  const items = [
    { id: 1, name: '김테이', pass: true },
    { id: 2, name: '김자반', pass: false },
    { id: 3, name: '감자탕', pass: false },
  ];
  return items;
}
items = fetchItems();

 

(3)  items의 내부 객체를 파라미터로 받는 함수, 파라미터의 타입이 구체적

function addItem(item: { id: number; name: string; pass: boolean }): void {
  items.push(item);
}

 

(4) filter를 통해 items의 내부 객체의 속성들을 검사하여 통과한 객체만 반환하는 함수

function showPassed(): { id: number; name: string; pass: boolean }[] {
  return items.filter(item => item.pass);
}

→ 통과! 하지만 타입 관련 코드 중복이 너무 많다 ...

 

3단계. 인터페이스 활용 타입명시

- 반복되는 타입을 하나의 인터페이스로 정의하고 사용

(1) 구체적으로 타입을 명시한 인터페이스 객체로 이루어진 배열 타입

interface Item {
  id: number;
  name: string;
  pass: boolean;
}

let items: Item[];

 

(2) items와 동일한 타입을 반환하는 함수

function fetchItems(): Item[] {
  const items = [
    { id: 1, name: '김테이', pass: true },
    { id: 2, name: '김자반', pass: false },
    { id: 3, name: '감자탕', pass: false },
  ];
  return items;
}
items = fetchItems();

 

 

 

(3)  items의 내부 객체를 파라미터로 받는 함수

function addItem(item: Item): void {
  items.push(item);
}

 

(4) filter를 통해 items의 내부 객체의 속성들을 검사하여 통과한 객체만 반환하는 함수

function showPassed(): Item[] {
  return items.filter(item => item.pass);
}

 

→ 합격!

 

---

 

참고 강의 : https://taylog.tistory.com/217

[강의리뷰] 실전 프로젝트로 배우는 타입스크립트 시리즈 강의 후기 (캡틴판교) 😱 타입스크립