calendar2 님의 블로그

아래 사진과 같이 Person 타입과 person 객체를 매개변수 호출을 통해 return하는 메서드를 작성하겠다. 이미 알다시피 person 매개변수에는 Person 타입을 정의하면 되는데, 옆에 key 매개변수에는 어떤 타입을 정의해야할까? Person이 가진 name과 age 프로퍼티가 모두 문자열로 작성되어 있으므로 string으로 정의해보겠다.1. string으로 정의했을 때 string일 경우 에러가 발생한다. key 매개변수 위치에 프로퍼티에 해당하지 않는 문자열을 작성할 수 있기 때문이다.그러면 프로퍼티에만 한정적으로 하기위해 유니온 타입을 사용해보자.2. 유니온 타입으로 정의했을 때 에러가 사라졌고 컴파일 과정에서 문제될 부분은 없다. 하지만, 만약 Person 타입이 지금처럼 2개의 프..

다음 사진처럼 게시글에 대한 타입이 정의되어 있고, 게시글이 하나 쓰였다고 생각해보자. 그리고 아래와 같이 해당 게시글의 작성자를 출력하는 메서드를 만들고자 한다. 앞서 배운 지식들로부터 매개변수에는 타입 추론이 적용되지 않고, 우리가 직접 정의해줘야 함을 배웠다. author라는 프로퍼티에는 id와 name 프로퍼티가 추가로 필요하니 다음과 같이 정의해보겠다. 그런데 위와 같이 작성할경우 author 프로퍼티의 변화가 생길경우 printAuthorInfo 메서드도 같이 수정해야하는 불편함이 있다. 이를 해결하기 위해 인덱스드 엑세스 방식을 적용할 수 있다.어떻게 적용할까?아래 사진처럼 Post 타입에 author 프로퍼티를 명시해줄 경우 id와 name을 정의받는 타입으로 정의할 수 있다. 이런식으로 ..

Promise - resolveJS를 사용하면 비동기 통신 작업을 위해 promise 객체를 사용하는 경우가 많다. 아래 간단한 promise 코드를 보자. 3초 뒤 숫자 20을 응답해주는 간단한 코드이다. 응답 값이 숫자 20이니까 이 값을 변경시켜보면 어떨까? 안타깝게도 응답 값은 숫자 20이지만 타입 정의를 하지 않아 response의 타입은 unknown으로 추론된다. 따라서, TS에서는 응답 값의 가공을 위해서는 타입 정의를 해줘야 한다. 위 코드처럼 Promise 객체에 number 타입을 지정해줌으로써 응답 값의 가공이 가능해졌다.Promise - reject그럼 이번에는 에러를 담당하는 reject를 살펴보자. reject에 경우에는 unknown 타입이 아닌 any 타입이다. 따라서, 따..

한 가지 클래스를 작성해보겠다. 각 요소가 숫자인 리스트 클래스를 정의했고 요소를 추가하는 push 메서드, 요소를 제거하는 pop 메서드, 현재 리스트를 출력하는 print 메서드를 정의했다.근데 여기서 각 요소가 숫자가 아닌 문자열인 리스트를 사용하고 싶다면 어떻게 될까?가장 대표적인 방법은 새롭게 StringList 클래스를 만들어 관리하는 방법이다. 하지만 이럴 경우 코드가 길어지고 중복되는 메서드가 발생하여 이후 관리가 더 어려워진다. 그래서 여기서도 제네릭 시스템을 이용하면 더 쉽게 클래스를 정의할 수 있다. NumberList라는 이름 자체를 List로 변경하고 제네릭 타입을 붙여 생성자와 메서드에서도 제네릭 타입으로 요소의 관리를 해주었다.이렇게 관리하니 따로 StringList 클래스 없..

타입 설정에서 제네릭 타입으로 더 유연하게 타입을 정의할 수 있었다. 타입을 정의할 때 인터페이스를 사용하기도 하는데 이때에도 제네릭 타입을 사용할 수 있다. 인터페이스 명 뒤에도 꺽쇠로 제네릭을 지정하고 사용할 때는 꺽쇠 위치에 원하는 타입을 넣어서 조합이 가능하다. 이를 잘 활용하면 하나의 인터페이스로도 유연하게 여러 타입을 사용할 수 있다.또한, 아래처럼 인덱스 시그니처 문법에도 적용하여 유연성을 높힐 수 있다.제네릭 인터페이스를 이용한 예시내용 자체는 간단하지만 잘 활용한다면 객체를 설계할 때 굉장히 유연하게 관리할 수 있다. 간단하게 유저 객체를 관리하는 예시를 보자. 유저는 학생과 개발자로 이뤄졌다고 가정하겠다. 1. 학생과 개발자 객체 정의하기 2. 두 객체를 관리할 유저 객체 정의하기 3...

앞서 정리한 제네릭 타입의 몇 가지 응용법을 살펴보자.다수의 타입 정의하기다음 코드를 보자. 입력받은 두 매개변수를 서로 스왑해주는 함수이다. 이때 두 매개변수의 타입이 다르면 어떻게 될까? 위 코드처럼 에러가 발생한다. 제네릭 타입 T의 경우 두 매개변수가 동일해야 하기 때문이다. 따라서, 이 경우에는 다음과 같이 다수의 제네릭 타입을 사용해 해결할 수 있다.배열의 인덱스 값을 반환하는 경우또 아래 사진을 보자. 이번 함수는 입력받은 매개변수의 0번 인덱스 값을 반환하는 함수이다. 이를 역시 제네릭 타입으로 작성해주면 다음과 같은 에러가 발생한다. 입력받을 매개변수가 배열이라고 명확히 설정되어 있지 않기 때문에 data의 0번 인덱스로 접근하는 것이 불가능하다. 해결방법은 상당히 간단하다. 매개변수의 ..

다음과 같이 여러 타입을 처리하고 싶은 경우가 있을 수 있다. 유니온 타입을 활용하면 any 타입을 사용하지 않고 다중 타입을 처리할 수 있다. 하지만, 둘 다 공통적으로 다음과 같은 문제가 발생한다. 두 방식 모두 반환값으로 다중 타입이 가능하지만 특정 타입에서 동작 가능한 메서드의 사용이 불가능하다.이를 해결하기 위해 우리는 다음과 같이 타입 좁히기를 활용할 수 있다. 하지만 이번에 소개할 제네릭 타입을 사용하면 훨씬 직관적이고 가독성 좋은 코드로 바꿀 수 있다. 위 코드와 같이 함수명 뒤에 꺽쇠로 타입 변수를 정의해주고 반환 타입에도 같은 타입 변수를 넣어준다.현재 코드의 경우 매개변수가 그대로 반환되는 코드이므로 매개변수에도 동일한 타입 변수를 넣었다.이렇게 제네릭 타입을 정의하자 들어오는 매개변..

미리 정의된 인터페이스를 바탕으로 클래스를 구현할 수 있다. implements라는 명령어를 이용해 미리 정의된 인터페이스의 요소를 클래스에서 사용할 수 있다.그리고 인터페이스에서 정의한 요소는 기본적으로 public의 접근 제어자를 가진다. 따라서, 다음과 같이 임의로 변경할 경우 에러가 발생한다. 그러므로, 인터페이스를 바탕으로 구현된 클래스에서 protected 혹은 private 접근 제어자를 사용하고 싶은 경우 추가적인 다른 필드를 구성해야 한다.참고자료한 입 크기로 잘라먹는 타입스크립트(TypeScript) 한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런이정환 Winterlood | 문법을 넘어 동작 원리와 개념 이해까지 배워도 배워도 헷..

Java를 이용한 객체지향 프로그래밍을 사용해보신 분이라면 접근 제어자에 대해 알 것이다.public - 어디서든 접근 가능protected - 클래스 외부에서 접근은 불가능하지만 상속받은 클래스에서는 접근 가능private - 클래스 내에서만 접근 가능앞서 정의한 클래스를 다시 보자. 필드를 보면 아직 접근 제어자가 설정되어 있지 않다. 현재는 생략되어 있는 상태인데 이럴 경우 public으로 접근 제어자를 설정한 것과 동일하다. 이렇게 접근 제어자가 public인 경우 해당 변수에 어디서든 접근이 가능하다. 반면에 private의 경우에는 클래스 외부에서의 접근이 불가능하다. 한번 age 변수를 private으로 설정해보겠다. 또한, private 변수의 경우에는 상속 클래스에서의 접근도 불가능하다...

객체지향 프로그래밍을 할 때 클래스를 사용했을 것이다. 일단, 기본적으로 JS에서 클래스 정의와 사용 코드를 보자. 클래스명을 정하고 클래스 내부에 클래스에 사용되는 변수, 생성자, 메서드를 선언하였다. 이 클래스를 사용할 때는 다음과 같이 사용한다. 또한, 확장성을 가지고 있다. 다음 코드처럼 student 클래스를 상속받아 새 클래스를 만들 수 있다. 지금은 JS 문법에 대한 정리가 아니므로 JS 클래스 소개는 이쯤 마무리하겠다.TS의 클래스그럼 이제 TS에서의 클래스 사용을 보자. 사실 클래스 정의는 JS와 똑같다. 앞서 설명한 것처럼 TS가 JS 문법을 바탕으로 타입선언을 추가한 것이라 클래스 정의와 사용도 타입 선언의 추가만 있으면 된다. 코드를 보면 JS 클래스와 동일하게 변수를 선언할 경우 ..