Front-End(Web)/Typescript
-
<작성중>[Typescript] Utility Type(유틸리티 타입)Front-End(Web)/Typescript 2022. 7. 25. 03:50
이전, 타입스크립트 입문 강의를 들으며 기본적인 개념들을 정리하는 시간을 가졌다. 시리즈로 고급 강의도 존재하며, 잘 알지 못했던 고급 타입들까지 공부해보고자 다시 수강을 시작하게 되었다. 먼저, Typescript에서 공통 타입 변환을 용이하게 해주는 유틸리티 타입들에 대해 정리해보고자 한다! * 이 포스팅은, 인프런 캡틴판교 님의 '타입스크립트 실전' 강의를 듣고 정리한 내용을 바탕으로 작성하는 시리즈입니다. (링크) 실전 프로젝트로 배우는 타입스크립트 - 인프런 | 강의 "타입스크립트 입문 - 기초부터 실전까지"의 실전 활용편입니다. 입문 편을 수강하지 않으신 분들은 입문 편부터 수강해주세요 😄, - 강의 소개 | 인프런... www.inflearn.com 💙 Utility Type(유틸리티 타입)..
-
[Typescript] 타입 단언 / 타입 가드 / 타입 호환Front-End(Web)/Typescript 2022. 5. 13. 03:11
요즘 타입스크립트 강의를 들으며 개념을 상기하고 연습예제를 풀 준비를 하고 있다. 기본적인 내용들은 이전에 정리한 포스팅을 복기하였으나, 블로그에 남기지 않은 내용 중 중요한 부분을 이어서 포스팅하려고 한다. 이번 글은 타입스크립트 입문 강의를 들으면서, 타입을 다루는 주요 개념들을 정리해보려고 한다. 타입을 명시하는 타입 단언(Assertion) 유니온 등에서 타입의 경우를 좁혀가는 타입 가드(Guard) 타입 간의 호환성을 판단하는 타입 호환(Compatibility) * 이 포스팅은, 인프런 캡틴판교 님의 '타입스크립트 입문' 강의를 듣고 정리한 내용을 바탕으로 작성하는 시리즈입니다. (링크) 타입스크립트 입문 - 기초부터 실전까지 - 인프런 | 강의 타입스크립트를 시작하는 분들을 위한 강의입니다...
-
[Typescript] Type Alias vs InterfaceFront-End(Web)/Typescript 2021. 8. 25. 20:44
Typescript 프로젝트를 진행하기 앞서, 토이클론을 진행하며 객체 등 타입선언에 Type, Interface 모두를 사용하였다. Type Alias는 "="을 같이 사용하여 선언하고, Interface는 불필요하다는 간단한 Literal 적 차이점부터, Interface는 Class처럼 확장이 가능하고, Type은 다르다는 등 둘의 비슷하면서도 다른점들을 얼핏 보아왔다. 하지만, 분명 Typescript에서 이 둘을 구분한 이유가 있을 것이며, 그렇기에 각각이 쓰이기에 적절한 경우가 있을 것이다. 이를 많은 소스들을 참고하면서 정리해보고자 본 포스팅을 올린다. 💙 개념 - Type Alias(타입 별칭) // string 타입을 사용할 때 const name: string = 'capt'; // 타..
-
[Typescript] 제네릭(Generic)Front-End(Web)/Typescript 2021. 2. 23. 19:26
우선, Generic 이라는 말부터 생소했다. '일반적인' 이라는 뜻으로, 정적타입 언어에서 이를 많이 지원한다고 한다. 클래스나 함수에서 사용할 타입을 결정하면서, 소위 '일을 어떻게 할 것인지?' 를 결정하는 문법이라고 한다. 자세히 공부해보았다! 💙 Generic 이란? '일반적인' 이라는 언어 뜻 그대로, 재활용성이 높은 컴포넌트를 구축하기 위한 문법이다. 정적언어인 C#과 Java에서는 재사용 가능한 컴포넌트를 만드는 주요 도구로 제네릭이 통용된다. - Generic 적용 // 단일 타입 function identity(arg: number): number { return arg; } // any 타입 function identity(arg: any): any { return arg; } 아래와..
-
[Typescript] 유니언과 교차 타입Front-End(Web)/Typescript 2021. 2. 23. 19:18
앞서, Enum(열거)과 리터럴 타입을 공부하면서 유니언 타입을 자주 활용하였다. 다양한 타입들을 복합하기 위한 유니언, 그리고 이와 비교되는 교차 타입에 대해서 포스팅하겠다. 💙 Union Type (유니언 타입) 앞서 얘기했듯, 유니언 타입은 새로운 형태의 타입은 아니다. 이미 존재하는 타입들을 재료로 구성하는 방법의 일종이다. 만약, 어떤 변수에 2가지 타입이 기대가 된다.(string, number) 이 땐, any보다 유니언 타입을 쓰는 것이 효과적이다. let unionPrice: number | string = 5; 이처럼, 우리가 활용하고자 하는 타입들을 파이프(|)로 연결시키기만 하면 된다. 해당 타입들 외 값을 설정하면, 에러가 발생한다. - Union Type 재활용: Type Ali..
-
[Typescript] 열거형(Enum) & Literal TypeFront-End(Web)/Typescript 2021. 2. 23. 04:06
앞서 타입을 공부하면서, 값들을 나열한 열거형(Enum)에 대해서 공부했다. 이것이 적용될 방법 중 하나가 바로 이 Literal Type인 것이다. 얼핏 보았을때, 자료형이 아닌 특정값을 직접적으로 타입으로서 설정하는 방법인 것 같다. 💙 열거형(Enums) 열거(Enum)는 비원시 타입이자, 멤버라 불리는 값의 집합을 이루는 자료형이다. enum 키워드로 선언하며, {} 안에 자료형을 나열한다. enum Fruits { Apple, Banana, Kiwi, } 열거형을 사용하는 대표적인 목적은, 특정 프로퍼티를 자료형보다는 값(혹은 값의 집합)으로 제한하고자 하는데 있다. - Enum 적용 다음 예제에서, enum(Subject)로 설정한 subject 프로퍼티를 string('Typescript')..
-
[Typescript] 인터페이스(Interface)Front-End(Web)/Typescript 2021. 2. 22. 19:12
이전 글에서부터, 타입의 커스터마이징에 대해 얘기하면서, 그리고 Type Aliase 를 공부하면서 Interface 가 종종 거론되었다. 타입의 유형화에 유리한 이 인터페이스에 대해 한번 알아보도록 하자. 💙 Interface 란? 인터페이스는 특정 자료형의 구조를 나타낸 일종의 커스텀 타입이다. 인터페이스는 Javascript같은 동적타입 언어환경에선 다뤄지지 않으나, 정적타입 언어인 Typescript는 타입검사가 요구되므로 이를 지원한다. - Interface 문법 및 적용 'interface' 키워드를 통해 제작할 수 있다. 나머지는, 변수선언 문법과 유사하다. * Interface 이름 첫 글자는 대문자로 시작하도록 한다. 다른 정적언어는 I+인터페이스명을 권장하나, 타입스크립트는 해당되지 않..
-
[Typescript] 타입(Type)Front-End(Web)/Typescript 2021. 2. 22. 18:24
타입스크립트의 가장 기본이 되는 타입(자료형)들에 대한 정리이다. 얼핏보니, 익숙한 JS 자료형들도 있고, 새로운 자료형과 (파이썬에서 본 튜플같은) 문법들이 등장한다. 차근차근 공부해보았따! 💙 타입 추론(Type Inference) 위 예시를 먼저 보자. ts파일에서, a라는 변수에 5(number)를 할당했다. 그런뒤, 이를 'five'(string) 으로 수정하려하니 에러가 발생했다. Typescript 에서는 변수타입이 명시되지 않은 경우, 타입정보를 제공하기 위해 유추를 하는데 이것이 '타입 추론' 인 것이다. 다음 예제를 보자. calculateCodingIQ() 라는 함수가 있고, 이는 lostPoints 라는 인자를 받아 뺄셈을 한 값을 반환한다. Typescript는 이 인자에 대해서도..