타입스크립트
-
[Type-challenges] 난이도 Easy - (1)Front-End(Web)/Typescript 2023. 1. 24. 18:21
Github 챌린지 문제들을 풀고 관련된 내용을 정리하면서, 부족했던 타입스크립트 기본지식을 다지고자 한다. (주 1-2회) https://github.com/type-challenges/type-challenges GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge Collection of TypeScript type challenges with online judge - GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge github.com 📘 목..
-
[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] Class(클래스)카테고리 없음 2021. 2. 24. 04:25
😏 서론 Javascript 클래스를 복습하는 포스팅을 통해 공부했을 뿐만 아니라, 프로토타입 개념을 별도로 정리하면서 자바스크립트만의 클래스를 나름대로 이해하게 된 계기였다. Typescript 역시 ES6에서 도입된 Class 문법을 활용 가능하며, 좀 더 강력한 지원이 가능하다고 한다. 양이 많은 만큼 긴 포스팅이 될 것 같다!!!! 🤯🤯🤯🤯 💙 Class 란? Javascript 와 마찬가지로, 클래스 형식을 직관적으로 작성 가능한 Syntactic Sugar 이다. 기본적인 자바스크립트의 클래스 정의 및 사용법은 아래와 같다. /* 클래스 정의 */ class Book { /* 생성자(필드 초기화) */ constructor(title, author, pages) {// 프로퍼티(클래스 변수) ..
-
[Typescript] 함수(Function)카테고리 없음 2021. 2. 23. 20:19
Typescript는 Javascript의 수퍼셋인 만큼, 클래스 / 모듈 / 네임스페이스 못지 않게 함수의 기능적 역할이 중요하다. Typescript는 표준 Javascript 함수가 수월하게 작업하도록 다양한 기능을 지원한다고 한다. 가이드북과 유튜브 강의를 통해, Typescript 함수 활용에 대한 내용들을 공부하고 정리해보았다. 💙함수 타입 (Function Type) 아래 예제처럼, 타입스크립트에서는 함수에 대한 타입선언을 진행한다. 매개변수, 반환값 2가지에 대해서 시행한다. 첫 번째 방법은, 각 요소에 대한 타이핑이며, 두 번째 방법은, 함수 타입을 작성하여 함수변수(myAdd)에 지정하는 것이다. function add(x, y) { return x + y; } // 1) 함수의 타이핑..
-
[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는 이 인자에 대해서도..
-
[Typescript] Typescript 기초 및 설정Front-End(Web)/Typescript 2021. 2. 22. 15:00
🤔 서론 2차 프로젝트가 끝나고 2주간의 개인학습 기간을 가지고 있다. 저번주 Redux에 이어, 이번주는 Typescript 에 대한 공부다. 우선 기본개념과 문법을 가이드북과 유튜브를 병행하며 학습해보고, Todo List를 만들어보면서 프로젝트 도입여부를 결정할 생각이다. 💙 Typescript 소개 [타입스크립트 가이드북] TypeScript는 2012년에 발표된 오픈 소스 프로그래밍 언어로, 대규모 JavaScript 애플리케이션 개발을 목적으로 Microsoft에 의해 개발되었습니다. [위키백과] 마이크로소프트에서 구현한 JavaScript의 슈퍼셋(Superset) 프로그래밍 언어. 확장자로는 .ts를 사용하며, 컴파일의 결과물로 JavaScript 파일인 .js를 출력한다. 최종적으로 런타..