경험하는 IT

TypeScript - if else in types

if else in types if 조건문 처럼 "조건에 따라서 이럴 경우 string, 저럴 경우 number" 와 같이 타입지정이 가능하다. 조건부로 타입만들기 type Age = T; 위 코드에서 Age라고 쓰면 number가 된다. 이걸 "타입 파라미터 자리에 string 타입을 집어넣으면 string을 부여하고 그게 아니면 전부 unknow 부여한다" 에 조건문으로 바꿔 볼 것이다. 타입 조건식은 주로 extends 키워드와 삼항연산자를 이용한다. extends는 왼쪽이 오른쪽의 성질을 가지고 있냐 라는 뜻으로 사용할 수 있기 때문에 조건식 용도로 사용가능하다. type Age = T extends string ? string : unknown; let age : Age //age는 string..

TypeScript - type mapping

Type mapping 특정한 타입을 다른 타입으로 변환하는 과정을 의마한다. 이를 통해 코드의 유지보수성을 높이고 가독성을 향상시킬 수 있다. 주로 제네릭(Generic)과 함께 사용되며, 주로 유연한 코드 작성이 요구되는 상황에서 활용된다. keyof 연산자 keyof는 object 타입에 사용하면 object 타입이 가지고 있는 모든 Key값을 union type으로 합쳐서 내보낸다. interface Person { age: number; name: string; } type PersonKeys = keyof Person; //"age" | "name" 타입됩니다 let a :PersonKeys = 'age'; //가능 let b :PersonKeys = 'ageeee'; //불가능 person ..

TypeScript - Index signature

Index signatures 객체(object)의 속성을 동적으로 정의하는 방법 중 하나이다. 객체가 특정 속성을 가질 때마다 해당 속성의 유형을 지정할 수 있다. 일반적으로 객체의 속성은 사전에 정의되어야 하지만 때로는 런타임 시에 정의되는 동적인 속성이 필요할 수 있다. 이런 경우 index signatures를 사용하여 객체의 속성을 유연하게 처리할 수 있다. - index signatures 기본구문 { [propertyName: string]: propertyType; } 여기서 [propertyName: string]은 객체의 속성 이름을 나타내며, 'propertyType' 은 해당 속성의 유형을 나타낸다. 이러한 색인 서명을 사용하면 객체의 속성이 사전에 정의되지 않은 경우에도 TypeS..

TypeScript - implements

Implements 키워드 클래스가 특정 인터페이스를 구현할 때 사용된다. JavaScript를 보완하여 정적 타입 검사를 지원하는 TypeScript에서는 인터페이스를 사용하여 코드의 구조를 정의하고, 클래스가 해당 구조를 따르도록 강제할 수 있다. class Car { model : string; price : number = 1000; constructor(a :string){ this.model = a } } let 붕붕이 = new Car('morning'); class Car로 부터 생산되는 object들은 model과 price 속성을 가지게 된다. 근데 class가 model, price 속성을 가지고 있는지 타입을 확인하고 싶다면 interfece + implements 키워드로 확인하면..

TypeScript - declare

TypeScript 에서 'declare' 키워드는 타입 선언이나 외부 라이브러리에 대한 타입 정의를 할 때 사용된다. 이는 TypeScript 컴파일러에게 해당 이름이 이미 존재한다는 것을 알려주는 역할을 한다. 주로 외부 라이브러리나 모듈에서 가져온 것을 선언할 때 사용된다. 'declare'는 런타임 코드를 생성하지 않는다. 대신, 컴파일러 타입 체크를 위해 사용된다. 1. 외부 라이브러이에서 가져온 모듈 선언 // externalLibrary.d.ts declare module 'external-library' { export function someFunction(): void; export const someValue: number; } // 사용 예제 import { someFunction,..

TypeScript - TypeScript + Redux

🖥️ Redux 란? 2024.02.19 - [👨‍💻 React] - Redux 이전 글을 참고하자 ⌨️ Redux Toolkit 및 react-redux 설치 // npm npm install @reduxjs/toolkit react-redux // yarn yarn add @reduxjs/toolkit react-redux Redux를 카운터 예제로 알아보자. import React from 'react'; const Counter: React.FC = () => { const counter = 0; return ( {counter} 더하기 빼기 ); }; export default Counter; 버튼을 눌러서 counter를 조작하는 컴포넌트가 있다. 지금은 버튼을 눌러도 작동하지 않을 것이다. ..

TypeScript - React + Typescipt

🖥️ React와 TypeScript 활용하기 React에 TypeScript를 활용한다면 다음과 같은 이득을 따져봐야 한다. 프로젝트 사이즈가 큰가 협업시 다른 사람이 짠 코드를 참조할 일이 많은가 장기적으로 유지보수에 도움이 되는가 나중에 팀원이 더 필요해도 인력수급이 쉽게 가능한가 팀원들 학습에 필요한 시간과 비용이 적게 드는가 TypeScript를 남들이 쓴다고 무조건 적으로 쓰는 행위는 하지말아야 한다. ⌨️ React + TypeScript 설치 npx create-react-app 프로젝트명 --template typescript TypeScript 셋팅이 완료된 프로젝트를 설치 하는 방법이다. 기존 프로젝트에 TypeScript만 더하고 싶다면 기존 프로젝트 경로에서 다음과 같은 명령어를 ..

TypeScript - TypeScript Generics

🖥️ Generics TypeScript 에서 Generics는 코드의 유연성을 높이고 타입 안정성을 유지하는 데 사용되는 강력한 도구이다. Generics를 사용하면 함수, 클래스, 인터페이스 등에서 여러 타입을 다룰 수 있으며, 코드의 재사용성을 높일 수 있다. 🖥️ Generics의 기본 구문 function 함수이름(매개변수: T): T { // 함수 내용 return 매개변수; } 는 제네릭 타입 매개변수를 나타낸다. 이 매개변수는 함수 내부에서 사용되는 모든 타입을 대표한다. 🖥️ 함수에서의 Generics function identity(arg: T): T { return arg; } // 사용 예제 let result = identity("Hello, TypeScript Generics!"..

TypeScript - public, private

TypeScript를 쓰면 JavaScript에 없는 문법도 사용이 가능하다. 객체지향 언어에서 제공하는 public, private, static, protected 키워드를 사용이 가능하다. 🖥️ Public TypeScript에서 public 키워드는 클래스의 멤버(속성 또는 메서드)를 외부에서 접근 가능하도록 지정하는 접근 제어자(access modifier) 중 하나이다. 클래스의 멤버는 기본적으로 'public' 으로 설정되어 있으므로, 'public' 키워드를 명시적으로 사용하지 않아도 된다. 그러나 명시적으로 사용하면 코드의 가독성을 높일 수 있다. class User { public name: string; constructor(){ this.name = 'kim'; } } let use..

TypeScript - TypeScript never type

🖥️ never type? never 타입은 TypeScript에서 모든 타입의 하위 타입으로, 절대 발생하지 않는 값의 타입을 나타낸다. 주로 함수의 반환 타입으로 사용되며, 해당 함수가 하상 예외를 던지거나 무한 루프에 빠지는 등의 상황에서 유용하게 활용된다. 🖥️ 항상 예외를 던지는 함수 function throwError(message: string): never { throw new Error(message); } // 이 함수가 예외를 던진다면, 그 결과는 never 타입으로 판단됩니다. const result: never = throwError("Something went wrong!"); 🖥️ 무한 루프에 빠진 함수 function infiniteLoop(): never { while (t..

TypeScript - rest parameter / destructuring

🖥️ Rest parameter 개념 TypeScript에서 Rest parameter는 함수의 파라미터로서 사용 되며, 함수가 임의의 개수의 인자를 받을 수 있게 해준다. Rest parameter는 함수 정의에서 세 개의 점(...)으로 표시되며, 이는 나머지 모든 인자를 배열로 수집한다는 것을 의미한다. 간단하게 Rest parameter 개념 설명을 해보자. 함수에 어떤 parameter가 몇 개 들어올지 미리 정의가 불가능한 경우가 있다. 이럴경우 점(...)으로 Rest parameter를 만들어 주면된다. function Add(...a){ console.log(a) } Add(1,2,3,4,5) Rest parameter는 다른 일반 파라미터 뒤에만 나올 수 있다. Rest paramete..

TypeScript - 타입스크립트 Interface

🖥️ Interface 문법 타입스크립트에서 인터페이스(interface)는 코드를 구조화하고 타입을 정의하는데 사용된다. 인터페이스는 객체의 구조를 설명하며, 클래스, 함수 등에서 사용할 수 있다. 🖥️ Interface의 정의 interface Person { name: string; age: number; email?: string; // 옵셔널 프로퍼티 sayHello(): void; // 메서드 정의 } let person: Person = { name: 'John', age: 25, sayHello() { console.log('Hello!'); } }; 기본 인터페이스 구조 : 'interface' 키워드를 사용하여 인터페이스를 정의한다. 위의 코드에서 'Person' 인터페이스는 'name..