240923 TS - 타입스크립트란?

타입스크립트 공식문서

---

타입스크립트 = 자바스크립트 + 정적 타입 시스템

정적 타입 시스템은 타입 시스템 중에 프로그램이 실행되기 전에 모든 변수와 표현식의 타입을 확인하고 고정하는 방식
=> 이를 이용해 프로그램의 많은 오류를 미리 발견할 수 있다.

특징	JavaScript	TypeScript
타입 시스템	동적 타입	정적 타입
컴파일	필요X	자바스크립트로 컴파일 필요
개발 경험	유연하고 빠르게 시작 가능	코드완성, 타입 검사 등으로 향상된 개발 경험
프로젝트 규모	소규모	대규모
런타임 오류	런타임에 타입 오류 발견 가능	컴파일 타임에 타입 오류 발견 가능
학습 곡선	낮음	높음
도구 지원	광범위한 도구와 라이브러리 지원	자바스크립트 생태계의 모든 도구와 라이브러리 지원
브라우저 지원	모든 브라우저에서 기본적으로 지원	트랜스 파일 된 자바스크립트가 모든 브라우저에서 지원

• 타입을 사용하여 코드를 분석
• 개발 과정에서 에러를 잡을 수 있게 도와주기 때문에 프로젝트 대형화, 유지 보수에 용이

---

Vite 프로젝트 생성

npm create vite@latest 프로젝트이름 -- --template react-ts

---

React + TypeScript 시작하기

타입을 선언하고 사용하는 부분을 제외하면 기존 React와 비슷한 부분이 많다.

1. 간단한 컴포넌트 작성

src/components 디렉토리에 Hello.tsx 파일 작성

import React from 'react';

// 타입 선언
type HelloProps = {
    name: string;
}

const Hello = ({ name } : HelloProps) => {
    return <h1>Hello, {name}!</h1>;
};

export default Hello;

2. 컴포넌트 사용

src/App.tsx 에 Hello 컴포넌트를 불러서 사용

import React from 'react';
import Hello from './components/Hello';

const App = () => {
    return (
        <div>
            <Hello name="TypeScript" />
        </div>
    );
};

export default App;