몽땅뚝딱 개발자

◽ Partial 특정 타입의 부분 집합을 정의할 때 사용한다. interface UserInfo { name: string age: number } type User = Partial const user1: User = {} const user2: User = { name: 'hi' } const user3: User = { name: 'hello', age: 20000 } ◽ Record 타입스크립트에서는 인덱스 시그니처(Index Signature)는 대괄호로 객체를 접근하는 방법을 사용할 수 있다. 인덱스 시그니처의 경우 문자열 리터럴을 key로 사용하지 못하지만, Record는 가능하다. 예제 1. // 1. 인덱스 시그니처를 사용했을 때 type UserInfo = { [name: string..

CASE 1. Action 유니온을 인덱싱하여 반복 없애기 interface SaveAction { type: 'save'; // ... } interface LoadAction { type: 'load'; // ... } type Action = SaveAction | LoadAction type ActionType = 'save' | 'load' // 타입이 반복된다. // Action 유니온을 인덱싱하면 타입 반복 없이 ActionType을 정의할 수 있다. type ActionType = Action['type'] // 타입은 'save' | 'load' // 하지만 pick을 사용하면 다른 결과를 얻는다. type ActionRec = Pick // {type: 'save' | 'load'} C..

📍 클릭 시 이동! 1. 분기문 사용하기 2. instanceof 사용하기 3. 속성 체크하기 4. 명시적 '태그' 붙이기 5. 사용자 정의 타입 가드 사용하기 추가. 주의할 점 ◽ 1. 분기문 사용하기 예제 1. if문 const el = document.getElementById('foo') // 타입: HTMLElement | null if(el) { el // 타입: HTMLElement } else { el // 타입: null } 예제 2. 에러 던지기 const el = document.getElementById('foo') // 타입: HTMLElement | null if(!el) throw new Error('변수를 찾을 수 없습니다.') el // 타입: HTMLElement ◽ 2...

◽ as const const는 변경할 수 없는 변수를 선언할 때 사용하는 것이고, as const와는 다르다. as const는 타입스크립트가 해당 값에 추정되는 많은 타입들 중에서 최대한 좁은 타입으로 추론할 수 있도록 한다. 예를 들어, 원시형 타입은 const로 선언하면 변경이 불가능하지만 Array나 Object는 원시형 타입이 아닌 참조 타입이기 때문에 const로 선언하더라도 깊은(deep) 변경을 실행할 경우 값을 바꿀 수 있다. 따라서 참조 타입은 필요한 경우, const 단언문을 사용하여 타입을 좁히거나 변경할 수 없도록 만들 수 있다. // 타입은 { x: number, y: number } const v1 = { x: 1, y: 2, }; v1.x = 3 // 정상: 변경이 가능하다..

◽ Readonly - Readonly는 속성을 읽기만 가능하도록 설정하여 매개변수가 변경되는 것을 방지한다. - 변경이 발생하는 코드를 쉽게 찾을 수 있으며, 변경하면서 발생하는 오류를 방지할 수 있다. - 단, Readonly는 얕게 동작하므로 깊은(deep) readonly 타입이 필요하다면 ts-essentials에 DeepReadonly 제네릭을 사용하면 된다. interface Outer { inner: { x: number; } } // 이렇게도 적을 수 있다. // const o: { readonly Outer } const o: Readonly = { inner: { x: 0 } }; // 할당할 수 없다. o.inner = { x: 1 }; // 하지만 이건 가능한데, readonly가..

◽ 인터페이스(interface) 인터페이스의 특징으로는 보강을 할 수 있다는 것인데, 이를 선언 병합(declaration merging)이라고 한다. 선언 병합은 반드시 인터페이스를 사용해야 한다. interface IState { name: string; capital: string; } interface IState { population: number; } const text: IState { name: 'test', capital: 'TEST', population: 50000 } ◽ 타입(type) 인터페이스는 타입을 implements로 확장할 수 있지만 유니온 같은 복잡한 타입은 확장 할 수 없다. 타입은 유니온이 가능하다. type AorB = 'a' | 'b' 💡 타입과 인터페이스를 ..

타입스크립트에서 변수에 값을 당하고 타입을 선언하는 방법은 타입 선언, 타입 단언 2가지 형태가 있다. 📄 사용예제 interface Person { name: string }; // 타입 선언: 그 값이 선언된 타입임을 명시 const alice: Person = { name: 'Alice' }; // 타입 단언: 타입스크립트가 추론한 타입이 있더라도 Person 타입으로 간주 const alice = { name: 'Alice' } as Person; ◽ 타입 선언 타입 선언은 할당되는 값이 해당 인터페이스를 만족하는지 검사한다. 아래 예제에서는 Person에 맞는 속성이 없기떄문에 타입스크립트에서 오류를 표시한다. // 타입 선언 const alice: Person = {}; // error: 'P..

◽ Exclude T에 지정된 타입들 중 U에 나열된 타입들은 제외하여 정의한다. /** * Exclude from T those types that are assignable to U */ type Exclude = T extends U ? never : T 예제 1. type TChar = "a" | "b" | "c" | "d" type T00 = Exclude; // "b" | "d" 예제 2. interface IUser { name: string age: number birth: Date death: Date } type User = Exclude // type User = "name" | "age" | "birth" ◽ Extract // Extract: T에 지정된 타입들 중 U에 나열된 타..

◽ 제네릭 사용하기 function logText(text: T):T { console.log(text); return text; } logText('안녕') ◽ 제네릭의 장점 유니온을 사용하는 경우 명확한 변수타입이 지정되지않아 생기는 문제들이 있었다. 제네릭은 호출시점에 타입을 지정하므로 이런 문제점을 해결할 수 있다. function logText(text: T):T { console.log(text); return text; } logText('안녕') logText(123) logText(true) ◽ 제네릭 적용하기 [before] // 이렇게 선언하는 경우 type에 따라 여러개의 인터페이스를 만들어주어야 한다. // 유지보수면에서 효율성이 떨어진다. interface DropdownStr ..

◽ 이넘(enum)이란? 이넘은 특정 값들의 집합을 의미하는 자료형이다. ◽ 예제 숫자형 이넘을 살펴보자. enum Shoes { Nike, // 0 Adidas // 1 } const shoes = Shoes.Nike; console.log(shoes); // 0 문자형 이넘을 살펴보자. enum Shoes { Nike = '나이키', Adidas = '아디다스' } const shoes = Shoes.Nike; console.log(shoes); // '나이키' ◽ enum을 사용해보자 enum Answer { Yes = 'Y', No = 'N' } function askQuestion(answer: Answer) { if(answer === Answer.Yes) { console.log('정답입..