TypeScript21 [TypeScript]Record Type 사용 방법 Record Type이란? TypeScript는 Version 2.1부터 Utility Type인 Record Type을 도입했습니다. Record Type은 Record 형식으로 키가 Key이고 값이 Type인 객체 타입입니다. 이번 포스팅에서는 Record Type을 사용하는 방법을 소개합니다. 목차 Record Type vs Index Signature keyof와 Record Type을 같이 사용 Record Type vs Index Signature TypeScript에서 인덱스 시그니처(Index Signature)는 대괄호로 객체를 접근하는 방법입니다. 다음은 인덱스 시그니처를 사용하여 객체를 생성합니다. type humanInfo = { [name: string]: number }; let.. TypeScript 2021. 12. 21. [TypeScript]타입스크립트 열거형(enum) 키, 값 확인 TypeScript에서 열거형 타입으로 구현된 집합에 키가 존재하는지 혹은 값이 존재하는지 확인해야 하는 경우가 존재합니다. 이번 포스팅에서는 타입스크립트에서 열거형의 키 또는 값이 존재하는지 확인하는 방법을 정리하였습니다. 목차 열거형 키Key) 확인 열거형 값(Value) 확인 열거형 키(Key) 확인 열거형에 키가 존재하는지 확인하는 방법입니다. 다음 코드와 같이 정의된 Color 열거형이 존재합니다. enum Color { Red = 1, Green = 2, Blue = "BLUE" } 열거형 Color에서 "Blue" 키가 존재하는지 확인하기 위해 in 연산자를 사용할 수 있습니다. enum Color { Red = 1, Green = 2, Blue = "BLUE" } console.log("B.. TypeScript 2021. 9. 17. [TypeScript]타입스크립트 any, unknown 차이 TypeScript에는 다른 프로그래밍 언어에는 존재하지 않는 타입들이 존재합니다. 그중에서 any, unknown이 두 가지 타입은 제대로 이해하지 않으면, 상당히 헷갈리는 타입이며, 스택오버플로우에서도 자주 언급되는 타입입니다. 이번에 타입스크립트에서 사용되는 unknown, any 타입을 공부할 겸 블로그에 정리하였습니다. 목차 any unknown 정리 any 영어에서 한정사 any 단어의 뜻은 '어떤 것이든지, 누구든지'라는 해석을 가집니다. TypeScript에서는 '어떤 타입이든'이라는 의미로 해석할 수 있습니다. 즉, TypeScript에서 any 타입은 어떠한 타입도 허용하는 타입인데요. 타입을 엄격하게 검사하고 처리하는 TypeScript에서 any 타입은 치명적인 존재입니다. 아래 코.. TypeScript 2021. 9. 17. [TypeScript]타입스크립트 Property does not exists on type React 컴포넌트를 TypeScript로 개발할 때, 사용자 정의 HTML 프로퍼티를 사용하는 경우 주로 아래 에러가 발생합니다. 에러 내용 Type '{ type: string;}' is not assignable to type 'DetailedHTMLProps'. Property 'size' does not exists on type 'DetailedHTMLProps'. 에러 사진 에러 원인 col Element는 기본 HTML 태그인데, col Element에는 type 프로퍼티가 존재하지 않습니다. JQuey를 사용하여 개발자가 기본 HTML 태그에 사용자 정의 HTML 프로퍼티를 추가할 수 있는데요. TypeScript는 타입에 엄격한 언어라서 사용자 정의 HTML 프로퍼티의 타입이 정의되지 .. TypeScript 2021. 9. 16. [TypeScript]타입스크립트 게터(getter), 세터(setter) 구현 기존 JavaScript에서는 클래스 개념이 존재하지 않았는데, ECMAScript 6을 시작으로 JavaScript에서도 클래스를 구현할 수 있습니다. 즉, JavaScript에서도 객체 지향 프로그래밍 패러다임을 사용하여 애플리케이션을 개발할 수 있습니다. 클래스의 멤버 변수를 접근하기 위해 멤버 변수에 public 접근자를 사용하여 객체명.멤버변수와 같이 접근할 수 있습니다. 하지만 멤버 변수의 접근자를 public으로 설정하면 정보은닉에 위반되므로 올바른 방법이 아닙니다. 멤버 변수의 정보은닉을 지키기 위해서는 접근자를 private로 설정하고 멤버 변수의 값을 호출하는 게터(getter)와 값을 설정하는 세터(setter)를 구현합니다. 이번 포스팅은 TypeScript에서 게터(getter)와.. TypeScript 2021. 9. 15. [TypeScript]타입스크립트 제네릭 함수(Generic Function) 제네릭(Generic)은 C#과 Java와 같은 객체지향 프로그래밍에서 사용하는 기법입니다. 메서드 매개변수의 구체적인 타입을 기재하지 않고 다양한 타입을 처리할 수 있는 기술이며, 제네릭을 잘 사용한다면 코드의 재사용성을 높일 수 있습니다. 이러한 제네릭은 타입을 엄격하게 처리하는 TypeScript에서도 사용할 수 있으며, 함수, 인터페이스, 클래스의 재사용성을 높일 수 있습니다. 이번 포스팅에서는 타입스크립트에서 제네릭 기법을 사용하여 함수를 구현하는 방법에 대해 정리하였으며, 이론적으로 설명하기에는 한계가 있어서 코드 위주로 정리하였습니다. 목차 제네릭(Generic) any 타입의 문제점 제네릭 화살표 함수(Generic Arrow Function) 제네릭(Genric) 다음은 매개변수를 그대로.. TypeScript 2021. 9. 14. [TypeScript]타입스크립트 물음표(?), 선택적 프로퍼티, 옵셔널 체이닝 타입스크립트(TypeScript)는 타입에 엄격한 프로그래밍 언어이므로 객체 프로퍼티의 타입을 정의했으나 값을 할당하지 않는 경우 에러가 발생합니다. 이러한 경우 선택적 프로퍼티(Optional Properties) 문법을 사용하여 해결할 수 있습니다. 선택적 프로퍼티로 구현된 프로퍼티는 값을 할당하지 않아도 문제가 없습니다. 물음표(?)는 선택적 프로퍼티뿐만 아니라 옵셔널 체이닝(Optional Chaning)에도 사용 가능합니다. 프로퍼티가 null 또는 undefined인 경우 undefined를 반환하는 문법입니다. 이번 포스팅에서는 물음표(?)가 사용되는 선택적 프로퍼티(Optional Properties)와 옵셔널 체이닝(Optional Chaning)에 대해 정리하였습니다. 선택적 프로퍼티(.. TypeScript 2021. 9. 14. [TypeScript]객체(Object) 타입 정의 타입스크립트(TypeScript)는 자바스크립트(JavaScript)에 비해 타입을 엄격하게 처리하므로 변수 또는 객체를 선언할 때, 타입을 정의해야 합니다. 객체의 타입을 정의하는 방법은 interface와 type이 존재하는데, 대부분의 TypeScript 개발자들은 확장성이 좋은 interface 사용을 권장합니다. 하지만, 타입이 심플하거나 절대 변경되지 않는 경우에는 type을 사용하여 객체의 타입을 정의하기도 합니다. 이번 포스팅에서는 interface와 type을 사용하여 객체의 타입을 정의하는 방법 그리고 중첩된 객체의 타입을 정의하는 방법을 정리하였습니다. 일반 객체 타입 정의 object는 interface, class의 상위 타입입니다. Java에서 최상위 클래스가 Object 클래스.. TypeScript 2021. 9. 13. [TypeScript]타입스크립트 느낌표(!) 사용 JavaScript 또는 다른 프로그래밍 언어에서 느낌표(!)는 주로 False를 의미하는 연산자입니다. 하지만, TypeScript에서 변수 뒤에 느낌표(!)를 사용하여 다른 용도로 사용할 수 있는데요. Null이 아닌 어선셜 연산자(Non-null assertion operator) 또는 확정 할당 어선셜(Definite Assignment Assertions) 용도로 사용할 수 있습니다. 이번 포스팅에서는 TypeScript에서 느낌표(!)가 False의 용도가 아닌 다른 용도로 사용하는 경우를 정리하였습니다. Null이 아닌 어선셜 연산자(Non-null assertion operator) Null이 아닌 어선셜 연산자는 피연산자가 null이 아니라고 컴파일러에게 전달하여 일시적으로 Null 제약.. TypeScript 2021. 9. 13. 이전 1 2 다음