타입스크립트 기본(원시타입, 비원시타입, 리터럴 타입)

타입 스크립트는 어떻게 실행될까?

정리하자면 타입스크립트는 컴파일 결과 타입검사를 거쳐 자바스크립트 코드로 변환되는데, 이때 만약 코드에 오류가 있다면
컴파일 도중 실패하게 되므로 자바스크립트를 보다 더 안전하게 사용하는 미리 한번 코드를 검사하는 용도로 사용된다고 볼 수 있겠습니다~

기본타입

기본타입이란 타입스크립트가 자체적으로 제공하는 타입들을 말합니다. (내장타입)
다음 그림은 타입스크립트가 제공하는 기본 타입들을 계층에 따라 분류한 "타입계층도" 그림입니다

그림을 자세히 보면 null, undefined,number,string 처럼 우리가 흔히 알고 있는 타입들도 존재하고
그 외의 any,void,never 같은 처음보는 타입도 존재합니다. 그리고 이런 타입들은 서로 부모, 자식 관계를 이루면서 계층을 형성하는데, 이후에 다루겠습니다



크게 타입스크립트의 타입을 원시타입, 비원시타입, 리터럴타입, 3가지로 나누어 설명해보겠습니다

원시타입 ( 숫자, 문자, 불린)

원시타입은 동시에 한 개의 값만 저장할 수 있는 타입입니다
예를 들어 비원시타입인 배열이나 객체는 동시에 여러개의 값들을 저장할 수 있지만, number, string, boolean 등 
원시 타입은 숫자면 숫자, 문자열이면 문자열 딱 하나의 값만 저장할 수 있습니다

// 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 ${str1}`;

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

//null 타입 
let null1: null = null;

//undefined 타입
let unde1: undefined = undefined;

• 만약 null을 임시값으로 사용하고 싶다면?
  ts.config.json의 strictNullChecks(엄격한 null검사) 옵션을 false로 설정하면 됨
  
  
  
  
  
  

비원시타입(배열, 튜플, 객체)

먼저 배열타입입니다

let numArr: number[] = [1,2,3]
let strArr: string[] = ["hello","im","winter"]

: 배열요소타입[]을 추가해주면 됩니다.

let boolArr:Array<boolean> = [true, false, true];

다른 방법으로는 :Array<배열요소타입> 형태로도 배열의 타입을 정의할 수 있습니다.
참고로 <> 이렇게 정의하는 문법을 타입스크립트에서는 '제네릭'이라고 한다더군요.

• 다양한 타입 요소를 갖는 배열 타입 정의하기

let multiArr:(number | string)[] = [1, "hello"];

이런 경우에는 ()에 | 바를 이용해서 배열 요소가 둘중에 하나다 알려주면 됩니다
이렇듯 | 바를 이용해서 여러 타입 중 하나를 만족하는 타입을 정의하는 방법을 유니온 타입이라고 합니다

• 다차원 배열 타입 정의하기

다음과 같이 []를 연달아 작성해 다차원 배열 타입도 간단하게 정의할 수 있습니다

let doubleArr : number[][] = [
[1,2,3],
[4,5],
]

 

다음으로 튜플타입입니다.
튜플은 자바스크립트에 없는 타입스크립트만의 특수한 타입입니다.

듀플타입은 고정된 길이를 갖는 배열 타입을 정의합니다.

let tup1: [number,number] = [1,2];

다음은 길이가 2로 고정된 2개의 number 타입 요소를 갖는 튜플(배열) 타입입니다

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

하지만, 튜플도 결국 배열입니다
push(), pop() 등 배열 메서드를 사용해서 고정된 길이를 무시하고 요소를 추가하거나 삭제할 수 있습니다
그래서 튜플을 사용할때는 배열메서드 연산을 각별하게 주의해야 합니다

let tup1: [number, number] = [1, 2];

tup1.push(1);
tup1.push(1);
tup1.push(1);
tup1.push(1);

• 튜플은 왜 쓸까?
  '자리잡기'잘할려고!

const users = [
  ["이정환", 1],
  ["이아무개", 2],
  ["김아무개", 3],
  ["박아무개", 4],
  [5, "조아무개"], // <- 새로 추가함
];

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

 

마지막으로 객체타입 입니다
타입스크립트에서는 2가지 방식으로 객체의 타입을 정의합니다

<object 로 정의하기>

let user: object = {
  id: 1,
  name: "이정환",
};

user.id;// => object 형식에 id 속성이 없습니다 라고 오류가 뜸

왜 오류가 뜰까? object 타입은 단순 값이 객체임을 표현하는 것 외에 아무런 정보도
제공하지 않는 타입이기 때문입니다.

이럴때는 object 가 아닌 객체 리터럴 타입을 이용해야 합니다



<객체 리터럴 타입>
리터럴은 값입니다.
그래서 객체 리터럴 타입은 다음과 같이 중괄호를 열고 객체가 갖는 프로퍼티를 직접 나열해 만드는 타입입니다

여기서 알 수 있는 사실은 타입스크립트는 기존의 정적 타입 시스템을 따르는 언어인 C와 Java와는 달리
객체의 타입을 정의할 때 프로퍼티를 기준으로 객체의 구조를 정의하듯이 타입을 정의한다
(구조적 타입 시스템)

let user:{
    id?:number; // ? 가 붙는 프로퍼티, 선택적 프로퍼티
    name:string;
} = {
    name:"이정환",
};

• 선택적 프로퍼티(id?)
  
  ? 가 붙는 프로퍼티, 선택적 프로퍼티로 id 가 있다면 number를,
  없으면 없는대로 괜찮다
  
  
• 읽기전용 프로퍼티(Readonly Property)
  
  name 프로퍼티는 이제 읽기 전용 프로퍼티가 되었기 때문에 마지막 라인처럼 프로퍼티를 수정하려고 하면 오류가 발생함

let user:{
    id?:number; // ? 가 붙는 프로퍼티, 선택적 프로퍼티
    readonly name:string; //name은 이제 readonly 프로퍼티가 되었음
} = {
    name:"이정환",
};

user.name = "sdsad" ;// 오류발생

리터럴(값) 타입

let numA: 10 = 10;

타입스크립트에서 리터럴 타입은 변수에 정확한 값을 설정하는 것을 말합니다
변수 numA 의 타입을 숫자 10으로 설정했습니다. 이렇게 하면 numA에 10 이외에는 다른 값을 저장할 수 없게 됩니다

숫자 뿐만 아니라 문자열이나 불리언 타입의 값도 모두 리터럴 타입으로 만들 수 있습니다

let strA:"hello" = "hello";
let boolA: true = true;
let boolB: false = false;