한입 크기로 잘라 먹는 타입스크립트 : 타입스크립트 기본

타입의 종류에 대해 알아보는 시간

기본타입

JavaScript와 유사

 

원시타입 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;

 

엄격한 null 검사 : strictNullChecks

- false로 설정 시 null 타입이 아닌 변수에도 null을 넣을 수 있음(default : true)

- strict와 연동되어 strict가 true면 자동으로 true, false면 자동으로 false 되지만 아래처럼 추가 설정 가능

        "strictNullChecks": false,

let numA : number = null; // false 시 허용됨

 

리터럴 타입

// 리터럴 타입
let numA : 10 = 10; // 해당 값만 허용함
numA = 12; // 오류 발생

let strA : "hello" = "hello";

let boolA : true = true;

 

배열과 튜플

배열

// 배열
// 정의하는 법 첫번째
let numArr: number[] = [1, 2, 3];

let strArr: string[] = ["hello", "im", "winterlood"];

// 정의하는 법 두번째
let boolArr: Array<boolean> = [true, false, true] // <, > 사용 -> 제네릭 문법

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

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

 

튜플

- 튜플 또한 결국 배열에 속함

- 컴파일 된 js 파일에는 그냥 일반적인 배열로 변환됨

// 튜플
// 길이와 타입이 고정된 배열
let tup1: [number, number] = [1, 2];

let tup2: [number, string, boolean] = [1, "2", true];

tup1.push(1); // -> 튜플은 결국 자바스크립트의 배열과 같기 때문에 오류 X
tup1.pop()

인덱스의 위치에 따라 값을 넣어야 할 때, 아래처럼 타입 선언 가능

const users: [string, number][] = [
    ["이정환", 1],
    ["이아무개", 2],
    ["박아무개", 3],
    [4, "최아무개"], // 오류 발생
]

 

객체

아래처럼 단순하게 object로 하면 객체 안의 값을 알 수 없음(명목적 타입 시스템)

let user1: object = { // user 값이 객체라는 정보 밖에 없음(내용은 모름)
    id: 1,
    name: '이정환'
};

user1.id; // 'object' 타입에 'id' 속성이 없다는 오류 발생

 

따라서, 객체 리터럴 타입을 사용해야 함

let user2: { // 객체 리터럴 타입
    id: number;
    name: string;
} = {
    id: 1,
    name: '이정환'
}

user2.id;

-> id와 name이 있어야 user2 객체 = 객체의 구조를 기준으로 타입을 정의함

-> 구조적 타입 시스템 Property Based Type System <-> 명목적 타입 시스템

 

선택적 프로퍼티 optional property

선택적 값에 ?를 추가

let user2: { // 객체 리터럴 타입
    id?: number;
    name: string;
} = {
    id: 1,
    name: '이정환'
}

user2 = {
    name: "홍길동",
}

 

읽기 전용 프로퍼티 readonly property

readonly 추가

let config: {
    readonly apiKey: string; // 값이 수정되면 안됨
} = {
    apiKey: "MY API KEY",
};

config.apiKey = "hacked"; // 오류 발생

 

타입 별칭

타입의 선언이 중복되는 것을 막기 위해 타입을 변수처럼 선언하여 사용

// 타입 별칭

type User = { // User는 중복되면 안됨
    id: number;
    name: string;
    nickname: string;
    birth: string;
    bio: string;
    location: string;
};

let user: User = {
    id: 1,
    name: '이정환',
    nickname: 'winterlood',
    birth: '1997.01.07',
    bio: '안녕하세요',
    location: '부천시'
};

let user2: User = { // user과 중복되는 선언해줄 필요 X
    id: 2,
    name: '홍길동',
    nickname: 'winterlood',
    birth: '1997.01.07',
    bio: '안녕하세요',
    location: '부천시'
};

function func() { // 이 함수 내에선 User이라는 타입을 새로 선언하여 해당 타입 사용 가능
    type User = {};
};

 

인덱스 시그니처

규칙을 이용하여 타입을 정의하는 방식

// 인덱스 시그니처
type CountryCodes = {
    [key: string]: string
};

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

단, 이때 내용이 비어도 오류가 발생하지 않으니 주의해야 함

type CountryNumberCodes = {
    [key: string]: number;
};

let countryNumberCodes: CountryNumberCodes = {
};

만약 Korea라는 특정 변수만 따로 선언하고 싶을 땐 아래처럼 선언 가능

type CountryNumberCodes = {
    [key: string]: number;
    Korea: number;
};

let countryNumberAndStringCodes: CountryNumberCodes = {
    Korea: 410,
    UnitedState: 840,
    UnitedKingdom: 826
};

단, 이때 Korea: string -> value에 선언한 number와 일치하거나 호환되어야 함

type CountryNumberCodes = {
    [key: string]: number;
    Korea: string; // value에 선언한 number과 일치하지 않아 오류 발생
};

let countryNumberAndStringCodes: CountryNumberCodes = {
    Korea: 'ko',
    UnitedState: 840,
    UnitedKingdom: 826
};

 

열거형 타입 Enum

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

js에는 없음

컴파일해도 사라지지 않음 = 값처럼 사용 가능

ex. 권한을 설정할 때, 값이 헷갈리지 않도록 네이밍을 하여 사용하고 싶은 경우

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

enum Role { // 권한 설정
    ADMIN = 0,
    USER = 1,
    GUEST = 2,
};

const user1 = {
    name: '이정환',
    role: 0 // 0 <- 관리자
};

const user2 = {
    name: '홍길동',
    role: Role.USER // 1 <- 일반 유저
};

const user3 = {
    name: '아무개',
    role: 2 // 2 <- 게스트
};

아래처럼 맨 위 값에만 값 선언 시, 자동으로 아래로 갈수록 +1이 됨

enum Role { // 권한 설정
    ADMIN = 10,
    USER,
    GUEST,
};

 

ts 파일

enum Role { // 권한 설정
    ADMIN,
    USER,
    GUEST,
};

enum Language {
    korean = 'ko',
    english = 'eng',
}

컴파일 결과

var Role;
(function (Role) {
    Role[Role["ADMIN"] = 0] = "ADMIN";
    Role[Role["USER"] = 1] = "USER";
    Role[Role["GUEST"] = 2] = "GUEST";
})(Role || (Role = {}));
;
var Language;
(function (Language) {
    Language["korean"] = "ko";
    Language["english"] = "eng";
})(Language || (Language = {}));

 

Any 타입

특정 변수의 타입을 우리가 확실히 모를 때 사용

모든 값을 할당 받을 수 있고, 모든 값에 할당될 수 있음

-> Runtime Error를 일으키기 쉬움! 따라서 최대한 사용하지 않는 걸 추천

// any

let anyVar: any = 10;
anyVar = 'hello';

anyVar = true;
anyVar = {};
anyVar = () => {};

anyVar.toUpperCase(); // 이전 코드에서 함수가 선언되어 에러 발생
anyVar.toFixed();

let num: number = 10;
num = anyVar;

 

Unknown 타입

any처럼 모든 값을 저장할 순 있으나 모든 타입의 변수에 할당될 수 없음

연산도 안됨(unknown이니까)

any보다 unknown을 사용하는 것을 추천

// unknown
let unknownVar: unknown;

unknownVar = "";
unknownVar = 1;
unknownVar = () => {};

타입 정제

type에 대한 조건을 거는 방식

if (typeof unknownVar === 'number') { // 타입 정제
    num = unknownVar;
}

 

Void

아무것도 없음을 의미하는 타입

주로 함수의 반환값이 없을 때 사용

질문 : 함수에 undifined나 null을 선언하는 걸로 쓰면 void 굳이 안써도 되지 않을까요?

-> 그럴 땐 undefined나 null을 return 해줘야 함

// void = 공허 = 아무것도 없음

function func1(): string {
    return 'hello';
};

function func2(): void {
    console.log('hello'); // 반환값 없음
}

let a: void;
a = undefined // number, string 등 모두 안됨, 오직 undefined만 가능
// 단, strictNullChecks: true 시 null도 가능

 

Never

존재하지 않는, 불가능한 타입

함수의 정상적인 종료가 되지 않아 반환값의 존재가 모순일 때 사용함

변수의 타입을 never로 선언 시에는 어떠한 값도 담을 수 없음

// never

function func3(): never { // 정상적인 종료가 되지 않아 반환값의 존재가 모순일 때
    while (true) {}
};

function func4(): never { // error 발생하여 정상적인 종료 불가능
    throw new Error();
}

let b: never; // 아무 값도 담을 수 없음
// strictNullChecks도 안됨
// any 타입의 값도 안됨