✅Enums - 열거형 Enums은 Typescript에서 제공되는 몇 안 되는 자바스크립트의 타입 레벨이 아닌 확장이다. Enums는 명명된 상수 집합을 정의할 수 있으며 숫자형 또는 문자형 기반의 열거형을 제공해 준다. 🤔 주로 어떤 때에 사용될까? 첫 번째 예시 전자 상거래 사이트에서 주문을 할 경우, 아래 코드처럼 '대기 중, 발송됨, 배송 완료'라는 세 가지 상태가 있다. // TS를 사용하지 않을 경우 const PENDING = 0; const SHIPPED = 1; const DELIVERED = 2; if(status === DELIVERED) { // do something... } else 중요한 것은 숫자 2가 아닌 DELIVERED라는 명명된 상수를 사용하여 의미를 명확하게 하고 ..
✅ 클래스란? 사전에 정의된 속성 및 메소드들을 이용해 객체를 생성하기 위한 청사진과 같다. ES2015에서 도입되었으며 생성자의 기능을 대체한다. class 표현식을 사용하면, 생성자와 같은 기능을 하는 함수를 훨씬 더 깔끔한 문법으로 정의할 수 있다. 클래스 이름은 생성자 함수와 마찬가지로 파스칼 케이스를 사용하는 것이 일반적이다. // 클래스 선언문 class Person {} // 익명 클래스 표현식 const Person = class {}; // 기명 클래스 표현식 const Person = class MyClass {}; 일반적이진 않지만 함수와 마찬가지로 표현식으로 클래스를 정의할 수도 있다. 표현식으로 정의할 수 있다는 것은 클래스가 값으로 사용할 수 있는 일급 객체라는 것을 의미한다. ..
일급 객체란? 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성 가능하다. 변수나 자료구조(배열, 객체)에 저장할 수 있다. 함수의 매개변수에 전달할 수 있다. 함수의 반환 값으로 사용할 수 있다. JavaScript의 함수는 위 조건을 모두 만족하므로 일급 객체이다. 예시를 보고 이해해 보자. // 1. 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다. const increase = function (num) { return ++num; }; const decrease = function (num) { return --num; }; // 2. 함수는 객체에 저장할 수 있다. const auxs = { increase, decrease }; // 3. 함수의 매개변수..
✅ Union Types 유니온 타입이란 JavaScript의 OR 연산자( || )와 같이 A이거나 B라는 의미의 타입이다. 즉, 유니온 타입을 이용하면 여러 타입의 값을 가질 수 있게된다. let age: number | string | boolean = 21; age = 23; age = "24"; age = true; 적절한 예시는 아니지만 간단한 예시로 유니온 타입을 사용했다. age는 세개의 Type 중 어느 것을 사용해도 상관 없다. type Point = { x: number; y: number; }; type Loc = { lat: number; long: number; }; let coordinates: Point | Loc = { x: 1, y: 34 }; coordinates = {..
✅ Array Types 배열에 타입을 지정하는 방법을 살펴보자. 변수를 선언하고 type에 빈배열을 설정했다. 배열에 무언가 하려하거나 숫자를 넣는 등 초기화를 하면 에러가 발생한다. 왜냐하면 타입이 빈 배열이라고 알려두었기 때문에 항상 아무것도 없어야 한다. 그 대신 배열 대괄호 앞에 어떤 타입인지 밝혀줘야 한다. const activeUsers: string[] = ["jeong", "haha"]; 문자열 배열이라는 의미로 원한다면 빈 상태로 시작할 수 있고, 문자열을 넣어줄 수도 있다. const activeUsers = []; 위 코드처럼 빈배열에 타입을 지정하지 않으면 any 혹은 never이 설정된다. 이것은 ts 설정에 의한 것이며, any가 아닌 never로 뜨기 원한다면 tsconfig..
✅ 생성자 함수란? new 연산자와 함께 호출하여 객체를 생성하는 함수를 말한다. new 생성자 함수를 통해 생성된 객체를 우리는 인스턴스 라고 부른다. 이와 별개로, 자바스크립트에서는 Object, String, Number, Boolean 등과 같은 별도의 빌트인 생성자 함수를 제공한다. 🤔 생성자 함수를 이용하여 객체를 만드는 이유? 왜 생성자 함수를 이용하여 객체를 만드는가? 기존에 객체를 만들기 위해 {}를 이용한 리터럴 표현식을 사용하여 객체를 생성하였다. 아래 코드처럼 말이다. const circle = { radius: 5, getDiameter() { return 2 * this.radius; } }; console.log(circle.getDiameter()); 객체 리터럴 방식에 의한..
✅ TypeScript의 객체 TS에서의 객체는 JS와 똑같이 표현된다. const dpg = { name: 'Elton', breed: "Australian Shpherd", age: 0.5 } 타입 추론에 의해 name과 breed는 string 타입, age는 number 타입으로 할당된다. 함수에서 매개변수로 객체를 받는다면 어떻게될까? 직접해보자. const printName = (name: { first: string; last: string }): void => { console.log(`${name.first} ${name.last}`); }; printName이라는 함수에 name객체를 파라미터로 받고 있다. name 파라미터의 키로 first, last가 오며 type은 string이다..
✅ TypeScript의 객체 TS에서의 객체는 JS와 똑같이 표현된다. const dpg = { name: 'Elton', breed: "Australian Shpherd", age: 0.5 } 타입 추론에 의해 name과 breed는 string, age는 number로 할당된다. 함수에서 매개변수로 객체를 받는다면 어떻게될까? 직접해보자. const printName = (name: { first: string; last: string }): void => { console.log(`${name.first} ${name.last}`); }; printName이라는 함수에 name객체를 파라미터로 받고 있다. name 파라미터의 키로 first, last가 오며 type은 string이다. 파라미터를..
