[TIL 2023.07.25] 타입스크립트 입문 / 기본 타입
💻오늘 배운 내용
- 기존 순수 JavaScript로만 개발했을 때의 한계점과 TypeScript의 등장배경에 대해 설명할 수 있다.
- TypeScript 컴파일러와 tsc의 개념에 대해 이야기 할 수 있다.
- .d.ts 파일의 역할과 사용 방법에 대해 설명할 수 있다.
- TypeScript에서 지원하는 기본 타입(boolean, number, string, 배열, 튜플, enum)을 활용하여 코드를 작성할 수 있다.
- 타입 안정성이 코드 품질에 어떻게 기여할 수 있는지를 설명할 수 있다.
- any, unknown, union을 이용하여 가변적 데이터 타입을 정의할 수 있다.
- 가변적 데이터 타입을 남발할 때 생기는 문제에 대해 설명할 수 있다.
JavaScript의 약점
☑️ 실행 시간에 결정되는 변수 타입
☑️ 약한 타입 체크
☑️ 너무나도 물렁물렁한 객체
const obj = { latitude: 11.5, longitude: 47.1 };
const result = obj.latitude * obj.longitute; // 보통은 이런 실수는 컴파일러가 잡아줘야 되는데
console.log(result) // NaN이라는 엉뚱한 값 출현!JavaScript의 단점을 상쇄하기 위해 세상에 등장한 TypeScript !!
☑️ 실행 시간에 결정되는 변수 타입 → 이제는 컴파일 시간에 변수의 타입을 체크
☑️ 약한 타입 체크 → VS Code에 코드를 입력하는 순간 에러 메시지 발생
☑️ 너무나도 물렁물렁한 객체 → VS Code에 코드를 입력하는 순간 에러 메시지 발생
컴파일러의 근본적인 역할
컴파일
프로그래밍 언어로 작성된 소스 코드 → 다른 프로그래밍 언어로 변환하는 도구
소스 코드의 정적 타입 검사를 수행
: 타입 관련 오류를 미리 발견하고 수정할 수 있게 되는 것
tsc는 TypeScript → JavaScript 코드 변환을 해준다
: tsc는 TypeScript → JavaScript 코드 변환
=>디버깅 과정에서 큰 도움이 된다.
주요 명령어
- tsc —-init : tsconfig.json이 생성되는 명령어
- tsc index.ts
- index.ts를 컴파일
- .ts는 TypeScript 파일의 확장자
- tsc src/*.ts
- src 디렉토리 안에 있는 모든 TypeScript 파일을 컴파일
- tsc index.js --declaration --emitDeclarationOnly
- @types 패키지를 위한**.d.ts 파일 생성**을 하는 명령
- TypeScript로 작성된 모듈이 아니라 JavaScript로 작성된 모듈에 타입 선언을 제공할 때 유용하게 쓰인다
.d.ts 파일
JavaScript 라이브러리도 TypeScript 코드에서 사용할 수 있게 하는 보물
TypeScript 타입 정의 파일 : JavaScript 라이브러리에 대한 타입 정보를 제공
- .d.ts 파일로 TypeScript 컴파일러는 다음을 알 수 있다💪
- 외부 라이브러리의 함수 타입 정보
- 외부 라이브러리 클래스 타입 정보
- 외부 라이브러리 객체 타입 정보
typescript의 기본 타입
1. boolean
- 2가지의 상태(켜짐/꺼짐, 유효함/유효하지 않음)를 표현하고 싶은 경우 → boolean을 사용
3가지 이상의 상태를 표현하고 싶은 경우 → enum이나 string을 사용- boolean 타입은 참(true) 또는 거짓(false) 값을 나타낸다.
- 이외의 값은 표현을 할 수 없다
- 조건문, 비교 연산 등에서 주로 사용
2. number
- number 타입은 TypeScript에서 사용하는 모든 숫자
- TypeScript에서는 number 타입이 정수, 실수 뿐 아니라 2, 8, 16진수까지 표현할 수 있다
- 모든 수치 연산에 사용되는 값은 number 타입으로 명시
3. string
- string 타입은 텍스트 데이터를 나타냅니다.
- 작은 따옴표(’), 큰 따옴표(”), 백쿼트(`) 를 사용하여 문자열을 표현
4. 배열
- 배열은 기본타입에 []가 붙은 형태의 타입
5. 튜플
- 튜플은 서로 다른 타입의 원소를 순서에 맞게 가질 수 있는 특수한 형태의 배열
튜플과 배열의 차이
- 배열은 number[], string[] 처럼 같은 타입의 원소만 가질 수 있다.
- const testScores : number[] = [90, 85, 78, 92, “88”];
- 위의 코드처럼 마지막 원소를 string 타입으로 넣으면 에러가 발생
- 숫자만 넣어줘야 합니다. 즉, 같은 타입의 원소만 취급할 수 있다.
- const testScores : number[] = [90, 85, 78, 92, “88”];
- 하지만, 튜플은 어떤 타입의 원소를 허용할 것인지 정의만 해주면 된다.
- 얼마든지 허용된 타입의 데이터들을 저장할 수 있다
🧐 튜플에 데이터를 더 저장하고 싶은데 그래도 상관없나요?
- 원칙적으로는 데이터를 더 저장하는 것은 타입 안정성에 위배가 되는 행위
- 따라서, 정의된 데이터 타입의 개수와 순서에 맞추어 저장을 하는 것이 필수
- 튜플에서도 배열의 메소드인 push를 사용하여 정의된 데이터 타입의 개수보다 더 저장할 순 있다.
하지만, 이렇게 억지로 데이터를 넣으면 튜플 구조가 내부적으로 변경이 되니 좋은 선택은 아니라는점!
6. enum
- enum은 열거형 데이터 타입
- 다양한 상수를 보다 더 이해하기 쉬운 문자열 이름으로 접근하고 사용할 수 있게 하는 타입
- enum 안에 있는 각 요소는 값이 설정되어 있지 않으면 기본적으로 숫자 0으로 시작
- enum 안에 있는 요소에는 number 혹은 string타입의 값만을 할당할 수 있다.
const와 readonly는 불변성을 보장한다
readonly란?
- let, const 두 키워드는 JavaScript에서 많이 사용되는 키워드
- 하지만, readonly는 TypeScript에서 등장한 키워드이다
- readonly는 TypeScript에서 객체의 속성을 불변으로 만드는 데 사용된다
- 즉, 클래스의 속성이나 인터페이스의 속성을 변경할 수 없게 만들 수 있다.
any와 unknown, union에 대하여
1. any
- TypeScript에서 any 타입은 모든 타입의 슈퍼 타입 : 어떤 타입의 값이든 저장할 수 있다
- JavaScript의 object 타입과 같은 최상위 타입
‼️ 주의
- TypeScript를 사용하는 주된 이유 중 하나는 프로그램의 타입 안정성을 확보하기 위한 것
- 그런데, any 타입은 그러한 믿음을 송두리째 저버릴 수 있는 아주 위험한 친구
- any 타입은 코드의 안정성과 유지 보수성을 저해할 수 있다. 가급적 사용을 하지 말 것.
2. unknown
- unknown 타입은 any 타입과 비슷한 역할을 하지만 더 안전한 방식으로 동작
- unknown 타입의 변수에도 모든 타입의 값을 저장할 수 있다.
- 하지만, 그 값을 다른 타입의 변수에 할당하려면 명시적으로 타입을 확인해야 한다
‼️ 주의
- unknown 타입이 그나마 재할당을 할 때 타입 체크가 되어서 안전함을 보장
- 하지만, unknown 타입도 결국 재할당이 일어나지 않으면 타입 안전성이 보장이 되지 않는다.
3. union
- 이럴 때를 위해 union 타입이라는 것이 사용된다.
- union 은 여러 타입 중 하나를 가질 수 있는 변수를 선언할 때 사용
- union은 | 연산자를 사용하여 여러 타입을 결합하여 표현
어쩔 수 없이 가변적인 타입의 데이터를 저장하고 싶다면 any를 쓰기보다는 unknown을 사용하기.
그리고, 가변적인 타입을 일일이 정의할 수 있다면 union 사용이 가장 낫다!
명심하기
TypeScript를 쓰면서 여러 타입을 하나의 변수로 해결하겠다는 생각은 가급적 지양
이런 사소한 습관들이 코드의 안정성을 높이고 유지 보수성을 개선할 수 있다는 것을 명심하기