[공부] 타입스크립트 문법 및 개념 ES6 TypeScript

1. 변수 선언

- ES6  →  let 변수명;        // ES6는 JS의 버전을 의미한다.

- TS  → let 변수명 : 데이터 타입;

let integer;
let integer2 : number;

 

2. 상수 선언

- ES6  → const 상수명 = 초기값;

- TS → const 상수명 : 데이터 타입 = 초기값;

const INTEGER = 5;
const INTEGER2 : number = 10;

 

# TS의 경우 변수 혹은 상수를 선언과 동시에 초기화하면 해당 변수 혹은 상수의 데이터 타입을 자동으로 추론한다.

 

* tyopeof(변수) → 해당 변수의 타입을 문자열로 나타냄

console.log(typeof(변수));
console.log('야호');

 

3. 데이터 타입

TS → string, number, boolean, null, undefined(?), any, object

 

ㅡ string : 문자열

문자열을 표현할 때는 ' ', " ", ` `(backtick)

let str : string = '10'

const description = "str의 값은 " + str + "입니다.";
const description2 = `str의 값은 ${str}입니다.`;

 

ㅡ number : 숫자

실수와 정수 모두

let num : number = 15;

 

ㅡ boolean : 논리

let bool : boolean = true;

 

ㅡ null : 아무 것도 지정되지 않은 상태

let n : null = null;

 

ㅡ undefined : 정의되지 않은 상태

const obj : any = {};
consoloe.log(obj.a);

 

ㅡ any : 모든 타입을 받음

let var : any = 3;
var = '15';
var = true;

 

ㅡ object : 객체 타입 ( Java의 Object Class와 동일 )

let obj2 : object = {};
obj2 = { a : 10 };
obj2 = [ 10, 20 ];

 

★ |, &

| : 한 변수에 두 개 이상의 데이터 타입을 지정할 때 사용

let vary : string | number | null;
vary = 'str';
vary = 5;
vary = null;

 

★ TS는 데이터 타입을 지정해주지 않아도 값을 입력하면 알아서 추론해주지만 데이터 타입이 지정된 변수는 필수적으로 값을 적어주어야 한다.

 

& : 한 변수에 두 개의 데이터 타입을 동시에 지정

interface I1{
  a : string;
}
interface I2{
  b : number;
}

let implement : I1 & I2 = {
  a : 'str',
  b : 2
}

 

4. 연산자

== : 데이터 타입을 비교하지 않고 보여지는 값 자체만 비교함

const str : any = '10';
const num : any = 10
const flag : boolean = str == num;

str과 num은 문자와 숫자 10이라 달라야 하지만 ==으로 비교하면 flag에 true로 찍힌다.

 

=== : 데이터 타입까지 비교

 

5. if문의 조건

ㅡ ES6와 TS에서는 '', 0, null, undefined는 모두 false / 나머지는 true

 

6. for

ㅡ for(const 변수명 of 배열명){}

const numArr = [3, 4, 5];
for(const i of numArr){
   console.log(i);
}

 

7. interface

ㅡ TS에선 interface를 데이터 타입 형태로 사용한다.

interface IExample {
  a : string;
  b : number;
  c : boolean;
};

const obj : IExample = {
 a : 'a',
 b : 5,
 c : true
};

obj의 데이터 타입은 IExample 인터페이스

 

→ 객체형의 데이터 타입을 지정할 땐 3가지 방법이 있다.

1. interface : 바로 위의 예시

2. class

class Example{ // class 쓸 땐 생성자도 같이
      a : string;
      b : number;
      c : boolean;

constructor(a : string, b:number, c : boolean){ // ts의 생성자 쓰는 방식
        this.a = a;
        this.b = b;
        this.c = c;
      }
    }

const object2 : IExample = new Example('a', 1, true); // class에서 생성자를 만들면 new 생성자도 가능
const object3 :  Example = { a : 'a' , b: 1, c : true};

 

3. type

type TExample = {
  l : number,
  m : string,
  n : boolean
}

const obj4 : TExample = {
  l : 3,
  m : 'b',
  n : false
};

 

8 : 삼항 연산자, Spread 연산자, 비구조화 할당

 

삼항 연산자 

ㅡ (조건) ? 참일 때 값 : 거짓일 때 값

const RESULT = num > 10 ? '10보다 큼' : '10보다 작거나 같음';

 

비구조화 할당

ㅡ object 타입(객체와 배열)의 요소를 하나씩 직접 꺼내서 사용할 수 있도록 하는 것

ㅡ State도 배열 형태의 비구조화 할당

const { a, b, c } = object;
console.log(a, b, c);
const [ a1, b1, c2 ] = numArr;
console.log(a1, b1, c1);

 

Spread 연산자

ㅡ ... 객체 : 객체에서 지정한 요소를 제외하고 남은 요소를 객체로 묶음

ㅡ 비구조화 할당에 쓰일 때는 직접 뽑은 요소를 제외한 나머지 요소를 하나로 묶어줌

const { a, ...spread } = object;
console.log(a);
console.log(spread) // object 객체에 있는 a변수 외 나머지 다 보여줌

 

ㅡ 새로운 객체를 생성할 때 가지고 있는 객체를 분해해서 요소로 추가

const example1 = { a1 : 'a', object1}; // object1는 하나의 묶음 상태로 있다.
console.log(example1);
const example2 = { a1 : 'a', ...object1}; // object1은 묶음 안에 있는 요소들을 다 분해해서 가진다.
console.log(example2);

let state = {email : 'email', password : 'password', passwordCheck : 'passwordCheck'};
state = {...state, email : '이메일'};
// state = { password : 'password', passwordCheck : 'passwordCheck', email : '이메일', };
console.log(state)

 

9. Enum

ㅡ Enumerated Type 열거형 타입

enum ENUMERATED {
      APPLE = 'apple',
      BANANA = 'banana',
      CARROT = 'carrot'
    }
    
    const fruit = ENUMERATED.APPLE;
    console.log(fruit);