profile
Frontend Developer
post-thumbnail

타입스크립트에서 Rest 문법과 디스트럭쳐링 할당 사용하기

ES6에 새롭게 소개된 문법에는 다양한 것들이 있습니다. 그 중 매우 유용하고 자주 사용되는 것 중에는 rest 문법과 디스트럭쳐링 할당이 있죠. 이 친구들도 타입스크립트에서 더욱 안정적으로 써먹을 수 있습니다. Rest와 디스트럭쳐링 할당 Rest와 디스트럭쳐링 할당은 엄밀히 따져서 ES6, 즉 자바스크립트의 영역입니다. 다만, 다른 게시글에서처럼 자바스크립트 내용을 다시 다지고 새로운 타입스크립트 문법을 시원하게 이해하기 위해 간략하게 요약해보겠습니다. Rest Parameter 함수를 다루게 되면, 코드로 작성한 함수에 다양한 인자를 넣는 일이 빈번합니다. 그런데 사용자와 상호 작용이 많거나, 변수가 많은 코드를 짜다 보면 함수에 들어갈 인자를 특정할 수 없는 경우가 많습니다. 특히, 인자가 몇 개나 들어올 지 미리 예상할 수 없는 경우가 있죠. Rest 문법을 활용하면 여러 인자들을 하나의 배열로 반환할 수 있습니다. 코드 블럭을 살

2022년 3월 22일
·
0개의 댓글
·
post-thumbnail

Class & Interface

이번 글에서는 자바스크립트의 class 문법과 타입스크립트를 엮어서 정리하려고 합니다. 추가로 Interface 문법도 간략하게 요약해보겠습니다. Class와 TypeScript Class와 필드값 자바스크립트의 class 문법은 비슷한 형태의 객체 데이터를 찍어내는 데 아주 적합합니다. class 문법에는 모든 자식 객체들이 활용할 수 있는 속성을 공용으로 만드는 기능도 있습니다. 이를 필드라고 보통 이야기하고, 다음과 같은 방식으로 작성합니다. 이런 식으로 작성해주면, Toy라는 클래스로 생성된 모든 객체들은 color="red"를 속성으로 가지게 됩니다. 따로 지정하지 않아도요. 필드 타입 지정하기 우리의 타입스크립트는 기대를 저버리지 않습니다. 필드에도 타입 지정이 가능합니다. 다음과 같은 방식으로 작성하시면 됩니다. ![](https://images.velog.io/images/kite1993/post/e1435ec

2022년 3월 21일
·
0개의 댓글
·
post-thumbnail

Literal Type과 As Const

지금까지 TypeScript를 정리하면서 느낀 점은, 타입 지정이라는 기능을 개발자들의 다양한 요구를 반영하게 되면서 매우 세심한 기능들을 사용할 수 있게 되었다는 점입니다. 이번 게시물에서 다뤄 볼 Literal Type도 여기에 해당된다고 할 수 있겠습니다. Literal Type? Literal Type의 개념 제가 변수를 하나 만들었다고 가정하겠습니다. 그리고 저는 이 변수에, 'A'라는 문자열 데이터 하나만 담고 싶습니다. 그러면 간단하게 다음처럼 코드를 작성하면 될 것입니다. 그런데 'A' 혹은 'B'를 담고 싶으면 어떻게 해야 할까요? const 키워드 하나만으로는 딱 두 개의 알파벳만 허용하도록 하는 게 불가능해보이네요. 이럴 때 사용하는 것이 바로 Literal Type입니다. Literal Type은 어떤 변수가 특정한 타입을 넘어서, 특정한 값만 받아들일 수 있도록 선언하는 것입니다. ![](https://images.ve

2022년 3월 11일
·
0개의 댓글
·
post-thumbnail

TypeScript 타입 심화

자바스크립트를 공부하다 보면, 자연스럽게 타입스크립트(TypeScript)를 자주 접하게 됩니다. 타입스크립트 개념을 배우는 과정에서, 개별 시리즈에 게시물을 포스팅하는 방식으로 타입스크립트 공부를 정리해보고자 합니다. > 저번 글에서 타입스크립트의 기본적인 타이핑에 대해 알아보았는데요, 이번엔 좀 더 심화된 내용들을 공부해 봤습니다. 타입 확정하기 유니언 타입의 조작 저번 글에서 만들어 본 것과 비슷한 함수입니다. 인자로는 유니언 타입을 사용해서 숫자와 문자열 모두 받을 수 있게 작성했습니다. 그런데 에러가 뜨는군요. 에러의 자세한 내용을 알아보겠습니다. ![](https://images.velog.io/images/kite1993/post/d27a9754-a090-43cb-9ad

2022년 3월 2일
·
0개의 댓글
·
post-thumbnail

TypeScript 타입

자바스크립트를 공부하다 보면, 자연스럽게 타입스크립트(TypeScript)를 자주 접하게 됩니다. 타입스크립트 개념을 배우는 과정에서, 개별 시리즈에 게시물을 포스팅하는 방식으로 타입스크립트 공부를 정리해보고자 합니다. > 이번 글에서는 타입스크립트의 기본 타입에 대해 정리하겠습니다. 타입스크립트의 타입들 저번 글에서 간략하게 설명한 것처럼, 타입스크립트는 개발 단계에서 타입 지정을 엄격하게 시행합니다. 따라서 동적 타이핑 언어에 해당하는 자바스크립트의 데이터 타입을 더욱 안정적으로 쓸 수 있게 됩니다. 깊게 들어가면 당연히 알아야 할 것이 많겠지만, 기본적으로 타입스크립트는 자바스크립트의 문법에 타입과 관련된 부분을 엄격하게 다스리는 도구들이 추가된 형태라고 이해해도 무방할 것 같습니다.

2022년 2월 28일
·
0개의 댓글
·
post-thumbnail

TypeScript 소개

자바스크립트를 공부하다 보면, 자연스럽게 타입스크립트(TypeScript)를 자주 접하게 됩니다. 타입스크립트 개념을 배우는 과정에서, 개별 시리즈에 게시물을 포스팅하는 방식으로 타입스크립트 공부를 정리해보고자 합니다. > 본 게시물은 필자의 티스토리에 올린 글을 바탕으로 작성되었습니다. What is TypeScript? 보통 타입스크립트를 검색해보면 "자바스크립트의 Superset"이라는 표현이 많이 나옵니다. 슈퍼셋이 무슨 말일까요? 슈퍼셋은 상위 확장, 내지는 상위 호환의 의미를 가지고 있습니다. 즉, 타입스크립트는 자바스크립트의 상위 호환격 개발 언어라고 볼 수도 있겠습니다. 바로 위쪽의 이미지처럼, 타입스크립트는 자바스크립트라는 언어를 포괄하는 슈퍼셋 언어이며,

2022년 2월 20일
·
0개의 댓글
·