[타입스크립트] 타입 종류✨

📕 boolean

- true/false 값

 

📕Number

- 숫자 값

 

📕 String

- 문자 값

 

📕Array

- 배열 타입

- 방법1 ) 배열 요소들을 나타내는 타입 뒤에 [] 불이기 (string[])

- 방법2 ) Array<> 배열 타입 쓰기(Array<string>)

 

 

📕 Tuple

- 배열의 서브타입

- 크기와 타입이 고정된 배열

- 예를 들어, RGB 색상을 표현하기 위해 사용할 수도

let rgbColor: [number, number, number] = [255, 255, 0];

 

- 단 push(), splice() 등의 값을 넣는 행동 가능 (컴파일러의 멍청함이라고 치부하면 됨)

 

 

 

📕 Enum

- 특정 값을 고정하는 또다른 독립된 자료형

 

enum Avengers { SpiderMan, IronMan, Thor, Hulk }

let hero: Avengers = Avengers.SpiderMan; //0

-> 가능

enum Avengers { SpiderMan, IronMan, Thor, Hulk } 

let hero: Avengers = Avengers[0];

-> 인덱스 번호로 접근 불가능

 

enum Avengers = {SpiderMan = 2, IronMan, Thor, Hulk}

let hero: Avengers = Avengers[2]; //SpiderMan
let hero: Avengers = Avengers[5]; //Hulk

- 원한다면 이런 식으로 이넘의 인덱스를 사용자 평의로 변경 가능

- SpiderMan이 시스템상 2이면, 그 다음은 3, 그다음은 4 이런식으로 내부적으로 인덱싱을 정함

 

 

📕 Object

- 객체 뿐만 아니라 배열, 함수까지 모두 object로 포함

- 기본적으로 typeof 연산자가 "object"로 반환하는 모든 타입을 뜻함

let obj: object = {}; //객체 가능
let arr: object = []; //배열 가능
let func: object = function() {}; //함수 가능
let null: object = null; //null 가능
let date: object = new Date(); //생성자 가능

- 이렇게 되면 애로 사항이 많아짐

 

const player: object = {name: 'nico'};
player.name; //Error

- 객체의 타입을 지정하고 싶으면 객체 속성들에 대한 타입을 개별적으로 지정해서 사용하면 됨

 

const uerA: {name: string, age: number}
userA = {
  name: 'heropy',
  age: 123
}

- 하지만 이게 타입인지 객체인지 가독성이 떨이짐

- 이를 극복하기 위해 type, interface가 추가됨

 

---

 

✨type

type IUser = {
    name: string,
    age: number
}

 

 

✨interface 

interface IUser {
  name: string,
  age: number
}

 

 

---

 

📕 Any

- 어떤 타입이든 허용한다

- 우리가 쓰는 자바스크립트에서는 모든 변수의 타입이 모두 any라 해도 무방

- any를 쓰는 이유는 애플리케이션을 만들때 알지 못하는 타입을 표현할 때 사용

 

강한 타입 시스템의 장점을 유지하기 위해서 Any 사용을 엄격히 금지하려면, tsconfig에 컴파일 옵션에 'noimplicitAny: true'를 통해 Any 사용 시 에러를 발생시킬 수 있음

 

 

📕 Unknown

- any와 거의 같은 의미

- 알수없는 타입

- any와 같이 모든 데이터 타입을 받을 수 있음

 

 

---

📌 그렇다면 any와 unknown을 왜 구분했을까?
1. any는 어떤 것이든지 타입을 허용한다의 의미
2. unknown은 알 수 없다, 모른다의 의미
즉, '엄격함'의 차이

 

 

- 예를 들어 any 타입같은 경우 number 타입의 데이터를 넣고 string 타입의 메소드 length를 사용했을 때 어떤 에러를 발생시키지 않고 그냥 undefined를 반환한다.

let value: any = 10;
console.log(value.length); //undefined

 

 

하지만 unknown 타입은 any 타입과 같이 모든 값을 허용하지만, 어떤 타입인지 모르기 때문에 함부로 연산을 할 수 없다는 특징을 가지고있음.

let value: unknown = 10;
let string: unknown = 'Test';

console.log(value.length); //문제 발생
console.log(string.value); //문제 발생

-> 즉, 미리 에디터에서 사전 에러를 띄워줌

 

 

이런 경우 typeof 연산자를 통해 타입을 검사해서 해결할 수 있음

let valueNum: unknown =10;

if(typeof valueNum === "number") {
  console.log(valueNum.length);
}

- 이런 식으로 unknown 타입을 사용하면 체크해야 하는 코드가 발생하지만, 사전에 문제가 되는 부분을 방지할 수 있기 때문에 any 타입에 비해 안정적인 애플리케이션을 개발할 수 있음

 

 

 

---

 

📕 null / undefined

- null과 undefined는 다른 모든 타입의 하위 타입으로 치부됨

- 즉, null, undefined를 아무 여러 타입에 할당할 수 있다는 의미

 

 

 

 

📕 never

- number나 string 처럼 어떤 자료형 값을 담기 위한 타입이 아님

- 타입스크립트에서 잘못된 것을 알려주기 위한 키워드로써, 절대 발생할 수 없는 타입을 나타냄

- 항상 오류를 발생시키거나 절대 반환하지 않는 반환 타입으로도 쓰임

 

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

- 함수는 리턴되지 않고 에러를 throw(던짐)함

 

function gerError():never {
  throw new Error('Error');
}

let never_type: never;

never_type = 99; //오류 발생

never_type = getError() //함수 반환 값이 never 타입이기 때문에 오류가 발생하지 않음

 

 

 

📕 void

- 어떤 타입도 존재할 수 없음을 나타냄

- any의 반대타입

- void는 보통 함수에서 반환값이 없을 때 반환 타입을 표현하기 위해 쓰임

 

function hello(n: number): void {
  let sum: number = n + 1;
}

const hi: void = hello(1); //값을 반환하지 않는 함수여서 undefined으로 반환
console.log(hi) //undefined

 

 

 

- 만일 void를 함수가 아닌 변수 타입으로 지정하면, void 타입 변수에는 undefined, null 가능

- 즉, void를 타입 변수를 선언하는 것은 유용하지 않다고 보면 됨

let unusable: void = undefined;
unusable =null; //가능

 

 

 

 

📕 Literal

- 문자열과 숫자에 한해서 직접 값 자체를 타입으로도 선언이 가능

 

 

 

---

✨숫자 리터럴 타입

const num = 3;

- 여기는 정수 값이 들어가 있으니 당연히 number라고 생각하겠지만, 실제로는 타입 3이라는 게 들어가 있음

 

const arr = [1, 3];

- 타입스크립트의 타입은 자료형 뿐만 아니라 값 자체(숫자와 문자 한정)를 타입으로 지정할 수 있음

- 이는 타입은 왠만하면 아주 정확하게 명시하는 것이 타입스크립트의 근본이라 생각하기 때문

- 왜냐하면 유기적으로 생각해보면, const  상수는 한번 초기화되면 값이 바뀔 일이 없기 때문

 

 

 

✨문자열 리터럴 타입

type Easing = 'ease-in' | 'ease-out' | 'ease-in-out';

function animate(dx: number, dy: number, easing: Easing) {
   if (easing === 'ease-in') {
      // ...
   } else if (easing === 'ease-out') {
   } else if (easing === 'ease-in-out') {
   } else {
      // null이나 undefined를 전달하면 필터링 실행
   }
}

animate(0, 0, 'ease-in');
animate(0, 0, 'uneasy'); // 오류: "uneasy"는 여기서 허용하지 않습니다

 

 

 

 

📕 Union

- 2개 이상의 타입을 허용하는 경우

let union: string | number;

 

 

✨ 주의해야 할 점

type Person = {
  name: string;
  age: number;
}

type Developer = {
  name: string;
  skill: string;
}

function introduce(someone: Person | Developer) {
  someone.name; // O 정상 동작
  someone.age; // X 타입 오류
  someone.skill; // X 타입 오류
}

- tsc는 어느 타입이 모든 오류가 안 나는 방향으로 확실하게 타입을 추론하는 특성이 있음

- 결과적으로, Person과 Developer 두 타입에 공통적으로 들어있는 속성인 name으로만 접근 가능

 

 

 

- 더 응용하자면, 함수에서도 리턴 값을 유니온으로 사용하게 되면 에러를 내뿜음

- 모든 경우의 수를 고려해 x와 y 매개변수에 number가 들어오냐 string이 들어오냐에 따라 리턴 값이 달라지니 유니온을 명시했지만, 컴파일러 입장에서는 옳지 않음

function add(x: string | number, y: string | number): string | number {
   return x + y; //'+' 연산자를 'string | number' 형식에 적용할 수 없습니다.
}

- 왜냐하면 컴파일러 입장에서는 result 변수가 string인지 number인지 확신이 안되니 문자열 메소드인 chartAt() 실행에 대해서 경고를 해주는 것

 

 

 

📕 Intersection

- &(ampersand)를 사용해 2개 이상의 타입을 조합하는 경우, 인터섹션이라고 함

- 그리고(And)와 같은거라고 보면 됨

- 새로운 타입을 생성하지 않고 기존의 타입을 조합할 수 있기 때문에 유용하지만 자주 사용되는 방법은 아님

 

type Person = {
   name: string;
   age: number;
};
type Developer = {
   name: string;
   skill: number;
};

const neo: Person & Developer = {
   name: 'Neo',
   age: 85,
   skill: 11,
};

 

 

 

 

📕 Type Alias

- 타입 별칭

- 사용자가 정의하는 타입 변수

type Name = string;
type Age = number;

let name: Name = 'Tom';
let age: Age = 20;

 

 

📕 interface

저번에 공부한 내용이 있어 패쓰 나중에 블로깅

 

 

📕 Generic

- 제네릭은 타입을 변수화하였다고 생각하면 됨

- 타입을 마치 함수 파라미터처럼 나중에 대입하도록 하여 재사용성을 높이기 위해 탄생한 타입이 제네릭 타입이라고 이해하면 됨

- <T> 꺾쇠 괄호 기호를 이용함

 

type IsArray<T> = T[];

const numberArr: IsArray<number> = [1, 2, 3, 4, 5];
const stringArr: IsArray<string> = ['a', 'b']
const mixArr: IsArray<string | number> = ['a', 1]

 

 

function getText<T>(test: T): T [
  return text;
}

getText<string>('hi'); //hi
getText<number>(10); //10
getText<boolean>(true); //true

 

 

 

참고자료