타입스크립트란
타입스크립트는 왜 필요한가
- 자바스크립트 코드가 지저분하다
- 코드의 스케일이 커지면서 코드 관리가 되지 않는다.
타입스크립트 사용하면 좋은 점
- 자바스크립트 기반보다 버그를 줄일 수 있다
- 유지보수가 쉽다
- 높은 퀄리티 코드
타입스크립트 = 자바스크립트 + 타입체크
타입스크립트의 컴파일 = 브라우저에서 해석할 수 있는 자바스크립트로 변환하는 과정
막간 비교
환경설정
prettier, eslint, bracket, typescript complier 설치함
첫번째 프로젝트
app.ts 작성, 터미널에 tsc app.ts하여 컴파일한 결과인 app.js 파일이 새로 생긴 것을 확인, 터미널에서 node app.js하면 작성한 app.ts의 결과값을 app.js파일을 통해 확인할 수 있다.
추가 : tsconfig.json 기본 설정값 파일 추가하기 위해 터미널에 tsc --init 명령어 치기.
그러나 app.ts파일이 수정될 경우 매번 tsc app.js하여 app.js파일을 바꿔줄 수는 없다.
이에 대한 방한 : 터미널에 tsc -w app.ts 라고 입력
뜻 : app.ts를 감시(watch)하면서 업데이트 사항이 생기는 즉시 app.js파일에 반영해준다는 뜻
데이터 타입과 추론
기존 자바스크립트의 문제 : 변수에 어떤 데이터 값도 할당할 수 있음
-> 변경이 너무 잘 됨
타입스크립트에는 타입 추론 기능이 있어서 예기치 못한 타입 변경 문제를 막을 수 있다.
타입 추론(type inference) 기능
- 타입스크립트는 타입 추론 기능을 통해 변수의 타입을 자동으로 판단할 수 있음
- 타입스크립트 컴파일러가 초기에 할당된 값을 바탕으로 변수의 타입을 추론함
예시 : let age = 30;
- 타입스크립트는 age변수의 타입을 자동으로 number로 추론함.
- 타입 추론은 코드를 간결하게 작성할 수 있도록 도와주지만 타입을 명시적으로 지정하는 것이 더 명확함.
- 타입 추론이 모호한 경우나 복잡한 로직에서는 타입을 명시하는 것이 좋다.
null : 의도적으로 할당하지 않은 값 - 주소값이 없음
undefined : 값이 할당되지 않은 변수의 기본값
파이썬에서의 튜플과 타입스크립트의 튜플은 다르다
전자는 읽기 전용임.
타입스크립트 타입 명시
타입 명시 : 변수를 선언할 때 변수 값의 타입을 명시함으로써 벼수의 데이터 타입을 지정함.
예시) let x : string = "나는 문자열이다.";
getInfo함수의 반환타입이 상당히 김.
이를 다음시간에 인터페이스를 이용하여 줄여보겠다!
인터페이스
Student라는 인터페이스 데이터타입 만들어서 getInfo의 리턴 타입을 Student로 만들기, 이후 console.log(getInfo(5678));을 실행할 경우 아래 콘솔창에 Student리턴값이 뜨게 됨.
만약 return에서 age: 1을 주석처리 해보면, return타입에맞지 않는다는 오류가 뜨게 됨. Student 데이터타입에 맞는 반환값이 아니라는 뜻으로 오류가 뜸.
이런 경우를 방지하기 위해 사진에서 age?: number;처럼 변수 뒤에 물음표를 붙이면 있어도 되고 없어도 되는 요소가 됨.
?(물음표)는 optional기호라고 하고, ?가 붙은 age프로퍼티는 선택적 프로퍼티라고 부르게 됨.
이와 유사하게
다음과 같이 함수 매개변수에 옵셔널 기호를 붙여서 매개변수를 받아도, 안 받아도 되는 상황을 만들어 줄 수 있음.
[요약]
- 인터페이스는 데이터 타입으로 사용 가능
- 선택적 프로퍼티로 지정하려면 속성값 뒤에 ?를 붙여준다
- 메소드로 인터페이스 내에서 선언 가능
- 인터페이스를 클래스에 상속할 수 있다. -> 메소드 오버라이딩 필수/extends의 개념이 아니라 implements의 개념임.
이런 방식으로 인터페이스를 사용해볼 수 있다.
짚고 가야 할 것 : app.ts에는 작성한 인터페이스가 보이지만 app.js에는 인터페이스가 보이지 않는다. 이유? 완벽하게 구현되지 않은 타입이므로 굳이.. 보여주지 않음
열거형(enum)
enum은 interface와 달리 런타임에 존재하는 실제 객체여서 js파일에 보여진다.
아래 예시처럼 사용할 수 있음
app.js 파일을 보면
다음처럼 순서대로 0, 1, 2를 할당해놨다.
숫자 뿐만 아니라 문자열 열거형을 쓸 수도 있다.
예시 :
