간단한 Typescript 설명(3)
Prerequisites
Interface 설명
사실 자바스크립트 언어만을 사용했더라면 익숙치 않은 개념이다. 우선 예제를 한번 작성한 뒤 설명하도록 하겠다.
이전 블로그에서 작성했던 typescript를 이용한 코드이다. 위에 함수를 작성할 때 사실 문제는 없다. 하지만, 매개변수가 더욱 많아질때나, 프로젝트의 규모가 커지고 다른 파일에서 가져온 변수들을 이용할 때 등등 일 때, create_mail 함수의 매개변수들을 하나의 object로 묶어서 관리하면 더욱 편리할 것이다. 하지만, 그 객체의 type을 typescript는 요구할 것이다.
Interface 는 typescript에서 구조를 만들 때 사용되는 방법이다. 이제 interface를 작성하여 함수 info의 타입을 주도록 하겠다.
자바스크립트에는 없는 interface를 통해 객체의 내부 변수의 type을 지정하였다. 매우 간단한 개념이다. 이 interface는 export하여 외부 파일에서도 사용할 수 있다.
Class 설명
Class는 interface와 비슷한 개념이다. 우선 위에 interface 예제를 class로 변경한 뒤 설명해보도록 하겠다.
기존 interface를 class로 변경하였다. User라는 class를 작성하고, 이를 통해 14번째 줄에서 joe라는 인스턴스를 생성하였다.
Class에 대해서는 자세하게 다루지 않도록 하겠다. 자바스크립트 기존의 문법이고 Typescript만의 특징은 아니기 때문이다. 위에 코드에 대해서 좀 더 살펴보도록 하겠다.
2 ~ 5 lines: 기존 자바스크립트와 typescript의 class에서 먼저 보이는 차이점이다. 기존 자바스크립트에서는 굳이 type을 명시할 필요는 없었다. 하지만 typescript에서는 이처럼 type을 지정해줘야 한다.
또한, public과 private을 통해 각 속성의 권한(permission)을 지정해 줘야 한다. 참고로, private은 class내에서는 부를 수 있다. 만약 private을 create_mail에서 부르게 된다면 에러가 발생하게 될 것이다.6 line: 생성자(constructor)은 클래스가 시작될 때 먼저 실행하게 된다. 즉, 클래스를 통해 joe라는 인스턴스 생성시, 생성자를 통해 변수가 할당되게 된다.14 line: 생성자를 통한 인스턴스 생성
이제, React에서 interface와 class가 실제로 어떻게 적용되는지 간단한 예제를 통해 알아보겠다.
React with Typescript
우선 예제를 먼저 보여주도록 하겠다.
React를 기존에 자바스크립트로 작성하던것과 약간 차이가 있다. 각 코드마다 설명하도록 하겠다.
React를 위한 Component작성시, 파일 확장자를 ts대신 tsx로 작성해야 한다.
3 line, 8 line: typescript의 리액트 컴포넌트에서는 props와 state를 작성 시, 이처럼 interface를 통해 type를 지정해 주어야 한다. 실제로 이번 예제에서는 state를 작성하지는 않았으나, 테스트를 위해 작성하였다.13 line: 위에서 작성된 interface를 props와 state를 위해 지정해준다.이 때, extends Component옆에 <> 안에 지정하는데, props 혹은 state가 없을 경우 간단하게 {}처럼 빈칸으로 두면 된다.
