TS 관련/TypeScript

[TypeScript] Abstract Class(추상 클래스)

Abstract Class 추상 클래스(Abstract Class)는 인터페이스와 비슷한 역할을 하면서도 조금 다른 특징을 갖고 있습니다. 추상 클래스는 특정 클래스의 상속 대상이 되는 클래스이며 좀 더 상위 레벨에서 속성, 메서드의 모양을 정의합니다. abstract class Developer { abstract coding(): void; drink(): void { console.log('drink sth'); } } class FrontEndDeveloper extends Developer { coding(): void { console.log('develop web'); } design(): void { console.log('design web'); } } const dev = new Dev..

[TypeScript] 제네릭(Generics)

제네릭(Generics)의은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용됩니다. 특히 한가지 타입보다는 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 자주 사용됩니다. 제네릭은 타입을 함수의 파라미터처럼 사용하도록 해주는 것인데요. function getName(name) { return name; } 위의 코드는 name이라는 인자를 받아 name을 그대로 리턴을 해주는데 이때 name의 타입은 정해져 있지가 않습니다. 문자열, 숫자, boolean 등 어떤 값이 들어가더라도 그대로 반환합니다. function getName(name: T): T { return name; } 위의 코드는 함수에 제네릭 적용된 형태입니다. 이제 함수를 호출할 때 아래와 같이 함수 안에..

[TypeScript] Intersection Type(인터섹션 타입)

인터섹션 타입에 앞서 유니온 타입은 여러개의 타입이 올수 있을때 | 를 이용하여 타입을 지정해주는 것이었는데요. interface Developer { name: string; skill: string; } interface Person { name: string; age: number; } function askSomeone(someone: Developer | Person){ someone.name; } 유니온 타입의 경우 or 연산자처럼 | 연산자를 이용하기 때문에 위의 코드는 someone에 name속성이나 age, skill등을 모두 사용할수 있을것같지만 실제로 name밖에 출력할수 없게 됩니다. Developer인터페이스와 Person인터페이스의 공통속성인 name만 제공하고 있는 모습입니다...

[TypeScript] 접근 제한자(Access Modifiers), Getter와 Setter

class Employee { fullName: string; age: number; jobTitle: string; hourlyRate: number; workingHoursPerWeek: number; constructor(fullName: string, age: number, jobTItle: string, hourlyRate: number, workingHoursPerWeek: number){ this.fullName = fullName; this.age = age; this.jobTitle = jobTItle; this.hourlyRate = hourlyRate; this.workingHoursPerWeek = workingHoursPerWeek; } printEmployeeInfo = (): ..

[TypeScript] 생성자(Constructor)

생성자(Constructor) class Employee { fullName: string; age: number; jobTitle: string; hourlyRate: number; workingHoursPerWeek: number; printEmployeeInfo = (): void => { console.log(`${this.fullName}의 직업은 ${this.jobTitle} 이고 일주일의 수업은 ${this.hourlyRate*this.workingHoursPerWeek} 달러 이다.`) } } let employee1 = new Employee(); employee1.fullName = 'Cine'; employee1.age = 20; employee1.jobTitle = 'develope..

[TypeScript] Class와 객체(OOP 프로그래밍)

OOP란 객체지향프로그래밍을 의미합니다. 대표적인 객체지향언어로는 Java가 있죠. 하지만 파이썬이나 JS또한 객체지향적으로 사용할수 있습니다. 객체는 사물을 의미하는데 일상에서보면 책상이나 의자 등이 객체가 되겠네요! 온라인 쇼핑몰 사이트에는 상품을 볼수도 있고 장바구니에 담을수도 있으며 장바구니에 담기전 찜하기 기능등 다양한 기능이 있습니다. 프로젝트의 규모가 커지면 커질수록 코드를 잘 짜고 정리해야하며 이렇지 못할경우 스파게티 코드가 되어 유지보수가 어렵게 됩니다. 객체지향 프로그래밍은 이러한 문제를 해결하기위해 연관된 변수와 함수들을 한 덩어리로 묶어서 구조화하여 표현하는 프로그래밍을 말합니다. 객체지향프로그래밍에서는 Class와 Object의 관계가 아주 깊습니다. 객체는 Class를 통해 만들..

[TypeScript] 옵셔널(optional) ?, 선택적 매개변수

interface Student { studentNumber: number; studentName: string; age: number; gender: string; }; function getStudentInfo(studentNumber: number): Student { return { studentNumber, studentName: 'Cine', // age: 20, gender: 'male', }; } 인터페이스에 정의된 값을 하나라도 뺴고 작성을 하게 된다면 'age' is declared here 즉, Student 인터페이스에 정의된 age 프로퍼티가 반환값에 포함되어야 하는데 없다는 메세지가 발생합니다. 근데 만약 age를 필요로 할때도 있고 없어도 되는 경우도 있을때는 어떻게 해야할까요..

[TypeScript] Union Type(유니언 타입), Type Alias, 타입가드

타입스크립트는 타입 명시를 위해 사용하지만 any라는 타입도 존재합니다. any라는 타입은 어떤 타입도 올수 있으며 자바스크립트와 같은 역할을 합니다. let getData: any = 1; getData = 'hello'; getData = false; 이러처럼 처음에 number타입의 1을 할당하고 이후에 string이나 boolean을 재할당해도 에러가 발생하지 않습니다. 하지만 타입스크립트는 더 많은 타입 명시를 할수록 장점이 나타나기 때문에 any는 사용을 최소화 해야합니다. 그럼에도 any를 반드시 사용해야 할수도 있는데요. 어떤 타입이 들어올지 예측할수 없는 경우는 타입을 지정할 수 없기 때문에 any를 사용해야합니다. 또한 number타입과 string타입 두가지가 들어올수 있는경우도 있을..

[TypeScript] Enum(열거형)과 리터럴 타입

interface Student { StudentNo: number; name: string; gender: string; } Student인터페이스에서 gender는 string으로 타입이 명시되어있지만 사실 gender는 male아니면 female이죠?? 이 두가지로 한정지어 명시할수 있게 하는 방법은 없을까요?? 크게 두가지 방법이 있습니다. 먼저 Enum을 사용하는 방법입니다. Enum이란 쉽게 말하면 연관된 아이템을 함께 묶어서 표현할 수 있는 수단이라고 생각할수 있습니다. enum GenderType { Male, Female, } interface Student { studentNo: number; name: string; gender: GenderType; } function getStud..

[TypeScript] Readonly(읽기전용) 속성

interface Studnet { readonly studnetNo: number; name: string; } let StudnetInfo: Studnet = { studnetNo: 123456, name: 'Cine', }; StudnetInfo.studnetNo = 111111; // error! 위의 인터페이스에서는 studentNo 프로퍼티에 readonly가 붙어있는데요. readonly프로퍼티는 읽기 전용 프로퍼티로 객체 생성시 할당된 프로퍼티의 값을 바꿀수 없고 읽을수만 있습니다. 말그대로 읽기 전용이라고 생각할수 있습니다. 이런 readonly 프로퍼티를 수정하려 한다면 에러가 발생하는데요. Cannot assign to 'studentNo' because it is a read-onl..