TypeScript21

• 

  [TypeScript]추상 클래스(Abstract Class) 추상화(Abstraction) 추상화는 객체 지향 프로그래밍(OOP:Object-Oriented Programming)의 핵심 아이이디어 중 하나입니다. 복잡성을 최소화하고 고급 아키텍처 문제를 해결하는데 도움이 되는 기술이며, 하위 수준의 세부 사항을 미리 구현할 필요가 없습니다. 상위 수준에 집중하고 나중에 세부 사항을 구현합니다. OOP에서는 두 가지 유형의 클래스가 존재합니다. 추상 클래스와 구체 클래스입니다. 위에서 말한 상위 수준은 추상 클래스이며 하위 수준은 구체 클래스입니다. 구체 클래스의 객체는 new 키워드를 사용하여 생성할 수 있습니다. class Person { private _name: string; private _age: number; constructor (theName:st.. TypeScript 2022. 3. 25.

• 

  [TypeScript]static property, static method 정적 변수와 정적 함수 static 키워드를 사용하여 선언된 변수와 함수는 정적 변수, 정적 함수라고 말합니다. 정적 변수와 정적 함수는 클래스에 속하는 변수와 함수로 변수와 함수를 호출하기 위해 객체가 필요하지 않습니다. 클래스에서 바로 호출할 수 있습니다. 일반적으로 클래스의 변수와 함수를 접근하기 위해서는 다음과 같이 객체를 생성해야 합니다. class ClassExample { private _field: string; get field() { return this._field; } set field(theField: string) { this._field = theField; } public printField() { console.log('field: ' + this._field); } } /.. TypeScript 2022. 3. 24.

• 

  [TypeScript]합성(Composition) 합성(Composition)이란? 합성(Composition)은 상속과 달리 기본 또는 부모 클래스에서 상속하지 않고 다른 클래스의 인스턴스가 포함되어 있습니다. 예를 들어서 데스크톱을 만들기 위해 필요한 부품들을 구성 요소라고 생각할 수 있습니다. 다음은 상속과 구성의 차이점입니다. 상속 is-a 관계 "데스크톱은 전자 제품이다." 여기서 노트북은 자식 또는 서브 클래스가 되고 전자 제품은 기본 또는 부모 클래스가 됩니다. 기본 또는 부모 클래스 변경 시 하위 클래스에서 원치 않은 동작을 할 수 있습니다. 그렇기 때문에 상속은 결합도가 높다고 말합니다. 합성 has-a 관계 "데스크톱에는 CPU가 존재한다." 데스크톱이라는 클래스에 CPU라는 클래스의 인스턴스가 포함됩니다. 합성은 상속에 비해 높은 유.. TypeScript 2022. 3. 21.

• 

  [TypeScript]클래스 상속(Class Inheritance) 클래스 상속(Class Inheritance)이란? 상속이란 현실 세계에서 부모가 자식에게 재산을 물려주듯이 프로그래밍에서는 부모 클래스가 자식 클래스에게 필드 또는 메서드를 물려주는 개념입니다. 메서드와 필드를 자식에게 물려주는 클래스를 기본, 상위 또는 슈퍼 클래스라고 말하며, 부모 클래스의 필드 및 메서드를 상속받는 클래스를 서브 또는 자식 클래스라고 합니다. 예를 들어 몬스터(Monster), 인간형(Human), 동물형(Animal)이라는 3가지 클래스가 존재합니다. class Monster { } class Human { } class Animal { } 위 세 가지 클래스는 캐릭터를 공격하므로 Attack()이라는 함수를 가집니다. class Monster { Attack() { consol.. TypeScript 2022. 3. 20.

• 

  [TypeScript]함수 타입(Function Type) TypeScript에서 함수 정의 TypeScript의 함수는 JavaScript처럼 함수를 생성할 수 있지만, 매개변수의 타입과 반환 타입을 설정해야 합니다. 다음은 number 타입의 매개변수와 string 값을 반환하는 getParam() 함수입니다. // 일반 함수 function getParam(val: number): string { return "매개변수의 값: " + val; } // 화살표 함수 let getParam = (val: number): string => { return "매개변수의 값: " + val; } (val: number)는 getParam() 함수의 매개변수를 나타냅니다. 매개변수의 이름을 val로 설정하였고 타입은 number로 정의합니다. 소괄호 뒤의 : stri.. TypeScript 2022. 3. 20.

• 

  [TypeScript]튜플(Tuple) 튜플(Tuple)이란? 튜플은 배열의 서브타입입니다. 인덱스의 타입이 알려져 있지만, 동일할 필요는 없으며 요소의 수가 고정된 배열을 표현하는 경우 사용됩니다. 다음은 인덱스의 타입이 stirng, string, number, boolean이며, 4개의 요소를 가지는 튜플입니다. let tupleArray: [string, string, number, boolean] = ['A', 'HI', 123, true]; 첫 번째 인덱스 타입이 string이므로 string이 아닌 다른 값을 할당하는 경우 다음과 같이 오류가 발생합니다. 이러한 이유로 튜플은 요소의 수가 고정되었고 특정 순서 또는 특정 패턴으로 이루어진 데이터를 표현하는 경우 사용됩니다. 예를 들어, RGB 색상을 표현하기 위해 다음 예제처럼 튜.. TypeScript 2022. 3. 19.

• 

  [TypeScript]교차 타입(Intersection Type) Intersection Type Intersection Type은 Union Type과 비슷하지만 다른 방식으로 동작합니다. Intersection Type을 설명하기 전에 Union Type과 어떤 차이가 있는지 알아보겠습니다. 먼저 Union Type에 대해 설명합니다. 다음 코드처럼 type A와 type B가 존재합니다. type A = { A: number; B: string; } type B = { B: number; C: string; } 위 코드를 그림으로 나타내면 다음과 같습니다. type A와 type B는 동일한 속성 B를 가집니다. type A는 속성 B를 string 타입으로 정의하였고 type B는 속성 B를 number 타입으로 정의했습니다. 이제, type A와 type B를.. TypeScript 2022. 3. 19.

• 

  [TypeScript]타입 별칭(Type Alias) 타입 별칭(Type Alias) 타입 별칭은 type 키워드를 사용하여 타입에 이름을 설정하는 방법입니다. 타입 별칭을 정의하는 방법은 type 뒤에 별칭을 입력하고 = 연산자 뒤에 타입을 정의합니다. type 별칭 = 타입; 이름(Name)은 항상 문자열이고 나이(Age)는 항상 숫자라면 다음 예제처럼 type을 Name과 Age로 만들 수 있습니다. type Name = string; type Age = number; let name:Name = 'Tom'; let age:Age = 20; 타입 별칭은 유용한 방법처럼 보이지만, 위 예제처럼 string, number과 같은 원시 타입에 별칭을 정의하는 것은 권유하지 않습니다. 객체에 타입 별칭 사용 타입 별칭은 객체에 타입을 정의하는 경우 유용하게 .. TypeScript 2022. 3. 15.

• 

  [TypeScript]유니온 타입(Union Type) Union Type Union Type은 TypeScript의 기능 중 하나이며 변수의 값이 여러 타입을 가지는 경우 주로 사용됩니다. 예를 들어서 변수 age는 나이를 의미하며 나이는 숫자이므로 number 타입으로 정의할 수 있습니다. let age: number; age = 10; 하지만, BackEnd에서 매핑되는 데이터가 문자열이거나 혹은 Web 브라우저에서 입력한 값이 문자열인 경우 변수 age는 string 타입 가능해야 합니다. 위 상황처럼 변수에 여러 타입을 정의해야 하는 경우 Union Type을 사용합니다. Union Type은 타입 사이에 파이프( | ) 기호를 사용하여 정의합니다. let age: number | string; age = 10; age = '15'; Union Ty.. TypeScript 2022. 2. 24.

• 

  [TypeScript]함수 오버로딩(Function Overloading)이란? 함수 오버로딩이란? TypeScript에서는 같은 이름을 가진 함수를 여러 개 정의할 수 있으며 각 함수는 서로 다른 타입을 가지는 매개변수로 정의해야 합니다. 매개변수가 다르며 이름이 동일한 함수를 함수 오버로딩이라고 합니다. 매개변수의 개수는 동일하지만, 타입이 다른 경우 // 함수 선언 function add(a: string, b: string): string; function add(a: number, b: number): number; // 함수 구현 function add(a: any, b: any): any { return a + b; } // 함수 호출 console.log(add(1, 2)); // 3 두 개의 함수 선언과 하나의 함수 구현이 있는 동일한 함수가 존재합니다. 첫 번째 함.. TypeScript 2021. 12. 27.

• 

  [TypeScript]Any 타입을 대체하는 방법 TypeScript에서 변수 또는 객체의 타입을 선택하기 어려운 경우 가장 편리한 방법은 any 타입을 사용하는 것입니다. any 타입을 사용하는 것은 경우에 따라 올바른 선택일 수도 있지만, any 타입을 사용하지 않고 더 유용한 방법으로 타입을 정의할 수 있습니다. 이번 포스팅에서는 TypeScript에서 any 타입을 대체할 수 있는 방법들을 소개합니다. 목차 Union Type 배열(Array)을 사용 unknown Type Union Type TypeScript에서 함수의 매개변수를 any 타입으로 정의할 수 있습니다. 예를 들어 금액을 매개변수로 받아서 1원 단위를 절사 하는 함수를 작성한다고 가정합니다. 함수로 전달되는 금액은 일반적으로 number 타입이겠지만, string 타입으로 전달될.. TypeScript 2021. 12. 21.

• 

  [TypeScript]인덱스 시그니처(Index Signature) 사용 방법 인덱스 시그니처(Index Signature)이란? 인덱스 시그니처(Index Signature)는 { [Key: T]: U } 형식으로 객체가 여러 Key를 가질 수 있으며, Key와 매핑되는 Value를 가지는 경우 사용합니다. 이번 포스팅에서는 인덱스 시그니처(Index Signature) 사용 방법을 소개합니다. 목차 인덱스 시그니처를 사용하는 이유 인덱스 시그니처 사용 방법 인덱스 시그니처 주의사항 인덱스 시그니처를 사용하는 이유 인덱스 시그니처는 객체가 형식이며 Key와 Value의 타입을 정확하게 명시해야 하는 경우 사용할 수 있습니다. 다음과 같이 급여와 관련된 객체가 존재합니다. let objSalary { bouns: 200, pay: 2000, allowance: 100, incent.. TypeScript 2021. 12. 21.