[타입스크립트 입문 - 기초부터 실전까지] 타입스크립트 소개와 배경

EJ·2020년 11월 9일

typescript

Typescript

목록 보기

2/25

타입스크립트란?

자바스크립트에 타입을 부여한 확장된 언어
자바스크립트와 달리 브라우저에서 실행하기 위해 파일을 한 번 변환하는 과정이 필요하다.(=컴파일(compile))

왜 타입스크립트를 쓰면 좋을까?

받아온 데이터의 형상들을 알지 못할 경우 낼 수 있는 에러, 오탈자로 인한 에러들을 방지할 수 있다.

먼저, api를 이용해 데이터를 불러와 선언해주자.

function fetchUser() {
  return axios.get(url);
}

function startApp() {
  // axios
  //   .get(url)
  fetchUser()
    .then(function (response) {
      user = response.data;
      // TODO: 이름, 이메일, 주소 표시하기
      username.innerText = user[0].name;
      email.innerText = user[0].email;
      address.innerText = user[0].address.street;
    })
    .catch(function (error) {
      console.log(error);
    });
}

1. 받아온 데이터의 형상들을 알지 못할 경우 낼 수 있는 에러

data가 아래의 address처럼 객체 속의 객체로 존재할 경우

     address.innerText  =  user[0].address;

이렇게 불러 낼 경우 화면(브라우저)에는 [object Object]라고 출력된다.

2. 오탈자로 인한 에러

	address.innerText  =  user[0].addres;

addres라는 오타 발생 시 undefined가 출력된다.

>>> Typescript를 사용하면 보다 명확하게 데이터를 화면에 불러낼 수 있다.

자바스크립트에 타입이 있을 때의 장점

1. 에러의 사전 방지

: 브라우저 화면에서 데이터를 확인하기 전, 코드화면 상에서 데이터를 확인하고 에러를 처리할 수 있다.

Jsdoc 기본 주석 문법을 사용해 데이터의 속성을 지정해주면 코드상에서 데이터를 확인할 수 있다.

      /**
      *
      /

VSCode상에서 해당 코드에 마우스오버시 fetch내용을 볼 수 있게 하려면 아래처럼 작성하면 된다. - Jsdoc의 기본 문법.

	// {} 안에 적는 것은 속성(type)이다.

	// address의 속성 정의
	/**
	* @typedef  {object}  Address
	* @property  {string}  street
	* @property  {string}  city
	*/

	// user의 속성 정의
	/**
	* @typedef  {object}  User
	* @property  {string}  name
	* @property  {string}  email
	* @property  {Address}  address
	*/

	/** // 제네릭..?
	* @returns  {promise<User>}
	*/

	function  fetchUser() {
		return  axios.get(url);
	}

	fetchUser().then(function(response) {
		response.address.city;
	})

@returns {promise<User>}: User를fetchUser()함수로 호출하면 promise에 User데이터들이 담기게 된다.
User데이터의 속성(type)을 정의해주면 속성이 정의 된 name, email, address 등이 자동완성이 된다.

✔️ 브라우저의 console에서 데이터를 확인할 필요없이, 코드 상에서 데이터를 확인할 수 있게 된 것이다.

예시

👾 1.
----------------------------
   function sum(a, b) {
	   return a + b;
   }
   sum(10, 20); // 30
   sum(10, '20'); // 1020
----------------------------
- sum()함수 실행 시 인자로 숫자가 아닌 것을 넣으면 원하는 답인 30이 나오지 않는다.
- 현재 인자인 a, b는 속성이 any로 어떤 속성이어도 인자값이 될 수 있는 상태.

👾 2.
-------------------------------------------------
   function sum(a: number, b: number): number {
	   return a + b;
   }
   sum(10, '20');
-------------------------------------------------
- sum()함수의 인자 a, b모두 number이고, 그 숫자 두개를 받아서 반환해주는 것까지 number라고 타입스크립트에서 자동적으로 추론해준다.
- a, b에 number가 아닌 다른 속성의 인자를 넣을 경우 사용할 수 없다는 표시를 해준다.

2. 코드 가이드 및 자동 완성 - 개발 생산성 향상

: 해당하는 속성에서 제공하는 모든 api를 사용할 때, 자동으로 완성해줘, 오타를 예방할 수 있다.

sum함수실행문을 result라고 선언 후, 아래에 result를 입력하면 자동으로 result의 값이 number라고 안내창이 뜬다.
number에서 제공하는 모든 api를 사용할 수 있는 것.

	var result = sum(10,  20); /
	result.toLocaleString(); 
	// toLocaleString(): 현재 설정 된 언어를 기반으로 숫자를 문자열로 변환해주는 api.

Intellisense: VSCode에서 자동완성시켜주는 기능.

자바스크립트를 타입스크립트처럼 코딩하는 방법

JS파일에서 Jsdoc를 이용해서 파라미터를 정의해주면, 해당 함수에 마우스오버시 프리뷰가 나오는 것을 볼 수 있다.

	/**
	*
	* @param  {number}  a 첫 번째 숫자
	* @param  {number}  b 두 번째 숫자
	*/

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

하지만, sum()함수의 파라미터로 number가 아닌 string값을 줘도, Typescript파일이 아니기 때문에 잘못된 부분을 알려주지는 않는다.

	sum(10, '20'); // '20'을 사용할 수 없다는 알림 안뜸.

// @ts-check

상단에 // @ts-check라고 적어주면 Typescript를 사용한 것처럼 작동한다.

	// @ts-check

	/**
	*
	* @param  {number}  a 첫 번째 숫자
	* @param  {number}  b 두 번째 숫자
	*/

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