[Typescript] 22.10.6 필기 노트(Typescript 개요)

곰 아님 수달임 아무튼 수달임

[ 내용 ]

1-1. 타입스크립트란?

각 용어간 관계도!

 

(1) ES5(ECMAScript5): 2009년 발표된 자바스크립트 공식 표준

(2) ESNext: 2015년에 발표된 ES6 이후 버전을 통틀어 가리키는 용어

(3) Typescript: 타입(type) 기능을 추가한 ESNext 

 

(4) 트랜스파일: 타입스크립트 소스코드는  TSC(TypeScript Compiler)라는 트랜스파일러를 이용해 ES5 자바스크립트로 변환(텍스트로 된 소스코드를 바이너리 코드로 바꿔주는 컴파일러와 구분하기 위해 생긴 용어... 하지만 트랜스파일과 컴파일을 구분하지 않고 사용하기도 한다.)

(5) 바벨: ESNext 소스코드는 바벨(Babel)이라는 트랜스 파일러를 거쳐 ES5 자바스크립트 코드로 변환

 

1-2. 타입스크립트 주요 문법 살펴보기

 

(1) 비구조화 할당(Destructing Assignment): 객체와 배열에 적용

 

(1-1) 객체의 property를 바로 변수에 선언 및 할당할 수 있다. 객체 속성명과 같은 변수의 이름을 사용해야한다.

// 비구조화 할당(destructing assignment)

const person = {age: 11, name: "otter"}

let {name, age} = person
console.log(age, name)
// 객체 안에 존재하는 property의 이름을 사용해야한다. 순서는 상관 없다.

/* 
let {a, b} = person
console.log(a, b) --> # undefined undefined
*/
// 이 경우 객체 안에 존재하는 property명을 이용하지 않아 undefined를 띄운다.

 

(1-2) 배열의 요소를 순서대로 변수에 할당 후 나머지요소(...nameOfVariable)를 배열로 저장한다.

//const [...b, c] = arr //--> error: rest 요소는 배열 구조 파괴 패턴의 마지막 요소여야 합니다.

const [d, e, f, g, ...h] = arr // 나머지 요소는 array로 저장된다. element가 하나여도 배열로 저장된다.

console.log(d, e, f, g, h)

 

실행화면

(1-3) swap기능(주의! 괄호 사용해야한다!)

let a = 1, b = 2;

//b, a = a, b

//console.log(a,b) // 예상 출력 --> 2 1
// 그러나 실제출력 1 2

[a, b] = [b, a]

console.log(a,b) // 예상 출력 --> 2 1
// 실제 출력 2 1

 

[ 리뷰 ]

자기전에 잠깐 시간이 남아서 공부하고 자려합니다~!

다들 좋은 꿈 꾸시길!

 

꾸준히 열심히!