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, "조아무개"], // 오류 발생 ];
