섹션 2. 타입스크립트 기본
1강. 기본타입
기본 타입 : 타입스크립트가 자체적으로 제공하는 타입
node.js 초기화
명령어 : npm init
▶ 이때 git도 초기화되는 것 같았다.
무지성으로 엔터만 치다가 읽어보니 git 관련 정보가 있었다.
타입 정보를 제공하는 typesnode 패키지 설치
명령어 : npm i @types/node
package.json에 @types/node가 추가된 것을 확인할 수 있다.
그런데, 강사분 폴더를 보니 Section2 폴더에 바로 추가를 하셨다.
즉, 터미널을 이동해서 Section2 안에 package.json파일과 tsconfig.json 파일을 넣어야 한다.
그러기 위해서는 터미널 이동 명령어를 알아야 한다.
<터미널 명령어>
- cd 이동경로 : 이동경로로 디렉토리 이동
- cd .. : 현재 폴더의 상위 폴더로 이동
- mkdir 폴더명 : 디렉토리(폴더) 생성
- touch 파일명.확장자 : 파일 생성 (ex. touch file.html)
- ls : 폴더 내에 있는 파일들 출력
- code . : VS code에서 코드에디터 실행 - .은 코드에디터에서 현재 위치의 폴더를 연다는 의미
터미널이 Section2로 변경된 것을 알 수 있다.
여기서 다시 types/node 설치하고 tsconfig.json 파일 생성
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"outDir": "dist",
"strict": true,
"moduleDetection": "force"
},
"include": ["src"]
}
"moduleDection": "force" - 파일들을 개별 모듈로 취급
force로 해놨기 때문에 자동으로 export { } 가 생성된 것
node dist/index.js 로 실행
저번에 나왔던 오류
"type": "module" 입력한 뒤에 실행하면 된다.
그 뒤에 tsconfig.json 파일에 ts-node를 추가해 주고 바뀐 명령어인 tsx로 실행한다.
만일, tsx가 깔려있지 않으면 명령어를 통해 실행한다.
tsx 설치 명령어 : npm i -g tsx
tsx 실행 명령어 : tsx src/index.ts
이게 되게 간단한것 같은데, 막상 아무것도 없이 하려면 뇌가 리셋되는 느낌이다.
여러 번 반복해 봐야겠다.
2강. 원시타입과 리터럴타입
1) 원시타입(Primitive Type)
동시에 하나의 값만 저장하는 타입
- number
- string
- boolean
- null
- undefined
원시 타입이 아닌 배열이나 객체 같은 비원시 타입들은 동시에 여러 개의 값들을 저장할 수 있다.
콜론(:)과 함께 변수의 타입을 지정하는 방식 : 주석(annotation)
- 예) let num1: number = 123;
NaN : Not a Number ←얘도 number type이다.
Null : 값이 없음
Strict Null Check
개발을 하다 보면 어떤 값에 임시로 null을 넣어야 할 때가 있다.
이 상황에서 그냥 null을 넣으면 오류가 발생한다.
strictNullChecks를 false로 설정하면 null check를 엄격하지 않게 검사한다.
null null 하게.. 죄송합니다;
2) 리터럴(literal) 타입
값 자체가 타입이 되는 타입
변수의 타입을 숫자 10, 문자 hello로 지정한 것이다.
즉, 리터럴 타입은 하나의 값만 포함하도록 값 자체가 타입이 되는 타입을 말한다.
3강. 배열과 튜플
1) 배열
//배열
let numArr: number[] = [1, 2, 3];
let strArr: string[] = ["hello", "I am", "innovation"];
let boolArr: Array<boolean> = [true, false, true];< > 안에 타입을 지정하는 방식을 제네릭 방식이라고 한다.
타입을 지정하다가 어떤 타입인지 정확히 모르는 경우, 마우스를 가져다 대면 설명이 나온다.
위에서는 배열에 들어가는 요소들의 타입이 다양하기 때문에 string, number 모두 사용 가능하다는 설명이다.
2) 배열에 들어가는 요소들의 타입이 다양할 경우
//배열에 들어가는 요소들의 타입이 다양할 겅우
let multiArr: (number | string)[] = [1, "hello"];그래서 위와 같이 쓰면 혼합해서 쓸 수 있다.
3) 다차원 배열
//다차원 배열의 타입을 정의하는 방법
let doubleArr: number[][] = [
[1, 2, 3],
[4, 5],
];배열의 대괄호가 [] []로 2개니까 2차원 배열, 3개면 3차원 배열을 넣으면 된다.
4) 튜플
자바스크립트에는 없고, 타입스크립트에만 존재하는 배열
길이와 타입이 고정된 배열을 말한다.
//튜플
let tub1: [number, number] = [1, 2];
let tub2: [number, string, boolean] = [1, "2", true];튜플을 매서드로 자바스크립트에서 사용될 때문 길이 제한이 없어진다.
이에 유의해서 사용해야 한다.
튜플을 유용하게 사용하는 방법
이렇게 회원이름과 가입순번을 저장하는 경우, 4번처럼 양식에 맞지 않게 저장하는 경우가 있다.
이럴 때 튜플을 사용하면 이런 경우를 적발해 준다.
이렇게 사용하면 통일성을 유지할 수 있다.
