인프런 강의 - 한 입 크기로 잘라먹는 타입스크립트 (타입스크립트 기본)

한 입 크기로 잘라먹는 타입스크립트(TypeScript) 강의 | 이정환 Winterlood - 인프런

 

📌 기본타입

타입스크립트가 자체적으로 제공하는 타입들로, 각 타입들은 부모-자식 관계를 가지며 계층적으로 구성

 

📌 원시타입과 리터럴타입

// ✅ 원시 타입 (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`;
let str4: string = `hello ${num1}`;

// boolean
let bool1: boolean = true;
let bool2: boolean = false;

// null
let null1: null = null;

// undefined
let unde1: undefined = undefined;

// ✅ 리터럴 타입 (Literal Type)
// → 특정한 "값 그 자체"를 타입으로 지정
// → 오직 해당 값만 할당 가능 (타입이 곧 값)
let numA: 10 = 10;              // 숫자 10만 할당 가능
let strA: "hello" = "hello";    // 문자열 "hello"만 할당 가능
let boolA: true = true;         // true만 할당 가능
let boolB: false = false;       // false만 할당 가능

 

📌 배열과 튜플

// ✅ 배열 (동일한 타입의 값들을 순서대로 나열한 자료 구조)
let numArr: number[] = [1, 2, 3];
let strArr: string[] = ["hello", "everyone"];
let boolArr: Array<boolean> = [true, false, true]; // 제네릭 방식

// 배열에 들어가는 요소들의 타입이 다양한 경우 (유니언 타입)
let multiArr: (number | string)[] = [1, "hello"];

// 다차원 배열의 타입을 정의하는 방법
let doubleArr: number[][] = [
    [1, 2, 3],
    [4, 5],
];

// ✅ 튜플 (배열처럼 보이지만, 길이와 각 요소의 타입이 고정된 데이터 구조)
// → 각 요소가 "정해진 의미"와 타입을 가지는 구조에 적합
let tup1: [number, number] = [1, 2];
let tup2: [number, string, boolean] = [1, '2', true];

// 튜플도 배열이기 때문에 push, pop 등 메서드 사용 가능
// 컴파일러는 허용하지만 의도된 구조가 깨질 수 있으므로 주의 필요
tup1.push(3);

 

📌 객체

// ✅ 객체 타입 (객체의 구조를 명확하게 정의하기 위한 타입)
let user: {
    id?: number; // ?: 선택적 프로퍼티
    name: string;
} = {
    name: "강연수"
};

let config: {
    readonly apiKey: string // readonly: 읽기 전용 프로퍼티
} = {
    apiKey: "MY API KEY",
};
// config.apiKey = "NEW KEY"; // ❌

 

📌 타입 별칭과 인덱스 시그니처

// ✅ 타입 별칭 (복잡한 객체 타입에 이름을 붙여 재사용성을 높이는 기능)
// → 여러 곳에서 반복적으로 사용될 타입 구조를 한 번에 정의하고 재사용 가능
type User = {
    id: number;
    name: string;
    nickname: string;
    birth: string;
    bio: string;
    location: string
};

let user1: User = {
    id: 1,
    name: "강연수",
    nickname: "강수",
    birth: "2002.05.29",
    bio: "안녕하세요",
    location: "대구광역시"
};

let user2: User = {
    id: 1,
    name: "홍길동",
    nickname: "홍동",
    birth: "1900.01.01",
    bio: "안녕하세요",
    location: "서울특별시"
};

// 동일한 스코프 내에서는 같은 이름의 타입 별칭 중복 정의 불가
// 함수 등 다른 스코프에서는 가능
function test() {
    type User = string; // OK: 함수 내부의 별도 스코프
}

// ✅ 인덱스 시그니처 (객체의 key 개수나 이름이 정해지지 않은 경우 유용한 문법)
// → 유연한 구조의 객체 타입 정의에 사용
type CountryCodes = {
    [key: string] : string; // 모든 key는 string, 모든 value도 string
    Korea: string;          // 반드시 포함되어야 할 프로퍼티도 명시 가능
};

let countryCodes: CountryCodes = {
    Korea: "ko",
    UnitedState: "us",
    UnitedKingdom: "uk",
    // ...
};

 

📌 Enum 타입

// ✅ enum 타입 (관련된 상수 값들을 하나의 그룹으로 열거하여 정의하는 타입)
// → TypeScript에서 제공하는 열거형 타입, JS로 컴파일되면 객체로 변환됨
enum Role { // 숫자형 enum
    ADMIN = 0,
    USER = 1,
    GUEST = 2,
}

enum Language { // 문자열 enum
    korean = "ko",
    english = "en",
}

const user1 = {
    name: "강연수",
    role: Role.ADMIN,
    language: Language.korean,
};

const user2 = {
    name: "강말리",
    role: Role.USER,
    language: Language.korean,
};

const user3 = {
    name: "강똥개",
    role: Role.GUEST,
    language: Language.english,
};

 

📌 Any와 Unknown 타입

// ✅ any 타입 (모든 타입을 허용하며 타입 검사를 생략하는 특수 타입)
// → 타입 안정성을 포기하고 유연성을 극대화할 수 있지만, 사용에 주의가 필요한 타입
let anyVar: any = 10;
anyVar = "hello";
anyVar = true;
anyVar = {};
anyVar = () => {};

// 타입스크립트의 타입 검사 무력화 → 런타임 에러 발생 가능
anyVar.toUpperCase(); // 문자열이 아니어도 호출 가능
anyVar.toFixed();     // 숫자가 아니어도 호출 가능

// 어떤 타입 변수에도 할당 가능 (타입 검사 X)
let num: number = 10;
num = anyVar; // 문제 없이 통과됨

// ✅ unknown 타입 (any와 유사하지만 타입 안전성이 보장되는 타입)
// → 어떤 값이든 할당 가능하지만, 사용 전 타입 확인이 필요함
let unknownVar: unknown;
unknownVar = "";
unknownVar = 1;
unknownVar = () => {};

// 다른 타입 변수에는 직접 할당 불가
// num = unknownVar; // ❌

// 메서드 호출, 연산 등 불가
// unknownVar.toUpperCase(); // ❌
// unknownVar.toFixed();     // ❌
// unknownVar * 2;           // ❌

// 타입 가드를 통해 안전하게 타입 좁히기
if (typeof unknownVar === "number") {
    num = unknownVar;
    console.log(unknownVar * 2);
}

 

📌 Void와 Never 타입

// ✅ void 타입 (값이 존재하지 않음을 나타내는 타입)
// → 주로 "아무것도 반환하지 않는 함수"의 반환 타입으로 사용됨
function func1(): string {
    return "hello";
}

function func2(): void {
    console.log("hello");
}

// void는 'undefined'만 허용 (strictNullChecks가 false면 'null'도 가능)
let a: void;
a = undefined;
// a = null; // ❌ 기본 설정에선 오류 (strictNullChecks가 꺼져 있어야 가능)

// ✅ never 타입 (절대 반환되지 않음을 나타내는 타입)
// → 함수가 "정상적으로 종료되지 않는 경우"의 반환 타입으로 사용됨
function func3(): never {
    while (true) {}
}

function func4(): never {
    throw new Error();
}

// never 타입은 어떤 값도 할당할 수 없음
let b: never;
// b = 1;          // ❌ 오류
// b = undefined;  // ❌ 오류
// b = null;       // ❌ 오류

 

⬇️ 다음 내용은 아래 글을 참고

인프런 강의 - 한 입 크기로 잘라먹는 타입스크립트 (타입스크립트 이해하기)