리액트 + TypeScript 프로젝트를 진행하기 위해 오늘부터 약 일주일간 타입스크립트를 공부하려고 한다.
이전에도 공부를 했었지만, 정말 필요로 하는 부분만 공부를 했었기 때문에, 이번 기회에 제대로 한번
공부해보려고 한다.
강의는 "한입 크기로 잘라먹는 타입스크립트" - 이정환 강사님꺼를 들을려고 한다.
섹션2. 타입스크립트 개론
타입스크립트를 소개합니다.
타입스크리브 = 자바스크립트의 확장판
자바스크립트를 더 안전하게 사용할 수 있도록 “타입 관련 기능들을 추가한” 언어
js는 각 타입을 모르지만, ts를 사용하면 변수의 타입을 지정할 수 있다.
배워야 하는 이유는?
자바스크립트는 원래 아주 간단한 상호작용 정도를 처리하기 위해 개발되었다.
따라서, 버그로부터 안전성 일부를 포기하는 대신에 간결하고 쉽게 코드를 작성하는데 중점을 두고 만들어진 언어이다.
오늘 날에는 웹서버, 모바일 앱, 데스크탑 앱을 만들 때도 사용되고, js 한계가 사라지면서 전성기에 도래했다.
하지만 이렇게 복잡한 앱을 js로 개발하다보니 js가 너무 엄격하지 않다보니 버그 발생 가능성이 높아졌다.
이러한 js의 문제점을 극복하기 위해서 안정성을 추가로 확보한 언어가 필요하다 보니 타입 스크립트가 개발되었다.
자바스크립트의 한계점과 타입스크립트
JS에는 정확히 어떤 한계점이 있는가?
JS는 동적 타입 시스템이다.
여기서 동적 타입 시스템이란 코드를 실행하고 나서 그때 그때 마다 유동적으로 변수의 타입을 결정하는 것을 의미하고, 자유롭고 유연한 시스템이다.
예로는 Python, JavaScript가 있다.
단점
toUpperCase는 문자열에 쓸 수 있는 함수인데, 숫자이므로 오류가 발생한다.
이 코드가 오류가 발생하긴 하지만, 실행이 되긴 한다.
→ 규모가 큰 프로젝트에서는 예상치 못한 오류를 통해 프로그램이 강제 종료되거나, 서비스가 마비가 될 수 있다.
정적 타입 시스템이란
코드 실행 이전 모든 변수의 타입을 고정적으로 결정하고, 엄격하고 고정적인 시스템이다
ex) C, Java
타입스크립트의 독특한 타입 시스템
let a: number = 1;
a.toUpperCase();a를 number 타입으로 지정했기 때문에 오류를 띄어서 실행이 안되게 막아준다.
이렇게 정적 타입 시스템처럼 할 수도 있고,
아래와 같이 타입을 정의하지 않아도 타입을 자동으로 인지할 수 있다.
let a = 1;
a.toUpperCase();모든 변수에 타입을 일일히 지정할 필요 없음 = 점진적 타입 시스템
즉, 숫자 값으로 초기화 되었으니 a는 수자 타입이겠다고 추론해서 자동으로 타입을 지정함
⇒ 정적 + 동적 타입 시스템을 채택한 것이다.
정리
타입스크립트의 동작 원리
타입 검사 실패 예시
타입 검사 성공 예시
Hello TS World!
설치
nodejs 패키지 초기화
npm init⇒ 모든 옵션은 default로
nodejs 타입 정보를 갖고있는 types/node 패키지 설치
npm i @types/nodetypescript 컴파일러 설치
npm install typescript컴파일하기
tsc 파일경로/파일명
컴파일을 하면서 number 타입이 사라지는 것을 확인할 수 있다.
여기서 실행은
node 파일경로/파일명.js로 해야하는데, 프로젝트를 하면서 일일이 컴파일을 통해서 나온 js 파일을 실행하는 것을 굉장히 번거로운 일이다.
이때 tsx를 사용해주면 된다.
npm i -g tsx실행
tsx 파일경로/파일명타입스크립트 컴파일러 옵션 설정하기
tsconfig.json
tsc --init⇒ 타입스크립트 컴파일러의 설정 파일이다.
include
특정 폴더, 예를 들어 src 안에 있는 모든 ts 파일을 한번의 명령으로 모두 컴파일 할 수 있다.
{
"include": ["src"]
}
⇒ 터미널에 tsc를 입력하면 src에 있는 모든 ts 파일들이 컴파일이 된다.
target
컴파일 결과 생성되는 js 코드의 버전을 의미
{
"compilerOptions": {
"target": "ESNext"
},
"include": ["src"]
}
module
변환되는 js 코드에 모듈 시스템을 설정하는 모듈 옵션
undici-types 오류
“compilerOptions”에 skipLibCheck: true를 추가해주면 된다.
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"skipLibCheck": true
},
"include": ["src"]
}outDir
컴파일 했을 때, js 파일들이 어디로 갔으면 좋겠는지 지정해주는 것
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"skipLibCheck": true,
"outDir": "dist"
},
"include": ["src"]
}
strict
타입 스크립트 컴파일러가 타입을 검사할 때 얼마나 엄격하게 할지 결정하는 옵션
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"skipLibCheck": true,
"outDir": "dist",
"strict": true
},
"include": ["src"]
}
섹션3. 타입스크립트 기본
기본타입
기본타입
타입스크립트가 자체적으로 제공하는 타입
원시타입과 리터럴타입
원시타입(Primitive Type)
하나의 값만 저장하는 타입
코드로 알아보기
// number: 숫자만 가능
let num1: number = 123;
let num2: number = -123;
let num3: number = 0.123;
let num4: number = -0.123;
let num5: number = Infinity;
let num6: number = -Infinity;
let num7: number = NaN;
// string: 문자열만 가능
let str1: string = "hello";
let str2: string = `hello`;
let str3: string = `hello ${num1}`;
// boolean: true, false만 가능
let bool1: boolean = true;
let bool2: boolean = false;
// null
let null1: null = null;
// undefined
let unde1: undefined = undefined;
// 리터럴 타입: 값 그 자체가 타입이 되는 것
// 다른 값을 넣을 수 없다. 값 자체가 됌.
let numA: 10 = 10;
let strA: "hello" = "hello";
let boolA: true = true;