js 타입스크립트

자바스크립트 및 타입스크립트 동작 원리와 예시

타입스크립트(TypeScript)는 정적 타입 언어로, 컴파일 시점에서 타입을 체크한다. 하지만 자바스크립트(JavaScript)는 동적 타입 언어로, 런타임에 변수의 타입이 결정된다. 이로 인해 예상치 못한 오류가 발생할 수 있고, 타입스크립트에서도 런타임 오류를 방지하기 위한 추가적인 타입 체크가 필요하다.

 

---

 

 

 

타입스크립트에서 변수에 다른 타입이 들어갈 경우

타입스크립트에서는 변수에 올바른 타입을 지정하지 않으면 런타임 오류뿐만 아니라 컴파일 타임 오류도 발생할 수 있다. :

let basicArray: [string, number];
basicArray = ["hello", 2];  // 정상
basicArray = [1, 2];  // 오류: 첫 번째 요소는 string이어야 함

basicArray는 튜플(tuple) 타입으로 선언되어 있으며, 첫 번째 요소는 반드시 string, 두 번째 요소는 number이어야 한다. 타입스크립트는 컴파일 타임에 이를 체크하고, 잘못된 타입을 할당하면 오류를 발생시킨다.

함수나 컴포넌트에 타입 지정하기

1. my_func() 함수 예시:
   • my_func() 함수가 숫자를 인자로 받는다면, 함수 정의에서 해당 타입을 명시해야 한다.

   function my_func(input: number): void {
     console.log(input);
   }
   
   my_func(10);  // 정상 실행
   my_func("string");  // 오류: 'string'은 'number' 타입이 아니다.
   

2. React 컴포넌트에서 props 필수 조건:
   • My_ReactComp 컴포넌트가 반드시 props를 받아야 한다면, props 타입을 정의하여 컴파일 타임에 강제할 수 있다.

   interface MyComponentProps {
     name: string;  // name 프로퍼티는 필수
   }
   
   const My_ReactComp: React.FC<MyComponentProps> = (props) => {
     return <div>{props.name}</div>;
   };
   
   // 사용 시
   <My_ReactComp name="John" />  // 정상
   <My_ReactComp />  // 오류: 'name' prop이 필수이다.
   

값에 따라 변수나 프로퍼티 타입이 제한되도록 하기

타입스크립트에서는 타입을 보다 엄격하게 관리하여, 잘못된 타입이 들어가는 것을 방지할 수 있다.

1. 배열 및 튜플 예시:

let basicTuple: [string, number];  // 튜플: 첫 번째 요소는 string, 두 번째는 number
basicTuple = ["hello", 2];  // 정상
basicTuple = [2, "hello"];  // 오류: 첫 번째 요소는 string이어야 함

let basicArray: string[] = ["hello", "world"];  // 배열: 모든 요소는 string
basicArray = ["hello", 2];  // 오류: 2는 string이 아님

 

 

 

 

 

 

1. enum 사용 예시:
   • enum을 사용하여 값을 제한하고, 특정 값만을 사용할 수 있도록 할 수 있다.

   enum Role {
     Admin = "admin",
     User = "user",
     Guest = "guest",
   }
   
   let role: Role = Role.Admin;  // 정상
   role = "superadmin";  // 오류: 'superadmin'은 'Role' 타입이 아님