프로그래밍/TypeScript
[Typescript] 타입스크립트 non-null 단언 연산자 (Non-null assertion operator)
[Typescript] 타입스크립트 non-null 단언 연산자 (Non-null assertion operator)
2022.06.05🎯 Non-null assertion operator A new ! post-fix expression operator may be used to assert that its operand is non-null and non-undefined in contexts where the type checker is unable to conclude that fact !연산자는 앞의 값이 null or undefined가 아니라는 단언할 때 사용한다. // Compiled with --strictNullChecks function validateEntity(e?: Entity) { // e는 null또는 유효한 값일 수 있다. } function processEntity(e?: Entity) { validate..
[TypeScript] 타입스크립트 인덱스 시그니처 (Index Signature)
[TypeScript] 타입스크립트 인덱스 시그니처 (Index Signature)
2021.11.29🎯 타입스크립트 인덱스 시그니처 (Index Signature) 📝 자바스크립트 Index Signature const dog = { breed: "retriever", name: "elice", bark: () => console.log("woof woof"), }; dog["breed"]; // value의 key인 breed 문자열로 객체의 value 접근 => 'retriever' 객체의 특정 value에 접근할 때 그 value의 key를 문자열로 인덱싱해 참조하는 방법 📝 타입스크립트 Index Signature interface Dictionary { [key: number]: T; } let keys: keyof Dictionary; // 숫자 let value: Dictionary['fo..
[TypeScript] 타입스크립트 타입 단언 (Type Assertion)
[TypeScript] 타입스크립트 타입 단언 (Type Assertion)
2021.11.29🎯 타입스크립트 타입 단언 (Type Assertion) 타입스크립트가 추론하지 못하는 타입을 as키워드를 통해 명시해주는 것 사용법 : 변수 as 타입 chaining 하는 경우 변수를 괄호로 감싼 뒤 그 안에서 as 키워드를 사용 as뒤에 명시하고자 하는 데이터 타입을 작성해주면 된다. 실제 데이터 타입을 변경하지 않고 타입 에러가 나지 않게끔만 해준다. 📝 Type Casting과 Type Assertion의 차이점 Type casting : 데이터의 타입을 변환 ⇒ 실제 타입이 변하는 것 Type assertion : 데이터의 타입을 명시 ⇒ 데이터 타입에 영향을 안 준다. 📝 Type Assertion 사용법 // as let someValue: unknown = "this is a string..
[TypeScript] 타입스크립트 함수 오버로딩 : Function Overloading
[TypeScript] 타입스크립트 함수 오버로딩 : Function Overloading
2021.11.29🎯 타입스크립트 함수 오버로딩 : Function Overloading 동일한 이름에 매개 변수만 다른 여러 버전의 함수를 만드는 것을 함수의 오버로딩이라고 한다. 파라미터의 형태가 다양한 여러 케이스에 대응하는 같은 이름을 가진 함수를 만드는 것 함수의 다형성(다양한 형태)을 지원하는 것 function 키워드로만 함수 오버로딩을 할 수 있으며 arrow function으로는 오버로딩을 할 수 없다. 📝 Function Overloading는 언제 사용할 수 있을까? const addZero = (num: number) => (num > 9 ? "" : "0") + num; function formatDate(date: Date, format = "yyyyMMdd"): string { const yyy..
[TypeScript] 타입스크립트 null 병합 연산자 (Nullish Coalescing Operator)
[TypeScript] 타입스크립트 null 병합 연산자 (Nullish Coalescing Operator)
2021.11.29🎯 타입스크립트 null 병합 연산자 (Nullish Coalescing Operator) null 병합 연산자 사용법 : A ?? B es2020에서 추가된 문법이며 좌항이 null, undefined인 경우에만 B를 리턴한다. null, undefined를 제외한 falsy 값을 그대로 리턴 하고 싶은 경우 사용한다. 기존의 A || B는 A가 falsy 한 값(0, ‘’, -0, NaN 등)인 경우 B를 반환한다. 📝 Default 값을 정의할 때 :: ||를 쓰는 경우와 ??를 쓰는 경우 📕 OR(||) 사용 // price가 0인 경우 -1 반환 function getPrice(product: { price?: number }) { return product.price || -1; } price..
[TypeScript] 타입스크립트 옵셔널 체이닝 (Optional Chaining)
[TypeScript] 타입스크립트 옵셔널 체이닝 (Optional Chaining)
2021.11.29🎯 타입스크립트 옵셔널 체이닝 (Optional Chaining) 옵셔널 체이닝은 객체뿐만 아니라 배열과 함수에도 사용할 수 있다. 접근하는 객체의 프로퍼티가 null 또는 undefined일 수 있는 optional property인 경우 if 문을 사용하지 않고 넘어가게 하는 체이닝 방법이다. es2020에서 추가된 문법이며 객체가 null 또는 undefined이면 undefined를 리턴하고 그렇지 않은 경우 데이터 값을 리턴한다. 프로그래밍에서 ?는 보통 옵셔널을 뜻한다. 있을 수도 있고 없을 수도 있다. ex) data?.property 📝 &&와 ?.의 차이점은? 📕 && 사용 type Dog = { hasTail: boolean; 살랑살랑: () => string; }; /* hasTail..
[TypeScript] 타입스크립트 타입 가드 (Type Guard)
[TypeScript] 타입스크립트 타입 가드 (Type Guard)
2021.11.29🎯 타입스크립트 타입 가드(Type Guard) 데이터의 타입을 알 수 없거나, 될 수 있는 타입이 여러 개라고 가정할 때 조건문을 통해 데이터의 타입을 좁혀나가는 것 데이터의 타입에 따라 대응하여 에러를 최소화할 수 있음 타입을 통해 '가드'하는 코드, 방어적인 코드를 짤 수 있음 📝 타입 가드를 사용해 유니온 타입 사용 // 구별된 유니온 type Human = { think: () => void; }; type Dog = { bark: () => void; } declare function getEliceType(): Human | Dog; const elice = getEliceType(); elice가 Human인지, Dog인지 확신할 수 없는 상태 타입스크립트가 타입을 추론할 수 있도록 단서를..
[TypeScript] 타입스크립트 유니온 타입 & 인터섹션 타입 (Union Type & Intersection Type)
[TypeScript] 타입스크립트 유니온 타입 & 인터섹션 타입 (Union Type & Intersection Type)
2021.11.29🎯 타입스크립트 유니온 타입 & 인터섹션 타입 interface Animal { eat: () => void sleep: () => void } class Dog implements Animal { eat() {} sleep() {} } class Cat implements Animal { eat() {} sleep() {} } Dog에만 bark라는 메서드를 추가할 때 Animal에 bark 메서드를 추가하면 interface를 구현하는 클래스는 구현의 의무가 있기 때문에 Cat까지 bark메서드를 구현해야 한다. 기존 타입, 인터페이스 변경은 이미 그 타입을 사용하고 있는 코드에 똑같은 변경을 가해줘야 한다. 만약 해당 타입을 쓰는 모든 코드에 변경을 가하지 않고 특정 코드만 자유롭게 타입을 확장하고..
[TypeScript] 타입스크립트 제네릭(Generic), Factory Pattern with Generics
[TypeScript] 타입스크립트 제네릭(Generic), Factory Pattern with Generics
2021.11.27🎯 타입스크립트 제네릭(Generic) 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다. 정적 type 언어는 클래스나 함수를 정의할 때 type을 선언해야 한다. Generic은 코드를 작성할 때가 아니라 코드를 수행될 때(런타임) 타입을 명시한다. 코드를 작성할 때 식별자를 써서 아직 정해지지 않은 타입을 표시한다. 일반적으로 식별자는 T, U, V ...를 사용한다. 필드 이름의 첫 글자를 사용하기도 한다. 📝 generic 사용 이유 한 가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는 데 사용된다. 재사용성이 높은 함수와 클래스를 생성할 수 있다. 여러 타입에서 동작이 가능하다. (한 번의 선언으로 다양한 타입에 재사용할 수 있다.) 코드의 가독성이 향상된다. 오류..
[TypeScript] 타입스크립트 인터페이스(Interface), Strategy pattern
[TypeScript] 타입스크립트 인터페이스(Interface), Strategy pattern
2021.11.27🎯 타입스크립트 Interface 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미한다. 일반적으로 타입 체크를 위해 사용되며 변수, 함수, 클래스에 사용할 수 있다. 직접 인스턴스를 생성할 수 없고 모든 메서드가 추상 메서드이다. 추상 클래스의 추상 메서드와 달리 abstract 키워드는 사용할 수 없다. TS에서만 interface를 지원한다. 📝 interface 사용 이유 타입의 이름을 짓고 코드 안의 계약을 정의 프로젝트 외부에서 사용하는 코드의 계약을 정의하는 강력한 방법이다. 객체의 스펙(속성과 속성의 타입) 함수의 파라미터 함수의 스펙(파라미터, 반환 타입 등) 배열과 객체에 접근하는 방식 클래스 📝 기본 예제 function sayName(obj: { name: string } ) {..
[TypeScript] 타입스크립트 Getter & Setter / readonly / static
[TypeScript] 타입스크립트 Getter & Setter / readonly / static
2021.11.24🎯 타입스크립트 Getter & Setter / readonly / static 📝 타입스크립트 Getter & Setter const fullNameMaxLength = 10; class Employee { private _fullName: string; get fullName(): string { return this._fullName; } set fullName(newName: string) { if (newName && newName.length > fullNameMaxLength) { throw new Error("fullName has a max length of " + fullNameMaxLength); } this._fullName = newName; } } let employee = ne..
[TypeScript] 타입스크립트 Class 접근 제어자
[TypeScript] 타입스크립트 Class 접근 제어자
2021.11.24🎯 타입스크립트 Class 접근 제어자 속성 또는 메서드로의 접근을 제한하기 위해 사용한다. TypeScript에는 3종류의 접근 제어자가 존재한다. public > protected > private Java와 다르게 package 개념이 없어 default 접근 제어자는 존재하지 않는다. 📝 접근 제어자 - public class Animal { public name: string constructor(theName: string) { this.name = theName; } } new Animal("Cat").name; 프로그램 내에서 선언된 멤버들이 자유롭게 접근할 수 있다. TS에서 멤버는 기본적으로 public으로 선언된다. 명시적으로 멤버를 public으로 표시할 수도 있다. 📝 접근 제어자..