calendar2 님의 블로그

함수 타입의 호환성함수 타입에서 호환성의 판단은 다음 두 가지로 이뤄진다.반환값이 호환되는가?매개변수가 호환되는가?반환값의 호환반환값의 호환은 일반적인 타입의 호환과 동일하다. 업 캐스팅일 경우는 가능하며, 다운 캐스팅일 경우에는 불가능하다.매개변수의 호환매개변수의 경우는 오히려 이와 반대이다. 독특하게도 업 캐스팅이 불가능하며, 다운 캐스팅일 경우에 가능하다. 사진을 보면 조금 전 반환값에서는 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 타입의 교집합을 정..

앞서 타입 계층도에 대해 설명했다. 더 상위 타입은 하위 타입에서의 업 캐스팅이 가능하며, 상위 타입에서 하위 타입으로의 다운 캐스팅은 불가능하다.그리고 이러한 특징은 객체 타입에서도 똑같이 적용된다. 예시를 보자. 코드를 보면 animal에 dog를 할당하는 것은 문제없지만, dog에 animal을 할당할 때는 에러가 발생한다.Dog 타입에 존재하는 breed가 Animal 타입에는 없기에 발생하는 것이다. 따라서, Animal 타입이 Dog 타입에 비해 더 상위 타입인 슈퍼타입이 되며 Dog 타입을 Animal 타입에 할당하는 업 캐스팅은 가능하지만, 그 반대인 다운 캐스팅은 불가능하게 된다.객체의 초과 프로퍼티 검사위에서 보듯 animal 변수에 dog 변수에 할당은 업 캐스팅이라 가능했다. 그런데..

슈퍼타입과 서브타입타입스크립트의 타입은 집합 관계처럼 되어있다. 예를 들면 number 타입과 number literal 타입같은 경우 number 타입이 더 큰 범위이면서 number literal 타입을 포함하고 있다.이런 경우에 number 타입을 number literal 타입의 슈퍼타입 또는 부모타입이라고 부르고, number literal 타입을 number 타입의 서브타입 또는 자식타입이라고 부른다.타입 호환성이렇게 각 타입의 관계가 있을 때 관계에 따라 타입이 호환되거나 호환되지 않을 수가 있다. 이를 타입 호환성이라 한다.아까 number 타입을 예로 들면 number 타입은 서브타입인 number literal 타입에 호환되지 않는다. 반대로 number literal 타입은 슈퍼타입인..