chapter 2. 타입스크립트 기본
0. 기본 타입(Basic Types) 이란?
- TS가 자체적으로 제공하는 타입, 내장 타입
- TS에서만 제공하는 타입: any, void, never, unknown
- 타입 계층도: TS가 제공하는 기본 타입들을 계층에 따라 분류한 그림
chapter 2. 실습 환경 설정
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"outDir": "dist",
"strict": true,
"moduleDetection": "force"
},
"include": ["./"]
}tsc //컴파일
tsx index.ts //실행
1. 원시타입과 리터럴 타입
원시타입
- 동시에 한 개의 값만 저장할 수 있는 타입들
- number, string, boolean...
📚 number 타입
// 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;
num1 = 'hello'; // ❌
num1.toUpperCase(); // ❌- js에서 숫자를 의미하는 모든 값을 포함하는 타입
- 정수, 소수, 음수, Infinity, NaN 등 모두 포함
- number 타입으로 정의한 변수에는 number 타입 이외의 값을 할당할 수 없다. 당연히 toUpperCase와 같은 메서드도 사용 불가
📚 string 타입
// string
let str1: string = "hello";
let str2: string = 'hello';
let str3: string = `hello`;
let str4: string = `hello ${str1}`;문자열을 의미하는 타입
📚 boolean 타입
// boolean
let bool1 : boolean = true;
let bool2 : boolean = false;참(true), 거짓(false)만 저장하는 타입
📚 null 타입
// null
let null1: null = null;오직 null값만 포함하는 타입
📚 undefined 타입
// undefined 타입
let unde1: undefined = undefined;오직 undefined만 포함하는 타입
📚 null 값을 다른 타입의 변수에 할당하기
아직 값이 정해지지 않을 시 변수에 null을 임시로 넣어두기 👉 JS에서는 가능, TS에서는 불가
가능하게 만들고 싶다면 `strcitNullChecks: false` (엄격한 null 검사) 설정
리터럴 타입
하나의 값만 포함하도록 값 자체로 만들어진 타입
let a: 10 = 10;
let b: "hello" = "hello";- 변수 a의 타입을 숫자 10으로 설정했으므로, 이제 a에는 10 이외의 값을 저장할 수 없게 된다.
- 마찬가지로 b 역시 타입을 "hello"로 지정했기 때문에 b에는 "hello" 외의 값을 저장할 수 없다.
- 불리언 타입의 값도 리터럴 타입으로 만들 수 있다.
2. 배열과 튜플
- 배열: JS 배열과 동일
- 튜플: TS에서만 제공되는 타입
배열
✅ 배열 타입 정의 방법
let arr: number[] = [1, 2, 3, 4];`변수 이름 : 배열요소타입[]`
let boolArr: Array<boolean> = [true, false, true];`Array<배열요소타입>` 형태로도 배열의 타입 정의 가능(제네릭 문법)
✅ 다양한 타입 요소를 갖는 배열 타입 정의하기
let multiArr: (number | string)[] = [1, "hello"];유니온 타입(바`|`를 이용해 여러 타입을 정의하는 문법)을 이용해
여러 타입 중 하나를 만족하는 경우 허용하는 범용적인 타입을 만들 수 있다.
✅ 다차원 배열 타입 정의하기
let doubleArr : number[][] = [
[1, 2, 3],
[4, 5],
];
튜플
- 자바스크립트에는 없는 타입스크립트의 특수 타입
- 길이와 타입이 고정된 배열
let tup: [number, string, boolean] = [1, "hello", true];
✅ 튜플도 배열이다
tsc를 이용해 튜플 타입이 정의된 타입스크립트 코드를 컴파일하면 튜플은 자바스크립트 배열로 변환된다.
따라서 튜플은 배열 메서드인 push, pop을 이용해 요소를 추가 및 삭제할 수 있다.
👉 🚫튜플 사용 시 배열 메서드를 이용해 추가 및 삭제 연산을 할 때에는 주의가 필요함🚫
let tup1: [number, number] = [1, 2];
tup1.push(1); // 에러 발생 x
tup1.push(1);
tup1.push(1);
tup1.push(1);
✅ 튜플을 사용하는 이유
배열의 경우 기존 데이터와 순서가 다른 데이터를 입력할 시 에러가 발생하기 때문에 빨리 눈치채기 쉽지 않다.
const users = [
["이정환", 1],
["이아무개", 2],
["김아무개", 3],
["박아무개", 4],
[5, "조아무개"], // <- 새로 추가함, 오류 발생 x
];
그러나 튜플의 경우 실수를 빨리 발견하고 에러 처리하기가 쉽다.
const users: [string, number][] = [
["이정환", 1],
["이아무개", 2],
["김아무개", 3],
["박아무개", 4],
[5, "조아무개"], // 오류 발생
];