TypeScript (22) 썸네일형 리스트형 map 타입, condition 타입 [ map 타입 ] ✏️ map 타입을 사용하면 기존에 있는 타입을 이용하면서 다른 형태로 변환이 가능하다. 예시 코드와 map 타입에 대해 살펴보기 전 아래의 사항을 짚고 넘어가면 좋을 것 같다. 배열의 map API의 개념으로 접근하자. for ... in 반복문의 개념으로 접근하자. keyof : 모든 키를 가져온다. in : 들어있다. [ 예시 코드 1] type Animal = { name: string; age: number; }; 타입 Animal을 만들었으며, 내부에는 속성 name, age에 대한 타입이 명시되어 있다. type AnimalOptional = { name?: string; age?: number; }; 타입 AnimalOprtional을 만들었으며, 내부에는 속성 name.. 클래스로 Stack 구현 언어 자체에서 제공하는 자료 구조인 배열을 사용하지 않고 Stack을 구현해보려 한다. [자료구조] 연결리스트(Linked List): 단일연결리스트, 이중연결리스트 단일 연결 리스트, 이중 연결 리스트의 개념과 구현 velog.io 자료 구조인 단일 연결 리스트를 사용하여 Stack을 구현할 것이기 때문에 단일 연결 리스트에 대해 알고 싶은 경우 위의 블로그에서 단일 연결 리스트에 대해 먼저 살펴보는 것이 좋을 것 같다. 연결 리스트를 사용하고 pop 메서드와 push 메서드를 직접 만들어 Stack을 구현해 보겠다. 시작 전 체크 사항 우선 사용자가 push 메서드에 문자를 전달하게 되면 전달받은 문자를 그대로 저장하는 것이 아닌 문자를 한 번 감싼 node를 만들어 저장할 것이다. 전달받은 문자를 .. Promise에 제네릭(Generic) 문법 적용 프로미스에 제네릭 문법을 사용할 경우의 이점을 아래 예시와 함께 살펴보겠습니다. 예시 const promise = new Promise((resolve, reject) => { setTimeout(() => { reject("성공!"); }, 2000); }); 변수 promise는 비동기 함수 setTimeout이 성공적으로 작동하면 resolve에 인수로 문자 데이터를 전달하는 Promise 인스턴스를 할당받고 있습니다. 변수 promise는 프로미스 타입으로 명시되어 있으며 제네릭 문법을 사용하여 unknown 타입이 명시되어 있습니다. 이는 프로미스가 결국에는 무언가를 성공(resolve)시키기 때문이며 unknown 타입의 명시는 전달하는 문자 데이터로 무엇을 성공시키고자 하는지 타입스크립트가 .. union 타입과 intersection 타입 intersection 타입을 사용하여 union 타입을 명시하는 경우를 아래의 코드와 함께 살펴보도록 하겠습니다. 예시 1 interface TypeEx1 { name: string; age: number; } interface TypeEx2 { name: string; hobby: string; } const ex: TypeEx1 & TypeEx2 = { name: "rati", age: 5, hobby: "eatting", }; 인터페이스 TypeEx1과 TypeEx2는 위와 같이 속성의 타입이 명시되어 있습니다. 인터페이스 TypeEx1과 TypeEx2를 인터섹션 타입을 사용하여 변수 ex의 타입을 명시하고 있습니다. 이 경우 인터페이스 TypeEx1에 명시된 속성 name, age의 내용과 일치.. 인터페이스와 클래스 TypeScript에서 인터페이스를 사용하여 클래스의 타입을 명시해주면 해당 인터페이스를 준수해야 하는 약속처럼 사용이 가능합니다. 클래스의 타입을 인터페이스를 사용하여 명시할 경우의 이점을 아래 예시 코드와 함께 살펴보도록 하겠습니다. 예시 interface Greetable { name: string; greet(content: string): void; } 인터페이스 Greetable는 속성 name과 메서드 greet에 대한 타입이 위와 같이 명시되어 있습니다. class Person implements Greetable { constructor(public name: string) {} greet(content: string): void { console.log(content + " " + th.. 함수의 인수로 콜백 함수 전달 콜백 함수 타입 명시 const func = (cb: (result: number) => void) =>{ cb(10) } 콜백 함수의 타입 명시는 화살표 함수를 사용하여 타입을 명시해 준다. 함수의 타입 명시와 동일하게 콜백 함수의 매개 변수의 타입 명시와 콜백 함수의 반환 타입을 명시해 준다. 참고 사항 const handleAdd = ( num1: number, num2: number, cb: (result: number) => void ) => { const result = num1 + num2; cb(result); }; handleAdd(5, 10, (result) => { console.log(result); }); 함수 handleAdd는 매개 변수 num1, num2의 타입이 number.. 열거형 타입 (Enum) 타입스크립트의 열거형 타입 enum에 대해 예시 코드와 함께 살펴보도록 하겠습니다. 예시 1 const rati = { name: "rati", email: "rati@email.com", age: 5, auth: 0, }; const merry = { name: "merry", email: "merry@email.com", age: 3, auth: 1, }; 변수 rati와 merry는 동일한 구조의 객체를 할당받고 있습니다. 할당받는 객체의 속성 중 auth에 집중해서 살펴보도록 하겠습니다. 변수 rati와 merry를 사용자라 가정하고 속성 auth의 값으로 사용자의 등급을 관리하고 있습니다. 예를 들어 0은 개발자, 1은 읽기 전용 사용자의 의미를 담고 있는 값입니다. 여기서 상황 하나를 더 가정.. Tuple 타입 참고 사항 *본 게시글은 타입스크립트에서 tuple 타입에 대한 참고 게시글입니다. tuple 타입은 길이와 요소의 타입이 고정된 타입스크립트의 타입이다. 즉, 대괄호 안에 명시된 타입의 수만큼 배열의 요소가 존재해야 되며, 요소가 많아도 안되고 적어도 안된다. 당연히 배열의 각 요소의 타입도 일치해야 한다. push 메서드 const items: [string, string] = ["item1", "item2"]; items.push("item3"); console.log(items); 변수 items에 위와 같이 tuple 타입이 명시되어 있고, 명시된 타입과 일치하는 배열이 초기값으로 설정되어 있다. 게시글의 상단에서 언급한 대로라면 배열의 요소의 수가 tuple 타입과 일치해야 하며 많아도 안되는데 push.. 이전 1 2 3 다음
