오늘은 개인강의를 듣는 시간을 가졌다. 바로 TypeScript 라는 JavaScript의 상의호환 버전 이라 생각하면 편하다.
TypeScript 이 친구는 JavaScript에서 타입을 명확하게 나타내주고 또한 JavaScript에서는 함수를 사용 하게 되는데
num인 숫자 함수와 string인 텍스트 함수가 서로 더하게 된다면 자신이 원하는 숫자가 아니라 문자배열로 나오게 된다.
예) (num)1 + (str)"2" = (string) 12 이렇게 나오게 되버린다.
이걸 방지해주는게 TypeScript 이 친구다.
애초에 저렇게 계산되거나 아님 undifind가 나오는 함수같은건 계산과정중에서 에러를 일으켜 지금 이곳이 문제다. 라고 명확하게 알려준다.
또한 변수명이 오타가 나서 undifind가 나오는 것도 에러를 일으켜서 막아준다.
개발자 입장에서 보면 정말 친절하고 고마운 친구이다.
이걸 쉽게 요약해서 표현하면
타입스크립트란 자바스크립트에서 놓치고 있는 약점들을 보완해서 이를 쉽고 간편하고 안전하게 코드를 짤 수 있게 해주는게 타입스크립트라 배웠다. 이를 통해 함수에서 사용하는 매개변수가 어떤 타입인지(number, string) 등등을 알아서 오류가 생겨도 이를 알아채고 쉽게 수정할 수 있게 해준다.
여기서 강의를 보며 배운 타입(type) 들을 훑어 보자.
boolean?
참(true) 또는 거짓 (false) 값을 나타낸다.
2가지의 상태(켜짐/꺼짐, 유효함/유효하지 않음)를 표현하고 싶은 경우 사용가능
3가지의 이상의 상태를 표현하고 싶은 경우 -> enum이나 string 을 사용.
number?
TypeScript에서 사용하는 모든 숫자를 나타낸다.
string?
number와 같은 개념으로 텍스트 데이터를 나타낸다.
배열?
기본타입에 [ ](대괄호) 가 붙은 형태의 타입을 말한다.
쉽게 생각해서 리스트라 생각하면 된다.
튜플(tuple)?
서로 다른 타입의 원소를 순서에 맞게 가질 수 있는 특수한 형태의 배열이다.
배열은 number[], string[]처럼 같은 타입의 원소만 가질 수 있다.
- const testScores: number[] = [90, 85, 78, 92, "88"];
위의 코드처럼 마지막 원소를 string 타입으로 넣으면 에러가 발생함.
숫자만 넣어줘야 한다. 즉 같은 타입의 원소만 취급할 수 있음.
하지만, 튜플은 어떤 타입의 원소를 허용할 것인지 정의만 해주면 됨.
그럼 얼마든지 허용된 타입의 데이터들을 저장할 수 있음.
enum?
열거형 데이터 타입이라 한다.
다양한 상수를 보다 더 이해하기 쉬운 문자열 이름으로 접근하고 사용할 수 있게 해주는 타입.
dnum 안에 있는 각 요소는 값이 설정되어 있지 않으면 기본적으로 숫자 0으로 시작.
enum 안에 있는 요소에는 number 혹은 string 타입의값만을 할당할 수 있다.
*enum은 명확하게 관련된 상수 값들을 그룹화 하고자 할 때 사용하는게 좋다.
그러나 값으 ㅣ수가 많지 않고, 값들 사이의 관계가 뚜렷하지 않으면 사용하지 않는게 좋다.
let?
let 키워드를 사용하여 선언하면 변수가 된다.
변수는 값을 변경할 수 있다.
const?
const 키워드를 사용하여 선언하면 변수가 아닌 상수가 된다.
상수는 값을 변결할 수 없다.
값을 변경할 수 없다는 얘기는 = 연산자로 다시 할당이 불가.
readonly?
TypeScropt에서 등장한 키워드이다.
TypeScropt에서 객체의 속성을 불변으로 만드는데 사용되는 키워드이다.
즉, 클래스의 속성이나 인터페이스의 속성을 변경할 수 없게 만들 수 있다.
불변성의 중요성.
const, readonly를 사용하면 변수와 객체 솟성의 불변성이 보장된다.
이를 통해 코드의 안정성을 높이고 버그를 줄일 수 있다는 것 명심하자.
any?
TypeScript에서 any타입은 모든 타입의 슈퍼 타입이다.
이는 어떤 타입의 값이든 저장할 수 있다는 의미이다.
javaScript의 object 타입과 같은 최상위 타입이라고 생각하면 된다.
하지만 이건 모든 타입을 다 집어 넣을수가 있어서 되게 위험하다.
TypeScript을 사용하는 의미가 없어지게 되기 때문.
unknown?
이 타입은 any타입과 비슷한 역할을 하지만 더 안전한 방ㅇ식으로 동작한다.
unknown타입의 변수에도 모든 타입의 값을 저장할 수 있다.
하지만, 그 값을 다른 타입읭변수에 할당하려면 명시적으로 타입을 확인해야 한다.
union?
이 타입은 그나마 재할당을 할 때 타입 체크가 되어서 안전함을 보장한다.
하지만 unknown 타입도 결국 재할당이 일어나지 않으면 타입 안전성이 보장 되지 않는다...
이럴때를 위해 union타입이라는 것을 쓰면 된다.
union 타입은 | 연산자를 사용하여 여러 타입을 경합하여 표현한다.
예: type StringOrNumber = string | number;
이런식으로 | 이걸 사용하여 타입을 지정할 수 있게 한다.
이렇게 정리 할 수가 있다.
이제 직접 프로젝트를 실시 하기 위해선 명령어를 입력해줘야 한다.
맨 처음에 파일을 만들면
npm init -y를 입력해 프로젝트를 초기화 해준다.
(package.json 을 설치하는 거라 생각하면 된다.)
그런 다음
tsc --init --rootDir ./src --outDir ./dist --esModuleInterop --module commonjs --strict true --allowJS true --checkJS true이걸 입력해준다.
우선 천천히 살펴보면
- --rootDir ./src
- 타입스크립트 소스 파일들이 위치할 디렉토리 지정
- src 폴더에서 타입스크립트 파일을 찾는다
2. --outDir ./dist
- 컴파일된 JavaScript 파일들이 생성될 디렉토리 지정
- dist 폴더에 결과물이 저장된다.
3. --esModuleInterop
- CommonJS 모듈을 ES6 모듈처럼 사용할 수 있게 해줌
- import/export 사용을 더 쉽게 만들어줘요
4. --module commonjs
- Node.js에서 사용하는 모듈 시스템 사용
- require()와 module.exports 사용 가능
5. --strict true
- 모든 엄격한 타입-체킹 옵션을 활성화
- 더 안전한 코드 작성을 도와준다.
6. --allowJS true
- JavaScript 파일도 프로젝트에서 사용 가능하게 함
- .js 파일도 컴파일 가능
7. --checkJS true
- JavaScript 파일의 타입도 체크
- JavaScript 파일에서도 타입 에러를 찾아준다.
이 모듈들을 다운을 받아주는 거다.
그런다음 package.json 파일에 들어가
"scripts": {
"start": "tsc && node ./dist/index.js",
"build": "tsc --build",
"clean": "tsc --build --clean"
},
scripts 내용을 이렇게 변경을 해준다.
이것들도 내용을 풀어서 설명하는 걸 보면
1. "start": "tsc && node ./dist/index.js
npm start
- `tsc`: TypeScript 파일들을 JavaScript로 컴파일
- &&: 첫 번째 명령어가 성공하면 다음 명령어 실행
- node ./dist/index.js: 컴파일된 JavaScript 파일 실행
- 즉, "컴파일하고 실행하세요!"라는 의미예요
2. "build": "tsc --build"
npm run build
- TypeScript 파일들을 JavaScript로 컴파일만 함
- dist 폴더에 컴파일된 파일들이 생성됨
- 즉, "그냥 컴파일만 하세요!"라는 의미이다.
3. "clean": "tsc --build --clean"
npm run clean
- 이전에 컴파일된 파일들을 모두 삭제
- dist 폴더의 컴파일된 파일들이 지워짐
- 즉, "컴파일된 파일들을 깨끗이 지워주세요!"라는 의미다.
# 개발 중일 때
npm start # 코드를 컴파일하고 바로 실행
# 배포할 때
npm run build # 코드를 컴파일만 함
# 깨끗이 시작하고 싶을 때
npm run clean # 컴파일된 파일들 삭제
npm run build # 다시 컴파일이렇게 명령어를 설정해 놓으면 앞으로 프로젝트를 진행하면서
1. 긴 명령어를 일일이 입력하는 수고를 덜 수가 있다.
2. 팀원들과 협업하는 과정에서 팀원들도 편하게 같은 명령어를 입력할 수 있게 된다.
3. 빌드 과정을 표준화 할 수 있다.
이렇게 장점이 있다.
우선 오늘은 이렇게 마무리를 하고 내일은 Nest.js라는 강의가 있는데 그걸 들을 예정이다.
아직 완벽하게 TypeScript가 이해가 된건 아니지만 앞으로 프로젝트를 진행함으로써 이해할 생각이다.
오늘 하루도 고생했고 내일 하루도 힘내자!