반응형 Language199 [TypeScript] 유니언 타입 (Union Type) 과 교차 타입 (Intersection Type) TypeScript의 유니언 타입과 교차 타입에 대해 알아보자. Union Type 아마 타입 스크립트를 사용하다 보면 가장 흔하게 볼 수 있는 게 유니언 타입이 아닐까 생각이 든다. 타입명 그대로 유추해볼 수 있는데, 여러 타입들을 조합하여 사용하는 방법이다. type Direction = 'left' | 'right' | 'up' | 'down'; const move = (direction: Direction) => { console.log(direction); } move('left'); move('right'); // error: '"leftRight"' 형식의 인수는 'Direction' 형식의 매개 변수에 할당될 수 없습니다. move('leftRight'); 이전 게시글에서 정리한 문자열 리.. 2022. 6. 2. [TypeScript] 타입 별칭과 문자열 리터럴 (Type Alias, String Literal) Type Alias와 String Literal에 대해 알아보자. Type Aliases 기본적으로 타입스크립트는 변수나, 객체, 함수 반환 값 등에 타입을 지정하게 되는데, 특히 객체 타입과 유니언 타입을 사용할 때 Type Alias가 필요하다. 이는 똑같은 타입을 재사용하거나, 또 다른 이름으로 부르고 싶은 경우에 아주 유용하게 사용된다. type Point = { x: number; y: number; }; function printCoord(pt: Point) { console.log("The coordinate's x value is " + pt.x); console.log("The coordinate's y value is " + pt.y); } let point: Point = { x: 1.. 2022. 6. 2. [TypeScript] 함수에서의 타입 사용 (ft. optional, default, rest) 이번에 정리할 글은 특정 타입이라기보다는 함수에서 타입을 지정해 사용하는 방법에 대해 정리하고자 한다. ▷ 일반적인 사용방법 const plus = (a: number, b: number): number => a + b; function minus(a: number, b: number): number { return a - b; } plus(1, 2); // 3: number type plus("1", 2); // error 'string' 형식의 인수는 'number' 형식의 매개 변수에 할당될 수 없습니다. minus(3, 1); // 2: number type 보통 타입스크립트에서의 함수는 이런식으로 매개변수의 타입들과 반환 타입 이렇게 둘을 선언해주어야한다. 그리고 당연히 반환값과 동일한 타입의 .. 2022. 6. 1. [TypeScript] 객체타입 - object, array, tupple 타입 스크립트에서 사용하는 타입 중에 object, array, tupple 객체 타입에 대해 알아보자. Object object타입은 javascript에서라면 정말 흔하게 자주 사용하던 타입이나, typescript에서 사용하려면 조금 까다롭다. 그 이유는 객체 안에 사용되는 모든 값들의 타입을 정해줘야 하기 때문이다. object를 사용하는 몇몇 방법에 대해 알아보자. ▷ 일반 객체 타입 정의 let obj: object; obj = { name: "mine", age: 3 }; obj = { obj: {}, arr: [], boal: true }; 그냥 javascript처럼 사용하고자 한다면 object 타입을 그대로 명시해 줘도 좋으나 이럴 경우 typescript를 사용하는 이유가 없기 때문.. 2022. 6. 1. [TypeScript] 기본타입 (2) - void, never, unknown, any 타입 스크립트에서 사용하는 타입 중에 void, never ,unknown, any 타입에 대해 알아보자. 이전 게시글에서는 원시타입 위주로 정리하였는데, 이번에는 그 외 타입들 (object 나 array 같은 것들은 다음 게시글에서 정리하고...)에 대해 알아보고자 한다. Void void 타입은 자바를 사용해본 사람은 알겠지만 보통 함수에서 반환 값이 없을 때 반환 타입을 표현하기 위해 사용된다. 물론 일반 타입 변수로 선언할 수 있으나, 해당 변수에는 undefined만 할당할 수 있기 때문에 사용을 안 한다. (--strictNullchecks를 사용하지 않으면 null 역시 가능하나 일반적으로 해당 옵션을 사용하기 때문에 넘어가자.) let unusable: void = undefined; u.. 2022. 5. 31. [TypeScript] 기본타입 (1) - number, string, boolean, undefined, null 타입 스크립트에서 사용하는 타입 중에 string, number, boolean, undefined, null 타입에 대해 알아보자. JavaScript에서 아주 흔하게 사용되는 세 가지의 원시 타입인 string, number 그리고 boolean에 대해 먼저 배워보자. TypeScript는 단지 타입만 지정해주는 것으로 script와 사용법이 동일하다 생각하면 된다. 문자열 (String) 기본적으로 JavaScript에서 사용하는 것과 마찬가지로 큰 따옴표, 작은따옴표 그리고 당연히 백 틱도 사용할 수 있다. let str: string = "Hello World!"; str = 'Hello TS'; const blog = 'mine-it-record'; str = `Hello, my ${blog}.. 2022. 5. 31. [TypeScript] 타입스크립트 시작하기 - 설치 및 환경 설정 (ft. VSCode) VSCode에서 타입 스크립트를 사용해보자. 우선 당연하게도 npm을 사용할 것이기 때문에 node.js가 있다고 가정하고, VSCode 역시 사용 중이라는 가정하에 진행한다. 일단 폴더를 하나 만들어주고 거기서 npm 환경을 만들어보자. (아래 블로그 참조) https://mine-it-record.tistory.com/500 [VSCode] package.json 설정 - NodeJS를 사용한 npm 패키지관리 VSCode에서 프로젝트에 각종 확장 모듈등을 설치하고자 할때 NodeJS의 npm을 많이 사용하게 된다. 그리고 그러한 모듈들을 관리하고자 하는 역할을 하는 녀석인데 필요하기도하고 한번 정리하고 넘 mine-it-record.tistory.com 사실 글로벌로 설치하게되면 특정 폴더와 npm.. 2022. 5. 30. [JavaScript] 문서의 로딩되는 시점 이벤트 제어하기 (ft. DOMContentLoaded, load, beforeunload, unload) 문서에 따르면 HTML 문서의 생명주기엔 다음과 같은 3가지 주요 이벤트가 관여한다고 한다. DOMContentLoaded - 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생한다. 이미지 파일()이나 스타일시트 등의 기타 자원은 기다리지 않는다. load - HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생한다. beforeunload/unload - 사용자가 페이지를 떠날 때 발생한다. 각각의 시점 이벤트이기 때문에 당연히 이벤트를 주입해서 사용해주면 된다. // only document window.addEventListener("DOMContentLoaded", (event) => { console... 2022. 5. 27. [JavaScript] element.matches() - 해당 엘리먼트가 CSS 선택자(selector)로 선택이 되는지 여부 확인 matches() 메서드는 기준 element가 CSS 선택자처럼 (예를 들어 #id, .class, [href ^= https] 등의 선택자들) 선택이 되는지 여부를 확인하는 메서드다. ▷ 구문 targetElement.matches(selectorString); selectorString: CSS 선택자와 동일한 표현식의 문자열 ▷ 예제 1) matches 사용법 Here is id div-01 Here is id div-02 Here is class div-03 mineItRecord const div0 = document.querySelector('#div-0'); const div1 = document.querySelector('#div-1'); const div2 = document.query.. 2022. 5. 27. 이전 1 2 3 4 5 6 ··· 23 다음 반응형
