[TS] Chapter 2. Typescript 기초 & 기본 자료형_Core types

변진상·2023년 5월 24일
0

Typescript 학습

목록 보기
3/13

Chapter2 목표: TS의 기초와 Core Types에 대해 학습한다.

- JS와 TS의 큰 차이점

JS는 동적타입(dynamic types) vs TS는 정적타입(static types)

  • Core Types
  1. number(실수형, 정수형를 구분하지 않음)
  2. string(',",`)
  3. boolean(true, false)
  4. object
  5. Array
  6. Tuple
  7. Enum
  8. Any

- 기본 문법

자료형을 명시할 경우 Colon(:)을 이용한다.

// nuber type
funtion sum(num1: number, num2: number){
  return num1 + num2;
}

- 타입 선언(Type Assignment)

변수, 패러미터의 자료형을 명시해주는 것.

// parameter
function func(para1: number){...}

let variable: string;
                             
variable = 'string...';

- 타입 추론(Type Inference)

변수 초기화시 데이터의 타입에 따라 TS에서 자동으로 변수의 type을 추론하는 것.(타입 추론 이후 다른 타입의 데이터가 할당될 경우 에러를 표시한다.)

let num = 5.0; 
// num의 타입을 선언하지 않아도 TS가 자동으로 num에 초기화되는 데이터의 타입을 number로 추론한다.

let num1: number = 5.11; 
// 이렇게 변수 초기화가 이뤄지는 경우에는 타입 선언을 하지 않는 것이 좀 더 깔끔한 코드라고 할 수 있다. 
// TS에 타입 추론 기능이 있기 때문에 불필요하게 중복적으로 자료형을 표기해주는 것을 피하는 것이 좋다.

- 변수 선언, 할당, 초기화

// 변수 선언
let a;

// 변수 할당
a = 10;

// 변수 초기화
let b = 20;

- 객체와 중첩객체 생성

// 중첩 객체


const animal: {
  num: number;
  type: string[];
  recorded: { name: string; age: number };
} = {
  num: 2,
  type: ["포유류", "갑각류"],
  recorded: {
    name: "수달",
    age: 11,
  },
};

  

- 튜플(Tuple)

정해진 길이(length)와 정해진 타입의 데이터들을 담고있는 배열이다.

// 튜플의 경우 타입 할당 -> tupleThing:[key1: type, key2: type, key3: type]

const jack: { age: number; married: boolean; role: [number, string, string] } =
  {
    age: 11,
    married: true,
    role: [0, "author", "CEO"],
  };

jack.role = [1, "normal", "employee"];

console.log(jack);

role의 경우 length는 3, 그리고 number, string, string 순서로 데이터 타입이 고정되어있다. 그런데 한 타입이 2번 이상 반복되는 경우 전개구문을 타입할당에 사용할 수 있다.

const jack: { age: number; married: boolean; role: [number, ...string[]] }

- 열거형(enum)

- 사용해야 하는 이유: 각 식별자와 그 식별값을 따로 전역변수화 시켜서 관리가 가능하다. 다만, 이렇게 사용하는 경우 훗날 그 변수에 대해 망각할 경우 다시 인지하기 위한 시간적 비용 발생 및 유지보수의 용이성이 떨어진다. 
enum BookType {
  총류, // 0으로 자동 할당
  문학 = 800,
  역사 = 900,
}
enum Position {
  사서 = 1,
  이용자, // 2로 자동 할당
  SUPERADMIN = "SUPER",
}

const user1 = {
  name: "jack",
  favBookType: BookType.문학,
  pos: Position.사서,
};

function doesUserLikeLiterautre(user: object) {
  if (user.favBookType === 800) {
    console.log(user.name, "문학을 좋아합니다.");
  } else {
    console.log(user.name, "문학을 좋아하지 않습니다.");
  }
}

function getPosCode(user: object) {
  console.log(user.pos);
}

doesUserLikeLiterautre(user1); // => 문학을 좋아합니다.
getPosCode(user1); // => 1
profile
자신을 개발하는 개발자!

0개의 댓글