3강은 타입스크립트의 변수의 타입 정리를 다룬다.
1. 기본타입 – 문자열, 숫자, 배열
가장 기본적인 타입으로는 문자열, 숫자, 배열이 있다.
기본적으로 JS에서의 변수 선언방식은 타입 지정 없이 바로 값을 할당한다.
하지만 TS에서는 다음과 같이 해당 변수를 문자열로 간주한다는 타입을 지정한다.
숫자의 경우 number를 사용해 타입을 지정한다.
array는 기본적으로 []로 배열임을 나타낸다. 여기에서 안에 있는 값들이 무엇인지에 따라 다음처럼 number로 이루어진 배열임을 나타낼 수 있다.
참고로 밑에 있는 방식은 표현은 다르지만 타입 지정은 똑같이 number로 이루어진 배열임을 표시한다.
만약 문자열로 이루어진 배열이라고 타입을 지정하고 값을 할당할 때 숫자를 부여하게 되면 다음과 같이 할당 할 수 없다고 TS가 알려준다.
2. 기본타입 – 튜플, 객체, 진위값
튜플은 배열의 특정 인덱스 또는 특정 순서에 들어갈 수 있는 타입까지 지정하는 타입이다.
다음처럼 address라는 배열의 1번 인덱스에는 number가 들어와야하는데 '판교'라는 문자열이 들어와서 error가 발생했다.
숫자를 넣으면 에러가 사라지는 것을 확인할 수 있다.
다음으로는 객체이다.
객체는 다음처럼 객체라고 타입만 지정할 수도 있고 객체를 구성하는 property의 타입까지 구체적으로 정의가 가능하다.
1. 객체라는 타입만 지정
2. property의 타입까지 지정
마지막으로 진위값은 일명 boolean으로 해당 타입은 true와 false만 할당 될 수 있다.
3. 함수 타입 – 파라미터, 반환값
함수의 타입은 두 부분에서 타입 정의가 가능하다. 첫번째는 파라미터의 타입 지정, 두번째는 반환값(return)의 타입 지정이다.
-
파라미터의 타입 지정
-
반환값의 타입 지정
리턴에 타입을 저장하고 리턴값의 타입이 없거나 올바르지 않다면 다음처럼 컴파일 전에 에러가 발생한다.
파라미터 타입 지정과 반환값 타입 지정을 합치면 이런 모습이 된다.
4. 함수 타입 – 파라미터를 제한하는 특성
JS는 함수에서 정해지지 않은 인자를 넘겨줘도 별 반응이 없다. 이것이 자바스크립트가 주는 유연함이다.
하지만 TS는 이 함수의 스펙(규칙)을 이해하고 해당 규칙에 어긋난다고 잡아준다.
5. 함수 타입 – 옵셔널 파라미터
옵셔널 파라미터는 이 인자가 필수는 아니다~ 라고 알려주는 문법이다.
a와 b가 모두 필수일때는 다음과같이 첫번째 로그 함수 호출에서 인수가 부족하다며 에러가 발생한다.
하지만 "?"를 사용해서 b가 옵셔널 파라미터라고 정의해주면 해당 파라미터는 필수가 아니게 되므로 다음처럼 에러가 발생하지 않는다.
