'Language/TypeScript' 카테고리의 글 목록

TypeScript

📘 타입스크립트 제네릭 타입 함수 분석 & 만들기

우리가 자바스크립트에서 많이 쓰이는 forEach() 나 map() 같은 고차함수는 타입스크립트에서도 당연히 사용할 수 있다. 하지만 타입스크립트에선 각 인수 마다 타입을 지정해주어야 돌아가는데, 기존의 자바스크립트 메소드에 어떻게 타입을 설정하였기에 타입스크립트에서도 고차함수에서 사용할 수 있는 것일까? 실제로 제네릭으로 타입이 지정이 되있어서 타입스크립트에서도 무리없이 사용이 가능한 것이다. 지금부터 실제로 타입스크립트에 설정되어있는 기존의 자바스크립트 고차함수가 제네릭으로 어떤식으로 설정되어있는지 하나하나 분석하면서 확실히 제네릭을 이해해보는 시간을 가져보자. 실전 라이브러리 제네릭 타입 분석하기 forEach 타입 분석하기 가장 많이 쓰이는 forEach 의 제네릭을 분석해보자. 다음 코드를 타입..

인파_

2022.10.22

2

TypeScript

📘 타입스크립트 모듈 & 네임스페이스 시스템 이해하기

타입스크립트 모듈 시스템 모듈은 독립 가능한 기능의 단위이다. 프로그램은 여러 모듈로 구성되어 있고 모듈을 결합해 하나의 프로그램을 만든다. 모듈을 사용하면 다음과 같은 장점이 있다. 유지 보수의 용이성 : 중복 코드의 최소화 전역 스코프 오염을 방지 : 이름 공간이 파일 단위로 제한되어 전역 이름 공간을 침범하지 않음 재사용성 향상 : 모듈을 다른 프로젝트에 공유하여 재사용 가능 이처럼 모듈은 전역 변수와 구분되는 파일 자체 유효 범위(Local Scope)를 가진다. 이는 모듈 내 선언된 변수, 함수, 클래스 등을 명시적으로 내보내지 않는 이상 모듈 외부에서 접근할 수 없음을 의미한다. 예를들어 타입스크립트 프로젝트에 다음과 같이 index.ts , test/test.ts 두 파일이 있다고 하자. 그..

인파_

2022.10.06

2

TypeScript

📘 타입스크립트 @데코레이터 개념 & 사용법

타입스크립트 Decorator 란 타입스크립트로 Angular.js 나 Nest.js 개발을 진행하다보면 필연적으로 데코레이터란 것을 접하게 된다. 자바(Java)를 해본 분들이라면 어노테이션과 비슷하다고 볼수 있지만, 자바 어노테이션은 컴파일 타임에 상관지만 타입스크립트 데코레이터는 컴파일 타임에는 상관하지 않아, 오히려 파이썬(Python)의 데코레이터와 거의 비슷하다고 말하는게 옳다. 데코레이터는 일종의 함수 이다. 데코레이터는 말 그대로 코드 조각을 장식해주는 역할을 하며, 타입스크립트에서는 그 기능을 함수로 구현하는 것이다. 예를들어 메소드 / 클래스 / 프로퍼티 / 파라미터 위에 @함수 를 장식해줌으로써, 코드가 실행(런타임)이 되면 데코레이터 함수가 실행되어, 장식한 멤버를 보다 파워풀하게 ..

인파_

2022.09.30

3

TypeScript

📘 타입스크립트 공변성 & 반공변성 완벽 이해

타입의 공변성과 반공변성 타입스크립트는 자바스크립트에 타입을 추가해준 라이브러리 이지만, 타입을 다루는 언어이기도 하다. 그래서 어느새 타입 자체를 코딩하고 있는 자신을 발견하기도 한다. 타입을 코딩하는 도중 많이 당황하는 개념이 타입 간의 관계 이다. 어떤 타입은 다른 타입에 들어가는데 어떤 타입은 안 들어가서 결과가 다르게 나오는 당황스러운 경우가 있기 때문이다. 그리고 여러분들은 이런 이상한 인과를 찾아보다 결국 공변성(Covariance) 이라는 단어까지 도달했을 거라 추측한다. 타입스크립트에는 용어부터 어려워 보이는 이 단어 이외에도 3가지 더 개념이 있는데 간단히 정리하면 다음과 같다. 공변성(Covariance) : A가 B의 서브타입이면, T는 T의 서브타입이다. 반공변성(Contravar..

인파_

2022.09.29

3

TypeScript

📘 타입스크립트 커스텀 Error 처리하기

타입스크립트 Error 처리 방법 자바스크립트에서는 어떤 값이든 에러로 던질수가 있다. 그러나 try catch 문에서 타입스크립트 에러를 처리하는데 아래와 같은 에러를 만나 본적이 있을 것이다. [typescript] Object is of type 'unknown'.ts(2571) (error object) 기존에는 error: any 타입 이었기 때문에, 자바스크립트와 같이 사용해도 ts error가 발생하지 않았다. 하지만 타입스크립트 v4.4 부터는 error의 object가 unknown type으로 정의 되어서, ts error가 발생하는 것이다. try { // ... } catch (err) { console.error(err.message); // Object is of type 'un..

인파_

2022.09.28

2

TypeScript

📘 타입스크립트 잉여 속성 검사 원리 이해하기

타입스크립트 객체 타입 체킹 타입스크립트는 객체 타입을 선언할 때 좀 더 엄밀한 속성 검사를 진행하게 된다. 예를 들어 다음 Avangers 라는 인터페이스 타입이 있다고 하자. 여기에는 name 키 속성 하나만 정의되어 있다. 이 인터페이스를 hero 변수 타입으로 정의하고 객체값을 대입하였다. 그런데 name 키 외에 location 키도 같이 넣었더니 오류가 뜬다. interface Avengers { name: string; } let hero: Avengers; hero = { name: 'Captain', location: 'Pangyo' }; // Error - '{ name: string; location: string; }' 형식은 'Avengers' 형식에 할당할 수 없습니다. 개체 리..

인파_

2022.09.20

(0)

TypeScript

📘 타입스크립트 유틸리티 타입 💯 총정리 (+응용)

타입스크립트 - Utility Types 지금까지 타입스크립트를 다루면서, 자바스크립트를 어느정도 아니까 타입 종류만 배우면 뚝딱 마스터 할 줄 알았더니, 타입 자체를 코딩하며 에러줄을 사라지게 하는 이른바 타입을 코딩 하고 있는 자신을 발견했을 것이다. 🤣 이러한 고충을 타입스크립트 개발진들이 알았는지, TypeScript는 공통 타입 변환을 용이하게 하기 위해 몇 가지 유틸리티 타입을 제공한다. 예를 들자면 자바스크립트에서 배열을 다루는데 있어 for , while문 이면 충분하겠지만, 따로, forEach문 이나 배열을 만드는 map, 배열요소를 찾는 find나 filter 같은, 배열을 다루는데 편리하게 이용가능한 루프 헬퍼 함수를 지원하듯이, 타입스크립트에서도 타입 변경을 쉽고 용이하게 하기위해..

인파_

2022.09.20

(0)

TypeScript

📘 타입스크립트 조건부 타입 완벽 이해하기

고급 타입 - Conditional Types 조건부 타입(conditional type)이란 입력된 제네릭 타입에 따라 타입을 결정 기능을 말한다. 위와 같이 조건부 타입 문법은 extends 키워드와 물음표 ? 기호를 사용하는데, 보자마자 삼항 연산자가 생각 났을 것이다. 여러분이 유추한 바와 같이, 자바스크립트의 삼항 연산자는 변수의 값을 조건에 따라 결정하는 것이라면, 타입스크립트의 조건부 타입은 값 대신 타입을 조건에 따라 결정하는 것이라고 보면 된다. 위의 조건부 타입 코드 문법을 풀이해보자면, 타입은 T가 U에 할당될 수 있으면 타입은 X가 되고 그렇지 않다면 타입이 Y가 된다는 것을 의미한다. 착각하지 말아야 할점은 조건부 타입도 유니온 처럼 하나의 타입이라는 것이다. extends 키워드..

인파_

2022.09.19

6

TypeScript

📘 타입스크립트 Mapped types 완벽 이해하기

타입스크립트 맵드 타입 타입스크립트의 고급 타입인 맵드 타입(mapped type)이란 기존에 정의되어 있는 타입을 새로운 타입으로 변환해 주는 문법을 의미 한다. 예를 들어 인터페이스에 있는 모든 속성을 루프문 같이 순회해서 optional(?) 로 바꾸거나 readonly 로 지정할수 있으며, 아예 지정된 타입을 바꿔서 변경된 타입을 반환할 수 도 있다. 아직 맵드 타입에 대해 문법을 배우지는 않았지만 간단하게 살펴보자면 다음과 같다. interface Obj { prop1: string; prop2: string; } type ChangeType = { [K in keyof T]: number; }; type Result = ChangeType; /* { prop1: number; prop2: nu..

인파_

2022.09.16

2

TypeScript

📘 타입스크립트 느낌표 단언 연산자

Non-null assertion operator 자바스크립트를 포함한 대부분 프로그래밍 언어에서 느낌표(!)는 주로 False를 의미하는 연산자로 사용된다. 하지만 타입스크립트에서 변수 앞이 아닌, 뒤에 느낌표(!)를 사용하면 기발한 용도로 사용할 수 있는데, 피연산자가 Nullish(null이나 undefined) 값이 아님을 단언할 수 있다. 이를 Null이 아닌 단언 연산자(Non-null assertion operator) 또는 확정 할당 어선셜(Definite Assignment Assertions) 이라고도 부른다. Null이 아닌 어선셜 연산자는 피연산자가 null이 아니라고 컴파일러에게 전달하여 일시적으로 Null 제약조건을 완화시킨다. 당최 무슨말인지 모를것이다. 😪 이해를 돕기위해 다..

인파_

2022.09.11

(0)

TypeScript

📘 객체를 타입으로 변환 - keyof / typeof 사용법

타입스크립트 - keyof / typeof typeof 연산자 typeof : 객체 데이터를 객체 타입으로 변환해주는 연산자 아래의 코드의 obj는 객체이기 때문에, 당연히 객체 자체를 타입으로 사용할 수 없다. 그래서 만일 객체에 쓰인 타입 구조를 그대로 가져와 독립된 타입으로 만들어 사용하고 싶다면, 앞에 typeof 키워드를 명시해주면 해당 객체를 구성하는 타입 구조를 가져와 사용할 수 있다. const obj = { red: 'apple', yellow: 'banana', green: 'cucumber', }; // 위의 객체를 타입으로 변환하여 사용하고 싶을때 type Fruit = typeof obj; /* type Fruit = { red: string; yellow: string; gree..

인파_

2022.09.10

2

TypeScript

📘 타입스크립트 Generic 타입 정복하기

제네릭(Generics) 소개 우리가 프로그래밍을 할때 '변수' 라는 저장소를 사용하는 이유는 데이터 값의 유연성을 위해서이다. 변수 라는 단어는 변할 수 있는 것을 말하고 그반대인 상수는 항상 고정된 것을 말한다. 이러한 개념으로 봤을때 우리가 이때까지 number[] 며 string 이며 사용했던 타입은 항상 고정되어 절대 변하지 않는 타입을 사용해오고 있었던 것이다. 그리고 여기에 약간의 유연성을 가미한게 number | string | undefiened 유니온 타입이다. 하지만 이 프로그래밍 환경에서는 상황이 항상 고정되어 의도대로 흘러가지는 않는다. 언제 어디서 변할수 있는 변수가 항상 일어나는게 이 업계이다. 따라서 타입을 직접적으로 고정된 값으로 명시하지말고 '변수' 를 통해 언제든지 변할..

인파_

2022.09.09

4

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

You Can Become A

Pro

TypeScript

📘 타입스크립트 제네릭 타입 함수 분석 & 만들기

인파_

📘 타입스크립트 모듈 & 네임스페이스 시스템 이해하기

인파_

📘 타입스크립트 @데코레이터 개념 & 사용법

인파_

📘 타입스크립트 공변성 & 반공변성 완벽 이해

인파_

📘 타입스크립트 커스텀 Error 처리하기

인파_

📘 타입스크립트 잉여 속성 검사 원리 이해하기

인파_

📘 타입스크립트 유틸리티 타입 💯 총정리 (+응용)

인파_

📘 타입스크립트 조건부 타입 완벽 이해하기

인파_

📘 타입스크립트 Mapped types 완벽 이해하기

인파_

📘 타입스크립트 느낌표 단언 연산자

인파_

📘 객체를 타입으로 변환 - keyof / typeof 사용법

인파_

📘 타입스크립트 Generic 타입 정복하기

인파_

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역