본문 바로가기

프론트엔드/TS 공부7

제네릭 JavaScript 기능들 1. querySelector() 함수 어떤 DOM 노드가 리턴될지 모르기 때문에 HTMLElement 라는 일반적인 타입으로 정의된다. 하지만 타입을 확신할 수 있는 경우에는 직접 제네릭 타입을 정의하면 된다. const elem = document.querySelector('input.username'); 2. Map 키와 밸류를 갖는 자료구조. 타입 파라미터로 키와 밸류의 타입을 정의하고 사용할 수 있다. const peopleMap = new Map(); peopleMap.set(people1.id, people1); peopleMap.set(people2.id, people2); 3. Set 배열과 비슷하지만 중복된 요소를 추가할 수 없다. 수학에서 집합에 해당하는 자.. 2023. 8. 22.
이넘(enum) 이넘(enum) - 특정 값의 집합을 의미하는 데이터 타입 - 상수 집합이라고도 표현한다. - 비슷한 성격이나 같은 범주에 있는 상수를 하나로 묶어 더 큰 단위의 상수로 만드는 역할 숫자형 이넘 - 이넘에 선언된 속성은 기본적으로 숫자 값을 갖는다. - 첫 번째 속성부터 0, 1, 2, 3이 할당된다. enum Direction { Up, // 0 Down, // 1 Left, // 2 Right, // 3 } // 초기값 변경 enum Direction { Up = 10, Down, // 11 Left, // 12 Right, // 13 } cf. 리버스 매핑(reverse mapping) - 이넘의 속성과 값이 거꾸로 연결되어 할당되는 것 문자형 이넘 - 이넘의 속성 값에 문자열을 연결한 이넘 - 숫.. 2023. 7. 26.
타입 별칭(type alias) cf. 리터럴 타입 - 변수의 값을 타입으로 정의하는 타입 let을 사용하느냐 const를 사용하느냐에 따라 타입이 다르게 추론된다. let literal1 = '타입스크립트 공부'; const literal2 = '타입스크립 익히기'; let medium = 90; const large = 100; 타입 별칭(type alias) - 타입을 마치 변수에 저장하여 사용하는 느낌 - 특정 타입이나 인터페이스 등을 참조할 수 있는 타입 변수를 의미 - 타입에 의미를 부여해서 별도의 이름으로 부르는 것 - 가장 큰 장점 : 반복되는 타입 코드를 줄여 준다. 타입 별칭과 인터페이스의 차이 1) 코드 에디터에서 표기 방식 차이 - 타입 별칭은 타입 정보가 나타난다. 2) 사용할 수 있는 타입의 차이 - 인터페이스.. 2023. 7. 26.
유니언 타입(union type) / 인터섹션 타입(intersection type) 유니언 타입(union type) 여러 개의 타입 중 한 개만 쓰고 싶을 때 사용하는 문법 OR 연산자의 | 를 이용하여 여러 개의 타입 중 1개를 사용하겠다고 선언하는 방식 function bookPage(text: string | number) { console.log(text); } 타입이 다르다는 이유로 함수를 하나 더 작성해서 관리해야 하는 불편함을 해결해준다. any 타입을 사용하는 것보다 더 타입을 정확하게 사용할 수 있다. any 타입은 지양하는 것이 좋다. - any 타입은 타입이 없는 것과 마찬가지이므로 타입스크립트의 장점을 살리지 못한다. - 또한 타입이 정해져 있을 때 자동으로 속성과 API를 자동 완성하는 기능을 지원받지 못환다. - 자동완성 기능을 이용할 수 없으므로, 오탈자가 .. 2023. 7. 26.
인터페이스(Interface) 인터페이스(Interface) 타입스크립트 코드를 작성할 때 자주 쓰는 문법 객체 타입을 정의할 때 사용하는 문법 프론트엔드 개발과 백엔드 개발로 나누어 웹 애플리케이션을 만들 때, 서버에서 어떻게 데이터를 줄지 정하는 작업을 '인터페이스를 맞춘다'고 표현하기도 한다. 인터페이스로 타입을 정의할 수 있는 부분 1) 객체의 속성과 속성 타입 인터페이스의 타입과 맞지 않는 객체에 인터페이스를 지정한다면 에러가 발생한다. interface Book { name: string; page: nuber; } let TypeScript: Book { name: '타입스크립트', page: 462 }; // Error let JavaScript: Book { name: '자바스크립트', page: 734, hobby:.. 2023. 7. 26.