학습의도

이것저것 손을 대기 시작하면서

점점 가공하고 반환하고 하는 작업들이 많아지다보니

처리할때마다 타입이 맞는지 확인하고 예상되는 타입이 예측이 안될때가 많아지기 시작했고

결국 미루다 미루다 시작하게 되었습니다 ㅎ,,,

왜 써야 하는걸까

타입스크립트는 자바스크립트에 “타입”을 추가한 언어로써,

자바스크립트는 변수에 어떤 종류의 값(숫자, 문자열 등)이 들어올지 미리 확인하지 않는데,

타입스크립트는 “어떤 값이 들어올지” 미리 알려줘서 코드에서 오류가 나는 걸 방지해줍니다.

즉, 코드가 더 안전하고 예측 가능하게 만들어주는 도구라고 생각하면 쉽습니다.

​

구체적인 장점이 뭘까?

타입스크립트의 장점은 타입 안전성뿐만 아니라:

• 자동 완성과 편집기 지원을 통한 생산성 향상,

• 리팩토링과 유지 보수성을 높이고,

• 런타임 오류 방지를 통해 디버깅 시간을 줄이며,

• 코드 자체를 더 문서화된 상태로 유지할 수 있다는 점입니다.

한번 학습해보자

타입의 종류

// 사용 방법
let 변수명: 타입명 = 넣을 값;

// number: 숫자 타입
let age: number = 30;

// string: 문자열 타입
let name: string = "John";

// boolean: 불리언 타입 (참 또는 거짓)
let isActive: boolean = true;

// null: 값이 없음을 나타내는 타입
let nothing: null = null;

// undefined: 값이 정의되지 않았음을 나타내는 타입
let notDefined: undefined = undefined;

// symbol: 고유한 값(보통 객체의 키로 사용)
let uniqueSymbol: symbol = Symbol('unique');

// bigint: 매우 큰 정수 값을 나타내는 타입
let largeNumber: bigint= 9007199254740991n;

타입을 정의하는 법

type UserProps = {
  name : string,
  age : number
}

type DescriptionProps = {
  description : number,
  gender : string,
}

정의된 타입을 컴포넌트에 적용하는 법

// 방법 1 : 많이 사용하는 방법
// Description 컴포넌트의 매개변수에 DescriptionProps라는 정의한 타입을 적용
const Description = ({ description, gender }:DescriptionProps) => {
return(
        <div>
            <p>{description}</p>
            <p>{gender}</p>
        </div>
    )
}

// 방법 2
// User 컴포넌트의 매개변수에 UserProps라는 정의한 타입을 적용
const User : React.FC<UserProps> = ({ name, age }) => {
return(
        <div>
            <h1>{name}</h1>
            <p>Age: {age}</p>
        </div>
    )
}


const App = () => {
return(
        <div>
            <User name="John Doe" age={30} />
            <Description description={0} gender="male"/>
        </div>
    )
}