TypeScript_ 4. 기초예제

Eunsu·2022년 2월 21일

typescript udemy 타입스크립트

@ TypeScript

목록 보기

8/14

오랜만에 블로그 포스팅을 한당 ㅎㅎㅎㅎ
프로젝트를 진행 중이라, 블로깅에 집중하지 못했당 ㅜㅜ 주말에 공부하면서 포스팅을 하려고 했지만,, 주말에 쉬느라,, 껄껄

강의를 끊고 타입스크립트에 대해서 본격적으로 블로깅을 하면서 차근 차근 공부해보려고 한다.

◼ 커리큘럼

Maximilian Schwarzmüller 의 Typescript 기초강의 (Udemy)

ZeroCho의 슬렉 클론 코딩 (인프런)

지금 하는 프로젝트 Typescript로 바꿔보기

커리큘럼 대로 목표는 5월까지 차근차근 완성해보려 한다.

포스팅한지 오래 된 나는 다 까먹었기 떄문에,,, 개념부터,, 다시 Reset..

❓Typescript란?

개념

◼ Typescript란?

타입스크립트는 자바스크립트에 타입을 부여한 언어이다. 자바스크립트의 환장된 언어로, 브라우저에서 실행하려면
파일을 한번 변환해주어야 하는 컴파일 과정을 거쳐야 한다.

사용이유

✔ 사전의 애러방지
✔ 코드가이드 및 자동완성

리액트를 사용하다 보면 타입에 대한 애러들이 발생한다. 리액트는 Props로 데이터를 전달 받을 수 있다. 하지만 Props를 전달 받기 전 컴포넌트가 먼저 읽힐 경우, props를 찾을 수 없어 브라우저에서 undefined를 반환한다.

하지만 props의 기본적인 타입을 정의해준다면 , 이러한 애러들을 사전에 방지 할 수 있다.

🗨 예시 1

자바스크립트는 먼저 코드를 한번씩 위에서 부터 읽고, 변수와 데이터를 저장해 놓는다.

//App.js
import { useEffect, useState } from "react";
import User from "./User";
import "./styles.css";
export default function App() {
  const [data, setData] = useState(null);
  useEffect(() => {
    const users = [
      { name: "john", age: 10 },
      { name: "bob", age: 30 }
    ];
    setData(users);
  }, []);
  return (
    <div className="App">
      <User data={data} />
    </div>
  );
}

//User.js
import React from "react";
const User = ({ data }) => {
  return (
    <div>
      <p>Name:{data.name}</p>
      <p>Name:{data.age}</p>
    </div>
  );
};
export default User;

이런 코드가 있다고 하면, 리액트는 위에서 부터 코드를 읽어 내려간다. User 컴포넌트에 들어가, data가 props로 전달되기 전 코드가 먼저 읽혀
Cannot read properties of null (reading 'name')이라는 타입애러를 낸다.

import React from "react";
const User = ({data=[]}) => {
  return (
    <div>
      { data && 
        data.map((e,i) => (< div key={i}>
        <p>Name:{data.name}</p>
        <p>Age:{data.age}</p>
        </div>))
      }
    </div>
  );
};
export default User;

이렇게 타입을 지정해준다면, 타입애러가 나지 않는다. => 다만 데이터가 들어오기 전에 User Component가 먼저 랜더링되어 null이 먼저 찍히고, 그 다음 데이터가 들어온다.

Props 의 타입을 지정해 준다면, 어떤 데이터가 들어올 지 예측하므로 애러발생도 줄일 수 있고, 가독성도 좋아진다.

🗨 예시 2

const add =(a,b) => a+b;
const result = add(204,'100');
console.log(result);
// 204100

자바스크립트는 일반적으로 변수의 타입을 any : 아무거나 다 들어올 수 있음로 정의한다. 그래서 a,b에 어떤 타입이 들어가도 코드의 계산 결과를 리턴한다. 이런 코드로 인해 코드를 빌드 할 떄, 오류를 발생시킬 수 있다.

하지만 타입스크립트를 사용해 타입을 지정해 준다면, 타입이 들어왔을 때 지정한 타입에 맞지 않는 변수가 들어온다면, 코드 자체에서 ESLint를 통해 오류를 반환해, 나중에 발생 할 오류를 막을 수 있다.

const add =(a:number,b:number) => a+b;
const result = add(204,'100');
console.log(result);
// b : Type Error

강의 예제 미리보기

index.html 생성 -> index.js 연결 -> typescript install -> index.ts 생성 / 변환 -> 변환코드 보기

◽ 1. index.html

{...생략}
<body>
	<input type='text' id='num1' />
    <input type='text' id='num2' />
    <button id='button'>Add!</button>
</body>
<script src='./index.js' defer />
//index.js 는 아직 생성되기 전임.

🚀 Defer 속성
페이지가 모두 로드된 후에 해당 외부 스크립트가 실행됨을 명시한다.defer 속성은 불리언(boolean) 속성으로 명시하지 않으면 false 값을 가지게 되고, 명시하면 true 값을 가지게 된다.

◽ 2. typescript install

npm i typescript

🚀 tsc 명령어로 index.ts를 검사하고 js로 컴파일 시킨다.

◽ 3. index.ts

//index.ts
(() => {
  const button = document.getElementById("button"),
    input1 = document.getElementById("num1")! as HTMLInputElement,
    input2 = document.getElementById("num2")! as HTMLInputElement;
  const add = (a: number, b: number) => a + b;
  button.addEventListener("click", () => {
    return console.log(add(+input1.value, +input2.value));
  });
})();

🚀 As 다운 캐스팅

다운캐스팅 : 캐스팅은 타입을 변환하는 것을 말하며, 형변환이라고도 한다. 다운캐스팅이란 업캐스팅된 것을 다시 원상태로 돌리는 것을 말한다. 하위 클래스로의 다운캐스팅을 할때는 타입을 명시적으로 지정해줘야한다는 특징이 있다.

! as HTMLInputElemenet => 타입스크립트에서 HTMLInputELement요소를 얻을 것이라고 알려줌.

🚀 Unary Operator (+)
Number(value), ParsInt(value)와 같은거암

◽ 4. index.js 컴파일

//index.js
(function () {
    var button = document.getElementById("button"), input1 = document.getElementById("num1"), input2 = document.getElementById("num2");
    var add = function (a, b) { return a + b; };
    button.addEventListener("click", function () {
        return console.log(add(+input1.value, +input2.value));
    });
})();