[TIL] Day45 - 타입스크립트 2

객체 리터럴

객체 안의 모든 프로퍼티들의 타입을 지정해 주는 방법

enum 등 객체 선언에 사용할 수 있는 형식

`gender?: "male" | "female";`

특정 값을 나타내는 타입, 해당값이 정확히 일치해야 한다.

작성된 변수들 제외한(없는) 값 작성시 에러 발생한다.

• 문자열 리터럴 타입 : `let status : 'success' | 'error';` 
• 숫자 리터럴 타입 : `let speed: 50 | 100 | 200;`
• 불리언 리터럴 타입 : `let isTrue : true;`
• 객체 리터럴 타입 : `let person : {name : 'dah', age : 30};`
• 타입 별칭 : type CardinalDirection = 'North' | 'East' | 'South' | 'West';` `let direction : CardinalDirection;`

 

좋은점 : 가독성이 높아지고, 잘못된 값이 들어오는 것을 방지한다.

const user :{name : string, age : number} = {
  name: "dah",
  age: 11,
};

>객체 타입 지정

 

any 타입

어떤 타입이던 상관없이 무슨 값이 들어와도 무관하다는 타입

num, string, boolean 다 가능하다 > 장점? 단점?

개발자의 의도, 컴파일 타입 오류 체크를 확인할 수 없기 때문에 사용 지양하기

 

타입을 지정할 수 없거나, 데이터 형식을 파악할 수 없는 경우에 > 사용하기

 

유니온 타입 = 공용체 유사하다.

제한된 타입을 중복으로 동시에 지정하고 싶을때 > 아무 타입이 올 수 있다.

`let anyVal : number | string;`

`union 이름 { 타입1, 타입2} ` 공용체 : 사용자 정의 타입 과 유사한 타입선언식이다.

타입 둘 중 아무 타입의 값이 올 수 있다. 

let numStr: number | string = 100; //'100' 동일
function convertToString(val: number | string): string {
  return String(val);
}
function convertToNum(val: number | string): number {
  return Number(val);
}
console.log(convertToString(numStr));
console.log(convertToNum(numStr));

 

type alias 별칭

공용체 자체를 타입으로 묶어서 빼낼 수 있을 것

`type numOrStr = number | string;`

 

타입 가드

유니온타입으로 2개 이상 타입이 정해진 변수를 > 일반 하나의 타입만 정의한 변수에 할당하려고 하면 에러가 발생한다.

반대는 에러가 발생하지 않는다.

> `typeof operator` 연산자 사용해서 해결할 수 있다.

typeof - JavaScript | MDN

어떠한 변수의 타입을 반환한다.

function convertToString(val: numOrStr): string {
  if (typeof val === "string") item = 0;
  else item = val;
  return String(item);
}

 

Array 데이터 타입

JS에서는 new Array 객체생성 문법을 생략해서 `let 변수 = [];`로 생성을 했었다.

`let numbers: number[] = [1, 2, 3, 4, 5];`

데이터타입마다 선언해서 사용할 수 있다.

 

배열 유니온 타입

`let mixedArray: (number | string)[] = [1, "two", 3, "four"];`

JS 에서는 타입을 지정하지 않아도 타입 추론을 통해 판단할 수 있다.

 

읽기전용 배열 ReadonlyArray

`let readOnlyArray:ReadonlyArray<number> = [1, 2, 3];`

초기 선언 배열에 추가, 삭제 등 연산이 불가능하다.

 

Tupple 데이터 타입 -  TS

JS 에는 없는 데이터 타입. TS 타입스크립트에만 있다.

타입의 순서가 정해져 있다.

`let greeting: [number, string, boolean] = [1, "hi", true];`

 

Array, Tuple 차이점

Array는 길이가 가변적이며, 동일한 타입의 요소로 구성되어있다.

Tuple은 길이가 고정적이며, 각 요소의 타입이 정해져 있다.

 

스프레드 연산자 ...spread

Spread syntax (...) - JavaScript | MDN

메모리 복사에 유용하다.

let aArr = [1, 2, 3];
let bArr = [4, 5, 6];
let cArr = [...aArr, ...bArr];
cArr.forEach((val)=>console.log(val));
//console
1
2
3
4
5
6

스프레드 연산자로 대괄호 형식을 해제해서 복사한다.

 

타입스크립트 객체지향 OOP

코드의 구조화를 시키는 타입 : 구조체, 공용체, 열거형, 인터페이스, 클래스

클래스 : 연관된 변수와 함수들을 한 덩어리로 묶는다.

 

클래스와 객체의 관계 : 뼈대, 틀, 설계도 ---- 클래스의 실체 데이터

ex. 붕어빵틀, 붕어빵

 

클래스와 객체 생성

클래스 안에서 변수와 객체를 함께 선언한 경우, 함수에서 매개변수를 전달받을 필요는 없다 > 동일 스코프에 존재한다.

멤버변수 == 속성 == 프로퍼티

멤버함수 == 메소드

class Employee {
    empName : string = 'dah';
    age : number = 11;
    empJob : string = 'backsoo';

  printEmp = (): void => {
    console.log(
      `이름 : ${this.empName}, 나이 : ${this.age}, 직업: ${this.empJop}`
    );
  };
}

let employee1 = new Employee();
employee1.printEmp();

 

생성자

속성의 초기값을 생성자를 이용해서 설정할 수 있다.

JS는 `constructor` 문법으로 선언한다.

객체 생성하는 시점 `new 클래스명;` 때 생성자 constructor 가 같이 호출된다.

class Employee {
  empName: string;
  age: number;
  empJob: string;

  constructor(empName: string, age: number, empJob: string) {
    this.empName = empName;
    this.age = age;
    this.empJob = empJob;
  }

  printEmp = (): void => {
    console.log(
      `이름 : ${this.empName}, 나이 : ${this.age}, 직업: ${this.empJob}`
    );
  };
}

let employee1 = new Employee("dah", 11, "backsoo");
employee1.printEmp();

 

⭐ 매개변수 선택적 프로퍼티 ? 적용 > 뒤에 이어지는 매개변수도 ? 필수!

 

접근지정자

객체지향 캡슐화 > 데이터 보호를 위한 접근지정자

default : public

• public : 공개
• private : 외부 접근 불가
• protected : 상속 관계에서만 공개, 그외 접근 불가

`private _empName: string;` > '_empName' 속성은 private이며 'Employee' 클래스 내에서만 액세스할 수 있습니다.

 

메소드를 이용한다면, 접근 가능하다

 

getter, setter

private 설정된 변수는 `_` 언더바를 변수 맨 앞에 붙여주는 규칙!

 

get/set 함수 : 대부분의 언어에 존재한다. 특정 데이터에 대한 추리를 하는 기능에 이름 붙이는 관례

get empName() {
    return this._empName;
  }

  set empName(val: string) {
    this._empName = val;
  }
  
  ///...
  employee1.empName = "datdaradanadat";

변수객체 참조하는 코드가 수행이 되면 > set 메소드가 실행된다. `set empName` 메소드는 public이기 때문에 참조가 가능하기 때문이다. > val에 'datdaradanadat' 이 대입되어서, private 변수에도 접근하게 된다.

 

생성자 리팩토링

변수 선언, 초기화, 멤버변수를 한번에 처리한다.

class Employee {
  constructor(
    private _empName: string,
    private _age: number,
    private _empJob: string
  ) {}

  get empName() {
    return this._empName;
  }

  set empName(val: string) {
    this._empName = val;
  }

  printEmp = (): void => {
    console.log(
      `이름 : ${this._empName}, 나이 : ${this._age}, 직업: ${this._empJob}`
    );
  };
}

let employee1 = new Employee("dah", 11, "backsoo");
employee1.empName = "datdaradanadat";
employee1.printEmp();

 

☑️ 배운 점

리터럴 타입 : 잘못된 값이 들어오는 것을 방지한다.

any 타입은 타입을 지정할 수 없거나, 데이터 형식을 파악할 수 없는 경우에 사용한다.

유니온 타입 으로 두가지 타입을 동시에 지정할 수 있다.

타입 지정하는 코드는 alias로 빼낼 수 있다.

 

배열 `ReadonlyArray<타입>` 읽기 전용으로 생성할 수 있다.

배열 타입 형태는 `let 배열명 : (타입 | 타입)[] = [값1, 값2, ...];`

 

Tupple 튜플은 타입스크립트에만 존재하며, 길이가 고정적이고, 각 요소의 타입이 정해져있다.

 

class 클래스로 비슷한 동작을 하는 변수, 함수를 묶어서 사용한다.

클래스 객체를 사용하려는 코드 실행될때 > 생성자 `constructor` 이 같이 호출된다.

매개변수에 선택적 프로퍼티 적용할때 > 사용되는 변수 뒤에 오는 매개변수도 선택적 프로퍼티 적용해야 한다.

 

접근 지정자 private를 외부에서도 접근할 수 있게 해주는 메서드 get, set

private 설정된 변수 앞에 _언더바 붙여주는게 규칙이다.