[TypeScript]TypeScript의 개요 및 기초

📌TypeScript 개요 및 기초

✨TypeScript 개요

TypeScript란 어떤 언어인가?

TypeScript란 JavaScript를 더 안정적으로 사용할 수 있도록 Type이라는 안전장치를 추가한 확장판 JavaScript라고 할 수 있다.※참고: tsconfig.js → TypeScript의 컴파일러 옵션 파일이다.

※참고: tsconfig.js → TypeScript의 컴파일러 옵션 파일이다.

 

 

✨TypeScript의 원시타입: number, string, boolean, null, undefined

TypeScript의 원시타입인 Type number, string, boolean, null, undefined에 대해 TypeScript를 사용하는 방법은 다음과 같다.

// type 주석 또는 type annotation

// 기본적인 5개의 원시 type: number, string, boolean, null, undefined
// 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 numb7: number = NaN;

// num1.toUpperCase(); error
num1.toFixed();

// string
let str1: string = "hello";
let str2: string = 'hello';
let str3: string =  `hello`;
let str4: string = `hello ${num1}`;

str1.toUpperCase();

// boolean
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 = false; error

 

✨TypeScript의 배열, 튜플

배열과 튜플에 대해서 TypeScript를 적용하는 방법은 다음과 같다. 이때, 튜플은 JavaScript에서는 지원하지 않고, TypeScript에서만 지원하는 type으로 길이와 타입이 고정된 배열을 의미한다.

// 배열
let numArr:number[] = [1,2,3];
let strArr:string[] = ["hello", "ts", "winterlood"];
let boolArr:boolean[] = [true,false,true];
let boolArr2: Array<boolean> = [true, false, true];

// 배열에 들어가는 값이 다양한 경우
let multiArr: (number | string)[] = [1, "hello"];

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

// 튜플 -> JavaScript에는 없고 TypeScript에서만 특별히 제공되는 타입
// 튜플 : 길이와 타입이 고정된 배열 
let tup1:[number, number] = [1,2];
// tup1 = [1,2,3]; 길이를 넘어서는 배열을 저장할 수 없다.
// tup1 = ["1","2","3"]; Type이 다른 배열을 저장할 수 없다.

let tup2: [number, string, boolean] = [1,"2",true];
const users: [string, number][] = [
    ["이정환",1],
    ["이아무개",2],
    ["김아무개",3],
    ["이정환",4],
    ["이정환",5],
]

 

 

✨TypeScript 객체

구조적 타입 시스템 = Property 기반 타입 시스템(Property-based type system) ↔ C언어, Java는 명목적 타입 시스템이다.

즉, TypeScript는 대부분의 언어가 사용하는 명목적 타입 시스템이 아닌 구조적 타입 시스템을 사용한다.

// object
// 결론적으로 객체를 사용하려면 객체 리터럴 타입을 사용해야 한다.
let user: {
    id?: number, // 있어도 되고, 없어도 되는데 있다면 type이 number여야 한다.
    name: string
} = {
    id:1,
    name: "이정환",
};

// 객체의 type을 object로 표현하면 다음과 같이 점 표기법으로 접근하려고 할 때 문제가 발생한다.
// console.log(user.name); error

// let dog:{
//     name: string,
//     color: string,
// } = {
//     name: "돌돌이",
//     color: "brown"
// }

user = {
    name: "홍길동",
};

 

*Optional Property

?를 붙임으로써 선택적 Property로 지정할 수 있다.

// object
// 결론적으로 객체를 사용하려면 객체 리터럴 타입을 사용해야 한다.
let user: {
    id?: number, // 있어도 되고, 없어도 되는데 있다면 type이 number여야 한다.
    name: string
} = {
    id:1,
    name: "이정환",
};

// 객체의 type을 object로 표현하면 다음과 같이 점 표기법으로 접근하려고 할 때 문제가 발생한다.
// console.log(user.name); error

// let dog:{
//     name: string,
//     color: string,
// } = {
//     name: "돌돌이",
//     color: "brown"
// }

user = {
    name: "홍길동",
};

 

 

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

✔타입 별칭이란?(Type Alias)

• 변수를 선언하듯 타입을 별도로 정의하는 것
• 동일한 스코프에 동일한 이름의 타입 별칭 선언 불가

*기본 타입 별칭

타입 별칭을 통해 간단한 기본 타입을 새로운 이름으로 정의할 수 있다.

type UserId = string;
type Age = number;

let userId: UserId = "user123";
let userAge: Age = 25;

*복잡한 타입 별칭

객체와 같은 복잡한 구조의 타입도 별칭으로 지정할 수 있다. User라는 이름으로 객체 타입을 정의하여, 동일한 구조의 객체를 여러 곳에서 쉽게 사용할 수 있다.

type User = {
    id: UserId;
    name: string;
    age: Age;
    email: string;
};

let newUser: User = {
    id: "user123",
    name: "John Doe",
    age: 30,
    email: "[johndoe@example.com](<mailto:johndoe@example.com>)"
};

 

✔인덱스 시그니처

프로퍼티의 수가 많을 때 모든 프로퍼티에 대해 type을 지정하기 불편하다.

type CountryCodes = {
  [key: string]: string // key가 string 타입이고 value가 string 타입인 모든 프로퍼티를 포함한다.
};

let countryCodes: CountryCodes = {
  Korea: "ko",
  UnitedState: "us",
  UnitedKingdom: "uk",
  // (... 약 100개의 국가)
  Brazil : 'bz'
};

type CountryNumberCodes = {
  [key: string]: number; // 국가 코드를 숫자로 보관하는 객체가 하나 더 필요할 때
  Korea: number; // 반드시 포함해야 하는 프로퍼티가 있다면 따로 정의 가능
  Italy: string; // 오류! 하지만 추가적인 프로퍼티를 정의할 때는 인덱스 시그니쳐의 value 타입과 직접 추가한 프로퍼티의 value 타입이 호환되거나 일치해야 한다.
};

 

✨Enum 타입

Enum은 컴파일 결과 객체가 된다.

// enum 타입
// 여러가지 값들에 각각 이름을 부여해 열거해두고 사용하는 타입

// 숫자형 열거
enum Role {
    ADMIN = 0,
    USER = 1,
    GUEST = 2,
}

const user1 = {
    name: "이정환",
    role: Role.ADMIN, // 관리자
} 

const user2 = {
    name: "홍길동",
    role: Role.USER, // 회원
}

const user3 = {
    name: "아무개",
    role: Role.GUEST, // 게스트
}

// enum에 직접 할당하지 않으면 0부터 1씩 늘어나는 값으로 자동 할당된다.
enum Role2 {
    ADMIN, // 0 할당(자동)
    USER,  // 1 할당(자동)
    GUEST, // 2 할당(자동)
}


// 문자형 열거
enum Language {
    korean = "ko",
    english = "en",
}
  
const user11 = {
    name: "이정환",
    role: Role.ADMIN, // 0
    language: Language.korean,// "ko"
};

 

 

✨Any와 Unkown 타입

✔Any

Any는 TypeScript를 유명무실하게 만들고 위험한 코드를 만들 수 있어 최대한 사용을 지양해야 한다.

• 타입 검사를 받지 않는(타입 계층도를 따르지 않는) 치트키 타입
• 아무 타입의 값을 담거나, 아무 타입의 메서드도 마음대로 호출 가능
• any 타입의 값을 어떤 타입으로 정의된 변수던 문제 없이 다 할당 가능

✔Unknown

• 어떤 타입의 값이든 다 저장할 수 있다.
• 하지만 unknown 타입의 값은 어떤 타입의 변수에도 저장할 수 없다.
• 또한 unknown 타입의 값은 어떤 연산에도 참여할 수 없고, 어떤 메서드도 사용할 수 없다.
• unknown 타입의 값을 연산에 참여하게 하고 싶다면 타입 좁히기를 해야 한다.

if (typeof unknownVar === "number") {
	// 이 조건이 참이된다면 unknownVar는 number 타입으로 볼 수 있음
  unknownVar * 2;
}

 

✨Void와 Never 타입

✔Void

• 아무런 값도 없음을 의미하는 타입
• 보통 아무런 값도 반환하지 않는 함수의 반환값 타입을 정의할 때 사용

function logMessage(message: string): void {
    console.log(message);
}

logMessage("This is a log message."); // 콘솔에 메시지를 출력하지만 아무 값도 반환하지 않

 

 

✔Never

• 불가능을 의미하는 타입
• 보통 함수가 어떠한 값도 반환할 수 없는 상황일 때 함수의 반환값 타입을 정의할 때 사용한다.
• ex) 무한 루프, 의도적으로 에러를 throw하는 함수
• never 타입의 변수에는 any를 포함해 어더한 타입의 값도 할당할 수 없다.

function throwError(message: string): never {
    throw new Error(message);
}

function infiniteLoop(): never {
    while (true) {
        // 무한 루프: 함수는 절대 종료되지 않으며, 값을 반환하지 않음
    }
}

throwError("This is an error!"); // 함수는 에러를 던지고 종료되지 않음
infiniteLoop(); // 무한 루프에 빠져 종료되지 않음

 

 

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

drizzle96 (연우(Ian)의 개발 블로그) / 작성글 - velog