타입스크립트 쓰는 이유
타입스크립트는 자바스크립트의 타입부분을 업그레이드해서 사용하고 싶을 때 설치해서 쓰는 일종의 자바스크립트 대용품이다.
완전 다른 언어는 아니라 자바스크립트 문법 그대로 이용가능한데 타입문법을 업그레이드해서 쓸 수 있다.
왜냐하면 자바스크립트는 타입에 관대한데,
예를 들어 9-'7' 이렇게 숫자와 문자를 연산해도
parseInt([1, 2, 3])과 같이 숫자로 바꿔주는 함수에 뭔가 이상한 것을 넣어도 아무런 제지가 없다.
자바스크립트는 알아서 타입을 바꿔주기 때문이다. (JavaScript는 Dynamic typing을 지원하는 언어다.)
그런데 타입스크립트는 이런 것들을 전부 에러로 잡아준다. 타입스크립트는 이런 이유로 쓰는 언어라고 볼 수 있다.
아직까지는 굳이.. 타입이 필요한가 생각이 들지만 코드를 엄청 많이 짜거나 다른 사람이 작성한 코드를 유지보수 할 일이 생긴다면 생각이 달라질 수 있다고 한다.
Dynamic typing은 작은 기능들을 개발할 땐 편할 수도 있지만 큰 프로젝트 진행 때에는 이 부분이 오히려 단점이 될 수 있다. type과 관련된 버그들이 많이 발생하기 때문이다.
타입스크립트를 쓰면 에러메세지도 더 정확해진다. 생 자바스크립트는 두루뭉술한 에러메세지가 많은데 타입스크립트는 엄격한 타입룰 덕분에 에러메세지를 친절하게 알려준다. 그래서 언어보다는 일종의 에디터 부가기능과 비슷하다고 보면 된다.
필수 문법 정리
타입지정 방법이 어떻게 되나요?
변수를 만들때 타입지정이 가능하다.
변수명:타입명
타입으로 쓸 수 있는 것들은 string, number, boolean, bigint, null, undefined, [], {} 등이 있다.
타입스크립트는 에러메세지를 알려줘요.
타입을 지정해 놓으면 타입이 의도치 않게 변경될 경우 에러메세지를 띄워준다.
덕분에 타입관련 버그들을 사전에 찾아 없앨 수 있다.
배열과 객체의 타입지정은 어떻게 할 수 있어요?
type[] {key: type}
array 나 object 자료는 이렇게 타입지정이 가능하다.
string타입도 쓰고 싶고 number타입도 쓰고 싶어요!
lastName 변수에 여러가지 타입의 데이터가 들어올 수 있다면 | 기호를 이용해 or 연산자를 표현할 수 있다. 위 예제는 변수에 숫자 혹은 문자를 집어넣을 수 있게 된다.
타입도 저장이 되나요?
type키워드를 이용해 타입을 변수처럼 담아서 사용이 가능하다.
나만의 타입을 만들고 싶어요. (literal type)
string, number 이런 것 뿐만 아니라 나만의 타입을 만들어서 사용이 가능하다. 이렇게 원하는 글자나 숫자를 입력하면 이름이라는 변수엔 앞으로 'kim', 'park'만 들어올 수 있다. 이를 literal type이라고 부른다.
함수를 타입지정 할 수 있다구요.
함수는 파라미터와 return 값이 어떤 타입일지 지정이 가능하다. 실수로 다른 타입이 파라미터로 들어오거나 return될 경우 에러를 내준다. 함수는 return 타입으로 void 설정이 가능한데 return이 없는지 체크할 수 있는 타입이다.
타입스크립트는 지금 변수의 타입이 확실하지 않으면 마음대로 연산할 수 없다. 항상 타입이 무엇인지 미리 체크하는 narrowing 또는 assertion 문법을 사용해야 허락해준다.
array 타입을 정확히 지정하고 싶은데요. tuple타입이 뭔가요?
array 자료 안에 순서를 포함해서 어떤 자료가 들어올지 정확히 지정하고 싶으면 tuple 타입을 사용하면 된다. 대괄호 []안에 들어올 자료 타입을 차례로 적어주면 된다.
그럼 object 타입도 정확하게 하고 싶으면요?
object 타입도 정의가 너무 길면 type 키워드로 변수에 담아 사용가능하다.
type 키워드 대신 비교적 최근에 나온 interface 키워드를 이용해도 무방하다. 차이점은 별로 없다.
특정 속성이 선택사항이면 물음표를 기입한다.
object에 어떤 속성이 들어갈지 모르겠어요..!
object 안에 어떤 속성이 들어갈지 아직 모르겠다면 그냥 전부 통일해서 타입을 지정할 수 있다. index signature라고 한다.
class 타입도 물론,
class도 타입설정이 가능하다.
다만 중괄호 내에 미리 name 변수를 만들어놔야 constructor 안에서 this.name 이렇게 사용이 가능하다.
다음 시간에../.
