[React] Typescript #01

 

타입스크립트가 등장 배경을 간략히 설명하면

기존의 자바스크립트에서 발생하던 런타임 에러를 최소화하고

 

개발자의 실수를 최대한으로 줄여

웹애플리케이션의 품질을 보다 향상 시키는것을 목표로 한다. 

 

기존의 자바스크립트의 문제점은 개발자가 코드를 작성하는 대로

실행 후 런타임때에 에러를 발생시킨다.

 

 

-- 대표 예시 1

Q. 숫자와 문자를 더하기

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

console.log(test(1,"A"));

 

결과

 

"1A"라는 문자열을 리턴한다. 

 

 

-- 대표 예시2

Q. 문자와 문자 나누기

function test(a, b){
return a / b;
}

console.log(test("A","B"));

 

결과

 

 

이러한 에러는 타 언어에서는 런타임(Runtime)시점이 아닌 컴파일(Compile) 타임 시점에서

추론을 통해 이미 실행이 불가능한것을 파악 후, 개발자에게 경고 또는 에러를 출력하여

자연스럽게 수정하도록 가이드를 한다.

 

하지만 자바스크립트는 처음 개발된건 "넷스케이프 커뮤니케이션즈 코퍼레이션"의 브렌던 아이크분이

브라우저를 도와주는 보조역할 정도로만 기능을 설계하고 타언어를 참고하여

약 10일 만에 개발이 완료되었다.

 

이때 의문점은 "Q. 애초에 설계가 잘못되었다면, 재설계를 통해 다시 개발하면 될 거" 라는

간단한 의문점이 생긴다.

 

하지만 이런 의문점은 현실적으로 불가능하다.

 

그 이유는 재설계를 할 경우, 기존 코드를 지원하지 않는 브레이킹 체인지(breaking change)가 발생하고

예전에 개발되었던 전 세계의 여러 웹사이트가 다양한 문제가 발생한다.

 

이런 여러 문제들로 인해 타협점을 찾은것은 타입스크립트 컴파일을 통해 개발자가 작성하는 코드를

컴파일 시점에서 자동으로 한번 더 확인하고 자바스크립트 파일 형태로 변환하는 것이다.

 

 

다시 돌아와서  타입스크립트에서는 기존의 자바스크립트와는 다르게 타입을 명확하게 해야한다.

 

 

절차 : 코드 작성 -> 타입스크립트 컴파일 -> 자바스크립트 파일 생성 

 

브라우저에서는 타입스크립트를 인식하지 못하고 자바스크립트 파일만 인식하기 때문에

타입스크립트 컴파일러에서 자바스크립트로 변환 되기전, 코드에서 타입을 검사 후 자바스크립트로 변환한다.

 

타입 스크립트 코드( 컴파일전 )

import styled from "styled-components";

interface InterfaceContainerProps {
  Color: string;
  Width?: string;
  Height?: string;
}

interface InterfaceCircleProps {
  bgColor: string;
  bgWidth?: string;
  bgHeight?: string;
}

const Container = styled.div<InterfaceContainerProps>`
  width: ${(props) => props.Width};
  height: ${(props) => props.Height};
  background-color: ${(props) => props.Color};
`;

function Circle({
  bgColor,
  bgWidth = "100px",
  bgHeight = "200px",
}: InterfaceCircleProps) {
  return (
    <Container Color={bgColor} Width={bgWidth} Height={bgHeight}></Container>
  );
}

export default Circle;

 

변환된 자바스크립트(컴파일 후)

import styled from "styled-components";
const Container = styled.div `
  width: ${(props) => props.Width};
  height: ${(props) => props.Height};
  background-color: ${(props) => props.Color};
`;
function Circle({ bgColor, bgWidth = "100px", bgHeight = "200px", }) {
    return (React.createElement(Container, { Color: bgColor, Width: bgWidth, Height: bgHeight }));
}
export default Circle;

 

본론으로  타입스크립트에서는 인터페이스라는 키워드를 통해, props로 전달되는 값의 타입을

명확하게 작성한다.

 => string, number, array, null, undefined 등등 ES6 이후 추가되어 현재는 7개 정도 JS의 타입이 존재한다.

      (Tip). JS에서는 실수형도 number로 적용한다.

 

 

interface를 통한 타입스크립트의 흐름

 

 

props default 값 설정

import styled from "styled-components";

interface InterfaceContainerProps {
  Color: string;
  Width?: string;
  Height?: string;
}

interface InterfaceCircleProps {
  bgColor: string;
  bgWidth?: string;
  bgHeight?: string;
}

const Container = styled.div<InterfaceContainerProps>`
  width: ${(props) => props.Width};
  height: ${(props) => props.Height};
  background-color: ${(props) => props.Color};
`;

function Circle(props: InterfaceCircleProps) {
  return (
    <Container
      Color={props.bgColor}
      Width={props.bgWidth ?? "100px"}
      Height={props.bgHeight ?? "200px"}
    ></Container>
  );
}

export default Circle;