calendar2 님의 블로그

TS에는 인터페이스라는 것이 있다. 문법 자체는 타입 별칭과 굉장히 비슷하다. 예시를 하나 보자. type으로 타입을 정의할 때와 똑같이 타입을 정의해주면 된다. 단, 인터페이스는 = 연산자를 사용하지 않는다.차이점우선, 유니온 타입이 안된다. 또한, 타입을 정의할 때 한 가지 타입으로만 정의해야 한다. 따라서, 인터페이스 타입과 다른 타입을 같이 사용하고 싶다면 다음과 같이 사용해야 한다.인터페이스 합치기타입 별칭과 또 다른 차이점으로는 인터페이스 합치기가 있다. Person이라는 인터페이스 두 개를 만들고 하나는 name이라는 프로퍼티를, 다른 하나에는 age라는 프로퍼티를 넣었다.그리고 해당 타입의 객체를 생성하였더니 name과 age 프로퍼티를 모두 사용할 수 있었다.그렇다면 재정의도 가능할까? ..

두 가지 이상의 타입을 결합한 상태에서 조건분기를 할 때 일반적으로 서로소 유니온 타입을 사용한다. 하지만 서로소 유니온 타입을 사용할 수 없는 환경도 존재하는데 이럴 때 타입 가드를 사용한다.아래 두 개의 타입을 보자. 강아지 타입과 고양이 타입을 선언해주었다. 이렇게 우리가 타입을 정의하는 경우에는 서로소 유니온 타입으로 타입 좁히기를 진행했다.하지만, 내장되어 있는 클래스라던가 인터페이스라면 우리가 직접 커스텀을 할 수 없기에 서로소 유니온 타입으로 설정하는 것이 불가능하다.서로소 유니온 타입 정의가 안된다면 조건 분기가 다음과 같이 이뤄져야 한다. 보시다시피 직관성이 사라졌다. 이런 코드에 경우에 각 조건분기에서 어떤 타입인지 주석을 달아 표기해줘야 한다.또한, 만약 Dog 타입의 isBark가 ..

함수 타입의 호환성함수 타입에서 호환성의 판단은 다음 두 가지로 이뤄진다.반환값이 호환되는가?매개변수가 호환되는가?반환값의 호환반환값의 호환은 일반적인 타입의 호환과 동일하다. 업 캐스팅일 경우는 가능하며, 다운 캐스팅일 경우에는 불가능하다.매개변수의 호환매개변수의 경우는 오히려 이와 반대이다. 독특하게도 업 캐스팅이 불가능하며, 다운 캐스팅일 경우에 가능하다. 사진을 보면 조금 전 반환값에서는 number 타입을 number 리터럴 타입으로 다운 캐스팅하는 경우라 불가능했지만, 매개변수에서는 number 리터럴 타입을 number 타입으로 업 캐스팅하는 경우에 대해서 에러를 발생시킨다.매개변수에 대해서는 객체를 기준으로 비교하는 것이 이해하기가 쉽다. Animal 타입과 Animal 타입의 서브타입인 ..

빌드 툴을 사용하지 않고 타입스크립트를 사용할 일도 있을 것 같아 초기 환경 설정하는 방법을 순서대로 정리하려 한다.1. npm package 설치하기우선, 프로젝트를 시작할 디렉토리를 하나 만들고 그 안에서 npm package를 설치한다.다음 명령어로 설치할 수 있다.npm init // 설정 개발자가 하나씩 정의또는npm init -y // 모든 설정 기본값으로 정의 명령어를 실행하면 package.json이 생성된다.2. types/node 의존성 주입다음으로 의존성을 주입해야 한다. 다음 명령어로 의존성을 주입한다.npm i @types/node 그러면 package.json에 다음과 같이 의존성이 생기고 node_modules 디렉토리와 package-lock.json 파일이 생성된다.3. t..

일반적인 함수 타입타입스크립트는 함수를 선언할 때도 타입을 정의한다. 기본적으로 다음과 같이 사용할 수 있다.매개변수의 갯수가 가변적일 경우함수에 사용되는 매개변수가 일정하지 않을 경우가 있다. 다음 예를 보자. 들어오는 매개변수를 모두 더하는 함수로 만들고 싶은데 매개변수의 갯수가 다르게 들어와서 문제가 발생한다.그냥 매개변수를 리스트로 받으면 되지 라는 해결방법도 있으나 이런 방식으로 해결도 가능하다.함수 타입 표현식함수의 타입 또한 타입 별칭을 이용해서 표현할 수 있다. 코드가 길어질수록 타입의 재사용성도 증가하므로 그때그때 선언하기 보다는 다음과 같이 재사용성이 높게 설계하면 좋다.호출(콜) 시그니처함수 타입 표현식을 다음과 같이 작성하는 것도 가능하다. 마치 function으로 함수를 선언하는 ..

지금까지 배운 타입 표기법을 이용해서 타입을 더 직관적으로 표현할 수 있다.아래 코드를 먼저 보자. 딱히 문제 있는 코드는 아니다. 코드를 보면 위에 각각의 타입을 정의할 때는 어떤 타입인지 알기 쉬우나, 실제로 사용되는 login 함수에서는 각 조건 분기가 어떤 타입으로 좁히는지 직관적으로 알기가 어렵다.이렇게 코드를 작성할 경우 나중에 다른 사람이 유지보수를 할 경우 이 코드를 이해하기까지 시간이 많이 필요할 것 같다.이럴 때는 다음과 같이 두 가지 개선방안이 있다.코드에 주석 달아서 설명하기서로소 유니온 타입으로 만들어서 직관성 높이기주석 다는 것이야 쉬우니 넘어가고 여기서는 2번 방법을 소개하려 한다.서로소 유니온 타입이란?조금 말이 어렵게 표현되었는데 우선 서로소란 두 수 사이에 1을 제외한 공..

여러 타입을 가질 수 있는 변수에 대해 조건문을 이용해 타입을 제한하는 방식을 타입 좁히기라고 한다.아래 코드를 보면 number 타입과 string 타입을 가질 수 있는 변수 value에 대해 타입 좁히기를 진행한 모습이다. 조건문을 이용해 타입을 좁힌 후에는 각 타입에 맞는 메서드 적용이 가능하지만, 타입을 좁히기 전에는 에러를 띄우는 것을 볼 수 있다.또한, 객체 타입에 대해서도 좁히기가 가능하다.조금 까다로운 객체 타입의 타입 좁히기하지만 일반적으로 객체 타입에서는 이런 좁히기 방식을 선호하진 않는다. 이유는 아래 사진에서 확인할 수 있다. 사진에서 보이는 바와 같이 null 타입이 포함되는 순간 typeof 연산자로 객체 타입 구분이 되지 않는다.null 값은 초기화 값이나 값이 없을 때 자주 ..

타입스크립트 문법 중에 컴파일러가 해당 타입을 믿게끔 만드는 문법이 있다. 바로 타입 단언이다.아래 사진을 보자. 사진을 보면 person이라는 객체에 초기값을 할당하지 않고 이후에 값을 할당하려 한다. 하지만 위와 같이 객체를 선언할 경우 프로퍼티 검사로 인해 타입 에러가 발생한다.그럼 타입을 지우면 어떻게 될까? 타입을 지울 경우 person 객체 내에 name과 age라는 프로퍼티가 없기 때문에 값을 할당할 수가 없다.이런 상황에서 유연하게 대처할 수 있는 방법이 바로 타입 단언이다. 위 사진처럼 person 객체를 빈 객체로 선언하고 as Person으로 타입을 지정할 경우 person 객체를 Person 타입으로 간주하겠다 라는 의미가 된다.또한, 타입 단언으로 인해 다음과 같은 코드 작성도 가..

타입스크립트에서 타입을 명시하지 않아도 타입을 지정할 수 있다. 이를 타입 추론이라 한다.다음 코드를 보자. 코드를 보면 변수 a에 숫자 10이라는 값을 할당했다. 또한, a에는 타입을 지정하지 않았다.하지만, 이후 a에 문자열 값인 "hello"를 할당하려 하자 에러가 발생했다.a에 숫자 10을 할당하면서 타입 추론에 의해 변수 a의 타입은 number로 결정된 것이다.객체의 타입 추론객체에서도 타입 추론은 동일하다.함수에서의 타입 추론함수 역시 마찬가지다.매개변수에서의 타입다만, 매개변수에서는 타입을 지정해줘야 한다. 위와 같은 경고문을 없애기 위해서는 타입을 명시하거나, 초기값을 할당하여 타입 추론을 해주는 방법이 있다.any 타입 추론Any 타입은 역시 굉장히 특수한 타입이다. 다음 코드를 보자...

대수 타입이란 여러 개의 타입을 합성해서 새롭게 만들어낸 타입을 의미한다.합집합 타입과 교집합 타입이 존재한다.합집합(Union) 타입다음과 같이 두 가지 이상의 타입을 합쳐서 사용할 수 있다. 특히 대수 타입은 객체 타입에서 유용하게 사용된다. 코드를 보면 Dog 타입과 Person 타입을 합친 Union1 타입을 만들었고, Union1 타입의 객체들은 Dog 타입의 프로퍼티, Person 타입의 프로퍼티를 각각 또는 모두 가지는 것이 가능하다.하지만, 두 타입이 공통적으로 가지고 있는 name이라는 프로퍼티만 정의하는 것은 불가능하다.교집합(Intersection) 타입각각의 타입에 공통적인 부분만 가능한 교집합 타입이 있다. variable 변수에 number 타입과 string 타입의 교집합을 정..