TypeScript : basic types

🧐 실무에서 자주 사용하는 타입 바로 알기 (1/3)

타입스크립트에는 굉장히 많은 타입들이 존재하고 실제로는 자주 사용되지 않는 타입들도 많이 존재합니다.
아래는 많은 개발자들이 실무에서 사용하면서 간혹 혹은 자주 사용하는 타입들 중 기본 타입들입니다.

---

표로 정리한 기본 타입

몇 가지를 제외하면 자바스크립트에서도 자주 사용하는 타입들이기 때문에 낯설지 않아 쉽게 사용할 수 있습니다 :)

Basic Types
type	desc.
Number	부동 소수 값을 데이터로 갖는 타입
Boolean	참/거짓(true/false) 값을 데이터로 갖는 타입
String	텍스트 데이터 타입
Any	타입 검사를 하지 않고, 그 값들이 컴파일 시간에 검사를 통과하길 원할 때 사용하는 타입 (권장 X)
Object	원시 타입이 아닌 타입
Array	값을 배열로 사용할 수 있게 해주는 타입
Unknown	아직 어떤 타입이 들어올지 모를 경우, 다양한 타입을 집어넣어야할 경우 사용하는 타입
Union	OR(||) 연산자와 비슷한 의미를 가지며 지정된 타입의 값만 사용 가능
Conditional	조건부 타입, 타입 관계 검사로 표현된 조건에 따라 두 가지 가능한 타입 중 하나를 선택
Type Alias	새로운 타입을 정의, interface로 표현할 수 없거나 유니온 또는 튜플을 사용해야할 때 사용
Interface ⭐️	함수의 param에 객체의 속성 타입을 정의 할 수 있습니다. 상속을 통해 확장이 필요할 때 사용

🔍 예시로 더 자세히 살펴보는 기본 타입

Number

부동 소수 값을 데이터로 갖는 타입입니다.

function addNumber(num1: number, num2: number) {
  return num1 + num2;
}
addNumber(5, 10);  // 15

Boolean

참/거짓(true/false) 값을 데이터로 갖는 타입입니다.

let isLogin: boolean = false;

if (isLogin) {
    console.log('어서오세요! 오늘도 찾아주셔서 감사합니다 :)');
} else {
    console.log('가입된 정보가 없습니다, 회원가입 하시겠습니까?');
}

String

텍스트 데이터 타입입니다.

function addString(str1: string, str2: string):string {
  return str1 + str2;
}
addString("안녕", "하세요");
addString("hello", "world");

function welcomeMessage(name: string): string {
    return `${name}님 오늘도 1commit 해봐요!`;
}

console.log(welcome('Mobi'));

Any

타입 검사를 하지 않고, 그 값들이 컴파일 시간에 검사를 통과하길 원할 때 사용합니다.
any 타입의 사용은 타입스크립트의 의미를 퇴색되게 하는 존재로 권장하지 않습니다.

let isLoggedIn: any = "뭐가 오든 오류 안 남";

Object

원시 타입이 아닌 타입에 사용합니다.
원시 타입 👉 number, string, boolean, bigint, symbol, null, 또는 undefined

const userInfo: object = { id: "user-01", password: "12345" };

Array

값을 배열로 사용할 수 있게 해주는 타입입니다.

type Mobi = {
    userName: string,
  	gender: string,
  	term: number,
  	isOperator: boolean,
};

// 06-1. 배열 요소들을 나타내는 타입 뒤에 []

let members: Mobi[] = [
	{
    	userName: 'Kei',
      	gender: female,
  		term: 0,
  		isOperator: true,
    },
	{
    	userName: 'Jane',
      	gender: female,
  		term: 1,
  		isOperator: true,
    },
  	{
    	userName: 'Heeppy',
      	gender: female,
  		term: 1,
  		isOperator: true,
    },

];

// 06-2. 제네릭 배열 타입 (Array<elementType>)

let members: Array<Mobi> = [
  	{
    	userName: 'Jack',
      	gender: male,
  		term: 2,
  		isOperator: false,
    },
	{
    	userName: 'Levi',
      	gender: male,
  		term: 2,
  		isOperator: false,
    },
  	{
    	userName: 'Noel',
      	gender: male,
  		term: 2,
  		isOperator: false,
    },
];

Unknown

아직 어떤 타입이 들어올지 모를 경우, 다양한 타입을 집어넣어야할 경우 사용합니다.
unknown 타입엔 모든 자료 다 집어넣을 수 있으며 자료를 넣어도 타입은 그대로 unknown이 유지됩니다.
any와 다른 점은 unknown 타입에는 아무것도 할 수 없다는 것입니다.
any는 어떤 타입이 오든 가능하다, unknown은 어떤 타입이 올지 모르겠다의 뉘앙스입니다.

let userID: unknown;

userID = true;  // boolean 값 가능
userID = 123;	// number 값 가능
userID = "hello";  // string 값 가능

" 왜 any는 권장하지 않는데 unknown은 별다른 말이 없나요? "

any는 모든 타입과 연산을 허용하지만, unknown은 타입이 뭔지 모르기 때문에 아무런 연산도 수행하지 못합니다.
unknown은 any에 비해 안정적인 타입으로 생각할 수 있으며 unknown으로 연산을 수행하려면 명시적으로 타입을 확인해야 합니다.

Union

OR(||) 연산자와 비슷한 의미를 가지며 지정된 타입의 값만 사용 가능합니다.

let age: string | number;
age = 20;
age = "Twenty";

function loginData(nickName: string, pw: string | number) {
  // code ...
  console.log(nickName, pw);
  alert(`${nickName}님, 어서오세요!`);
}
loginData("Jack", "1234");
loginData("Levi", 4567);

type UXDesigner = {
    nickName: string,
    tool: string,
  	type: 'UX'
};
type UIDesigner = {
    nickName: string,
    tool: string,
  	type: 'UI'
};
type FEDeveloper = {
    nickName: string,
    language: string,
  	type: 'FE'
};
type BEDeveloper = {
    nickName: string,
    language: string,
  	type: 'BE'
};

function ClassifyOccupation(sb: UXDesigner | BEDeveloper) {
    if ('language' in sb) {
        // sb TDesigner 라는 뜻
        alert(`${sb}님은 개발자 종사자입니다.`)
    }else{
      alert(`${sb}님은 디자이너 종사자입니다.`)
    }
} 

// typeof는 원시값만 검사 가능
function ClassifyDeveloper(sb: FEDeveloper | BEDeveloper) {
  if (sb.type === "FE") {
      alert(`${sb}님은 Frontend 개발자 입니다.`)
  }else{
    alert(`${sb}님은 Backend 개발자 입니다.`)
  }
} 

Conditional

조건부 타입, 타입 관계 검사로 표현된 조건에 따라 두 가지 가능한 타입 중 하나를 선택합니다.
자바스크립트에서 삼항연산자 같은 역할입니다.

T extends U ? X : Y 👉 (T가 U에 할당 가능한지에 따라서 X와 Y중 하나의 타입을 선택)

type IsString<T> = T extends string ? "yes" : "no";
type sample1 = IsString<"가나다라">; // yes
type sample2 = IsString<1234>; //no
type sample3 = IsString<true>; //no

// 'T'와 'U'가 같은 타입이면 'Yes' 타입을, 다른 타입이면 'No' 타입을 반환
type IsSameType<T, U> = T extends U ? (U extends T ? "Yes" : "No") : "No";
type Result1 = IsSameType<string, string>; // 'Yes'
type Result2 = IsSameType<string, number>; // 'No'
type Result3 = IsSameType<"a" | "b", string>; // 'No'

// conditional type으로 formatted-date 만들기
type DateFormat = 'YYYY-MM-DD' | 'MM/DD' | 'HH:mm';

type GetElements<T> = T extends 'Y' 
	? 'year' 
	: T extends 'M' 
	? 'month' 
	: T extends 'D'
	? 'date'
	: T extends 'H'
	? 'hour'
	: T extends 'm'
	? 'minute'
	: never;

type SplitDateReturn <Format extends DateFormat> = Format extends `${infer C}${infer Rest}`
	? { [E in GetElements<C> | keyof SplitDateReturn<Rest>]: number }

declare function splitDate<Format extends DateFormat>(date: Date, format: Format):SplitDateReturn<Format>;

splitDate(newDate(), 'YYYY-MM-DD')  // {year: number, month: number, date: number}
splitDate(newDate(), 'MM/DD') // {month: number, date: number}
splitDate(newDate(), 'HH:mm') // {hour: number, minute: number}

Type Alias

새로운 타입을 정의하는 것으로 interface와 유사한 특징을 갖고 있습니다.
interface로 표현할 수 없거나 유니온 또는 튜플을 사용해야할 때 type alias를 사용합니다.
원시 타입에 별칭을 정하는 것은 권장하지 않는 사항입니다.

// 원시 타입에 별칭을 정하는 것은 권장 X
type Name = string;
type Age = number;

const mobi: Name = "Peanut";
const age: Age = 20;

// 객체에 별칭주기
type MobiMember = {
  name: string;
  nickName: string;
  term: number;
  isOperator: boolean;
};

const Amy:MobiMember = {
  name: "오주연",
  nickName: "Amy",
  term: 2,
  isOperator: true,
};

Interface ⭐️

함수의 param에 객체의 속성 타입을 정의 할 수 있습니다. 상속을 통해 확장이 필요할 때 사용합니다.

interface Peanut {
  name: string;
  nickName: string;
  age: number;
  isDirector: boolean;
}

function printName(person: Peanut) {
  console.log(person.name); // "김성용"
  console.log(person.nickName); // "Peanut"
  console.log(person.age); // 20
  console.log(person.isDirector); // true
}

interface Developer {
  isMobi: boolean;
  nickName: string;
}

//인터페이스 확장
interface whichDev extends Developer {
  sort: string;
}

const Zero: Developer = {
  isMobi: true;
  nickName: 'Zero';
};

const Zoey: Developer = {
  isMobi: true;
  nickName: 'Zoey';
};

const Peanut: whichDev = {
  isMobi: true;
  nickName: 'Peanut';
  sort: 'Full';
};

const Rin: whichDev = {
  isMobi: true;
  nickName: 'Rin';
  sort: 'FE';
};

아래와 같이 key가 string인 경우에 한에 모든 속성들을 다 허용할 수도 있습니다.
인덱스 시그니처는 모든 속성들을 다 정의할 수 없을 떄 유용하게 쓰일 수 있습니다.

interface MobiInfo {
  userName: string,
  nickName: string,
  name: string,
  term: number,
  isOperator: boolean,
  [key: string]: any; // index signiture
}

const  Peter: MobiInfo = {
  userName: 'Peter',
  nickName: 'Peanut',
  name: '김성용',
  term: 0,
  isOperator: true,
  isDirector: true, // index signiture
  hobby: 'coding', // index signiture
  MBTI: 'ENTP', // index signiture
}

const  Daniel: MobiInfo = {
  userName: 'Daniel',
  nickName: '다녤',
  name: '이대경',
  term: 2,
  isOperator: false,
  hobby: 'soccer', // index signiture
  MBTI: 'ENTJ', // index signiture
}

const  Kimi: MobiInfo = {
  userName: 'Kimi',
  nickName: '퀴미,
  name: '김가영',
  term: 2,
  isOperator: false,
}

---

언제 타입을 써야할까?

타입을 주어야하는 경우와 주지 않아도 되는 경우를 구분하기

⬇️ javascript

let seongyong = {
  age: 20,
  height: 190,
};

function log(obj) {
  console.log(obj.height);
  return obj;
}

const a = log(seongyong);
console.log(a.age);

⬇️ typescript

interface Person = {
  age: number,
  height: number,
};

let seongyong:Person = {
    age: 20,
    height: 190
}

매개변수의 타입과 리턴 값의 타입이 동일할 경우 👉 TS 선택

function log(obj: Person) {
  console.log(obj.height);
  return obj;
}

리턴 값의 타입을 매개변수의 타입만으로는 추론이 안 되는 경우 👉 TS 필수
ex. 타입 합성

interface Movvi = {
    nickname: string,
    isDirector: boolean,
}


function log(obj: Person):Person & Movvi{
    return {...obj, nickname : 'Peanut', isDirector: true}
}

타입이 추론이 충분히 가능할 경우(매개변수와 리턴 값의 타입이 동일한 경우) 타입을 주는 것은 개발자마다 생각이 다를 것입니다.
타입을 부여하게 되면 부득이하게 코드의 길이가 길어져 가독성이 떨어진다 생각될 수도 있고
언어 서비스를 충분히 지원받을 수 있기 때문에 굳이 쓰지 않아도 된다 생각할 수 있습니다.

반대로 코드의 컨벤션이나 협업을 위해 추론이 가능한 경우에도 타입을 주는 것을 선호할 수도 있습니다.
협업하는 개발자가 어떤 성향이냐에 따라 프로젝트의 크기에 따라 달라질 수도 있습니다.

현재 저는 타입스크립트를 배운지 일주일 정도 밖에 되지 않았기 때문에 타입을 주는 것이 낫다고 생각합니다.
런타임에 타입이 정제된다는 점을 생각해봤을 때 아직은 최대한 상세히 주는 것이 오류를 최소화할 뿐만 아니라
타입 사용에 익숙해지는 길이라고 생각됩니다.
따라서 타입의 생략은 타입스크립트를 공부하고 손에 많이 익었다고 생각될 때 하는 것이 좋을 것 같습니다 :)

---

References
https://frontj.com/entry/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%83%80%EC%9E%85-%EC%A0%95%EB%B3%B5-Conditional-Types