[TypeScript] BlockChain 만들기 (3)

이번에 다룰 내용은 타입스크립트에서 사용하고 있는 문법과 그에 대한 정의입니다.

이전에는 화면적으로 이동하고 파일을 생성하는 일이 발생하여 동영상으로 제작을 하였지만

이번에는 소스 코드를 예시로 들며 설명하는 것이 좋을 것 같습니다.

 

먼저 기존에 만들어두었던 index.ts 파일로 이동합니다.

다음과 같이 입력해보았습니다.

ABBO 그룹에게 2020년을 맞아 인사를 하는 코드를 간단하게 만들었습니다. 

자바스크립트에서 기존의 문법과는 조금 다른 방식으로 구성이 되어 있습니다.

약간 느낌이 Kotlin 언어와 비슷합니다.

 

기본적인 Lambda를 제공하고 String 문자열의 내부 내용을 '+'로 연결하지 않고 ${selector}의 형태로 사용하였습니다.

물론 '+'로 사용하여 작성하는 부분이 편할 때도 있습니다. 저를 포함한 많은 개발자들이 Java언어에서는 

"Hello " + group + ", This year is " + nowYear + ". " + groupMessage

와 같은 형식으로 사용하였을 겁니다. 

이 부분이 먼저 TypeScript이 장점인 이유 중의 하나입니다.

 

이후 yarn start를 터미널에 입력해보면 아래와 같이 출력됩니다.

아까 helloWorld 함수에 입력한 결과가 원하던대로 출력되었습니다.

기존에 JavaScript는 파라미터가 부족하더라도 undefined 로 출력이 되었습니다.

그럼 이와 같이 실행하면 어떻게 될까요? 빨간 줄이 그어져 있는 것이 이상해보이긴 합니다.

기존에는 그럼 "Hello ABBO, This year is 2020. undefined" 라고 콘솔에 보여졌을 것입니다.

터미널에서 결과는 이와 같이 출력이 되었습니다.

여기서 TypeScript의 장점이 보여집니다.

바로 파라미터를 선택적으로 받을 수 있도록 변경하도록 타입을 지정한다는 것입니다.

any는 기존에 설명드렸다시피 null을 허용하는 파라미터 중 하나입니다. 

따라서 helloWorld 함수에 빨간줄이 그어지지 않게 되었습니다.

뒤에 ?를 붙이는 것으로 선택적 파라미터가 가능하게 되었습니다!

결과는 이와 같이 출력됩니다.

 

Visual Studio Code에서는 이와 같이 함수명 위에 마우스 커서를 올리게 되면 어떤 파라미터를 받고 있는지 보여줍니다.

하지만 위 함수에서는 마지막에 보시다시피 void형태로 Return Type이 존재하지 않았었습니다.

그리고 파라미터들의 타입도 정해주지 않았죠. 그냥 '?' 표시로 any 타입인 것만 적용을 시켰었습니다. 

TypeScript의 강력한 기능이 여기서 또 보이게 됩니다.

이번에는 타입을 직접 설정해본 결과입니다. 타입을 선언하기 전에 콜론(:)을 뒤에 붙이면 됩니다. 

이 또한 Kotlin과 비슷한 맥락을 가지고 있습니다.

파라미터 영역의 마지막 괄호 이후 ':'을 붙이는 것은 이 함수 리턴 타입의 선언입니다.

내부에 return 이 없는 경우, 리턴하는 값의 타입이 다른 경우 에러가 발생합니다.

하지만 특이하게도 세미콜론(;)을 붙이지 않는 경우는 에러로 취급하지 않습니다.

기존에도 말했듯이 이것은 개발자의 선택이지만, 기왕이면 통일하는게 좋을거 같습니다! (근데 이렇게 말한 저는 통일이,,,읍)

 

해당 소스는 아래에 정리해두었습니다.

const group = "ABBO", nowYear = 2020, groupMessage = "Happy new Year!!"; const helloWorld = (group, nowYear, groupMessage) => { console.log(`Hello ${group}, This year is ${nowYear}. ${groupMessage}`) }; helloWorld(group, nowYear, groupMessage); export {};

const group = "ABBO", nowYear = 2020, groupMessage = "Happy new Year!!"; const helloWorld = (group: string, nowYear: number, groupMessage: string): string => { let message = `Hello ${group}, This year is ${nowYear}. ${groupMessage}` return message }; helloWorld(group, nowYear, groupMessage); export {};