My Boundary As Much As I Experienced

1. 제네릭 타입함수에 적용하는 경우:함수, 인터페이스, 클래스, 타입 별칭 등에 제네릭 타입 매개변수를 지정할 때 사용된다. 안에 제네릭 타입 매개변수 (ex: K, V)를 쓰면 된다.타입 매개변수 정리:제네릭 타입 매개변수 (Generic Type Parameters)T, U, V와 같은 대문자 알파벳을 사용하여 타입 매개변수를 나타낸다. 이들은 타입스크립트의 제네릭을 사용하여, 타입을 추상화하고 재사용할 수 있게 한다.구체적 타입 (Concrete Types)string, number, boolean 등의 원시 타입이나 더 복잡한 객체 타입 등을 직접 사용하는 경우다. 이런 경우에는 제네릭 타입 매개변수에 구체적인 타입을 대입하여 특정 타입의 값을 처리하게 된다. 예를 들어, Array은 문자열만을..

타입스크립트에서 & 연산자를 쓰는 경우는 두 가지 있다.그런데 수많은 블로그나 포스트에서 인터섹션 타입이나 인터페이스 결합에 대해 잘못 설명하고 있는 경우가 많다.타입스크립트에서 관련 로직이 한 번 바뀌기라도 했나 의심될 정도다..하여튼 chatGPT도 이를 참조해 틀린 얘기를 많이 한다.계속 불분명한 지식이 돌아다니면서 나를 헷갈리게 해서 이참에 정리해봤다. 1. 인터섹션 타입으로 '객체형이 아닌' 타입들을 조합할 때 (교집합)여타 블로그에서 인터섹션 타입이 합집합이라고만 해서 '그냥 언제나 합집합이구나.' 하면 안 된다.chatGPT도 그걸 참조하는지 합집합이 아닌 경우에도 합집합이라 하는 경우가 있더라..엄밀히 말하자면 intersection이라는 단어 자체가 '교집합'을 의미한다. 예를 들어 아래..

타입스크립트에서 extends 키워드는 주로 두 가지 주요 용도로 사용된다.인터페이스 확장과 조건부 타입에서의 활용이다. 또한, 클래스를 상속할 때도 사용되지만, 여기서는 타입스크립트 관련 활용법만 다루겠다.1. 인터페이스 확장타입스크립트에서 extends를 사용하여 한 인터페이스가 다른 인터페이스를 확장할 수 있다. 이를 통해 인터페이스 간에 코드를 재사용하고, 계층적인 타입 정의를 구성할 수 있다.  코드 재사용과 계층적인 타입 정의가 뭔지는 나중에 알아보고 일단 예시를 보겠다. 아래 Shape라는 interface는 sideLength라는 속성이 있다.그리고 Square는 이를 상속받으면서 numberOfAngle라는 속성도 가지도록 'extends Shape'를 했다.interface Shape ..

emotion으로 ThemeProvider 세팅을 하던 도중, theme의 타입이 불명확해서, 아래 경우에 color에 타입을 찾을 수 없다는 둥 에러가 났다. background-color: ${({ theme }) => theme.color.gray100}; 처음엔 typescript의 interface를 사용해서 타입지정을 다 해주려 했다. interface Theme { color: { darkGray900: string; darkGray800: string; darkGray700: string; darkGray600: string; darkGray500: string; darkGray400: string; ... 그런데 interface로 만든 Theme type을 실제 theme객체에 위 타입..

타입 가드 - typeof typeof 조건식으로 처리되는 타입을 방어하는 코드이다. 주로 조건문으로 구성된다. 타입스크립트는 null이나 undefined의 가능성, 패러미터에 다른 타입이 들어올 가능성들을 추적하여 사용자에게 경고한다. function add(a: Combinable, b: Combinable): Combinable { if (typeof a === "string" || typeof b === "string") { // 조건식으로 처리되는 타입을 방어. return a.toString() + b.toString(); } return a + b; // must be Number } If 문에 typeof를 활용하여 a가 문자거나, b가 문자인 경우를 걸러주었다. 그러니 마지막 retur..

교차 타입 커스텀 타입을 혼합해서 쓸 수 있다. 사용법1. 객체 커스텀 타입과 객체 커스텀 타입을 혼합하면 합집합을 강제한다. type Admin = { name: string; privilages: string[]; }; type Employee = { name: string; startDate: Date; // 자바스크립트 Date객체를 말한다. }; type ElevatedEmployee = Admin & Employee; // 이런걸 교차타입이라고 한다. const e1: ElevatedEmployee = { name: "Max", privilages: ["create-server"], startDate: new Date(), }; console.log(e1); 인터페이스를 커스텀 타입으로 조합할..

두 개 중 뭘 사용해야 되나? 거의 비슷해서 서로 immigration해도 문제 없는 경우가 대부분이긴 한데 사소한 차이점들이 있긴 하다. 차이1: 문법 커스텀 타입은 등호를 이용하여 값을 할당한다. // 타입은 등호를 활용하여 값을 할당해준다. type Credit = number type People = { name: string; age: number; } type Id = string | number 인터페이스는 객체 형식꼴로 만든다. // 인터페이스는 객체 형식 혹은 클래스 형식과 비슷하게 생겼다. interface GreenThings { tree: string[]; jewel: string[]; brand: string[]; } interface Korean { name: string; id..

특정 숫자에 의미를 부여해서 타입들을 관리하고 싶을 때, 예를 들어 어떤 게임에서 player = 0, staff = 1, manager = 2 이런 식으로 코드를 부여해서 쓰고 싶다고 하자. 이런 상황에서 유용하게 사용할 수 있는게 enum이다. 이걸 자바스크립트에서 쓰려면 이런식으로 사용한다. // 자바스크립트에서도 통하는 방식 const ADMIN = 0 const READ_ONLY = 1 const AUTHOR = 2 이걸 아래 role에다 넣는게 더 간편할 수 있다. (자바스크립트에도 통하는 방식) 그러나 TS의 enum을 사용하면 조금 더 그룹화된 사용을 할 수 있다. 순서대로 0,1,2,... 식으로 일종의 인덱스가 부여된다. // 각기 변수를 만들지 않고 통합된 하나의 그룹처럼 쓰는게 en..

배열 타입 '배열'의 타입은 : []라고 지정하면... 될 줄 알았다. 그러나 이렇게 빈 배열을 타입으로 지정하면 '진짜 빈 배열' 이외에는 받지 못한다. string[], number[], ... 이런 식으로 어떤 데이터를 받는지를 리터럴 앞에 써줘야 한다. const person: string[] = ["Kim", "Han"] // 문자열만 받는 배열 생성. 초기화 때 비워놔도 된다. 어차피 문자열 들어간다고 선언해놨으니 다른 데이터가 들어갈 가능성은 없다. person.push(5) // 에러 만약 받을 수 있는 데이터 타입이 2개 이상이면 어떻게 할까? 유니언 타입을 [] 앞에 써두면 된다. ([]은 객체 리터럴이라 한다.) const person: (string|number)[] = ["Kim"..

직관적으로 오브젝트의 타입 지정은 아래처럼 하면 될거같다. const person: object = { name: "bumang", age: 30, }; 하지만 이건 틀렸습니다~ object라고 타입지정을 해버리면 타입스크립트는 이게 빈 객체{} 인줄 안다. 빈 객체가 아니라 안에 속성들이 있다면 그 속성들의 타입을 모두 지정해줘야 한다. const person: object = { name: "bumang", age: 30, }; // 라고 쓰면 const person: {} = { name: "bumang", age: 30, } // 처럼 쓴 것과 같다. // 둘 다 안 된다. 타입스크립트에서 객체의 타입을 명확히 기입하려면 아래처럼 하면 된다. const person: { name: string; ..