리터럴, any, 유니온, array, tuple

리터럴 타입

: 특정 값을 나타내는 타입으로 해당 값이 정확하게 일치해야 함 / 다양한 종류가 있음

 

interface Student {
  stdId: number;
  stdName?: string;
  age?: number;
  gender?: "male" | "female";
  course?: string;
  completed?: boolean;
  setName: (name: string) => void;
  getName?: () => string;
}

class MyStudent implements Student {
  stdId = 777;
  stdName = "lee";
  age = 30;
  gender: "male" | "female" = "male";
  course = "node.js";
  completed = true;
  setName(name: string): void {
    this.stdName = name;
    console.log("이름 설정 : " + this.stdName);
  }
}

let std = {
  stdId: 5555,
  stdName: "lee",
  age: 30,
  gender: "female",
  course: "node.js",
  completed: true,
};

 

리터럴 타입 장점

- 가독성이 높아짐

- 잘못된 값이 들어오는 것을 방지

 

const user: { name: string; age: number } = {
  name: "john",
  age: 25,
};

• 지정한 타입에 맞지 않은 값이 들어오면 오류
  • 예) age에 '35'와 같은 문자열이 들어오면 오류

 

 

any 타입

: 어떤 타입이든 ok (아무값이나 대입 가능)

: 가급적 피하는 게 좋음

: 그럼 왜 사용? -> 타입 명시가 애매한 경우 (동적 할당)

 

any 타입

- 타입에 관한 정보가 더 많을 수록 좋음

- 타입정보는 개발자의 의도를 명확하게 전달 가능

- 효과적인 코드의 유지보수가 가능

- any 타입을 일부러 사용하지 말자

- 타입을 지정할 수 없는 제한적인 경우에만 any 타입을 사용하자

 

 

 

유니온 타입

: 공용체 - 가장 큰 데이터를 기준으로 메모리 공유

: 이것도 사용자 정의 타입!

: 제한된 타입을 동시에 지정하고 싶을 때

: | 기호를 사이에 두고 동시에 타입 지정

 

- 유니온 사용해보기

let numStr: number | string = 100;

function convertTostring(val: number | string): string {
  return String(val); //  값을 string으로 변환
}

function convertToNumber(val: number | string): number {
  return Number(100); //  값을 number로 변환
}

console.log(convertTostring(numStr));
console.log(convertToNumber(numStr));

 

 

- 같은 타입을 반복해서 사용할 경우 -> 타입 별칭

type 키워드 사용

즉, 반복되는 코드 재사용 (타입 재정의)

 

 

- 타입 가드

: 유니온 타입을 사용할 경우 typeof를 사용해 코드를 검증

: 타입 검증

type strOrNum = number | string;

let numStr: strOrNum = "100";
let item: number;

function convertTostring(val: strOrNum): string {
  // item = val;  -> 오류

  //typeof operator
  if (typeof val === "string") {
    item = 0;
  } else {
    item = val;
  }
  return String(val); //  값을 string으로 변환
}

function convertToNumber(val: strOrNum): number {
  return Number(100); //  값을 number로 변환
}

console.log(convertTostring(numStr));
console.log(convertToNumber(numStr));

 

 

Array와 Tuple의 차이점

- 배열은 길이가 가변적이며 동일한 타입의 요소로 구성

- 튜플은 길이가 고정적이며 각 요소의 타입이 정해져 있음

 

//배열
var numbers = [1, 2, 3, 4, 5];
var fruits = ["apple", "banana", "orange"];
for (var i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}
for (var i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

//튜플 : 타입의 순서가 정해져 있다.
let greeting: [number, string, boolean] = [1, "hello", true];
for (let i = 0; i < greeting.length; i++) {
  console.log(greeting[i]);
}

 

 

 

Spread 연산자

... 키워드 사용 -> 배열의 괄호를 벗겨줌

 

//Spread 연산자
let firstArray = [1, 2, 3];
let secondArray = [4, 5, 6];

let conbineArray = [...firstArray, ...secondArray];
for (let i = 0; i < conbineArray.length; i++) {
  console.log(conbineArray[i]);
}