[typescript] 기본 타입 정리2

Jinny·2023년 12월 19일

typescript

목록 보기
3/6

1. intersection type

유니언 타입과 다른 점은 & 연산자를 통해 다양한 타입을 하나로 묶어 정의할 수 있다.

예로 동물인 타입과 사냥꾼 타입을 모두 하나의 타입으로 정의할 수 있다. 2가지 타입이 있는 animal 변수는
두 타입의 속성을 이용할 수 있다.
또한 함수를 호출할 때도 인자에 2가지 타입을 포함한 데이터 타입으로 입력해야 한다.

type Animal = {
  name:string,
  age:number,
}

type Hunter = {
  hunt:()=>void,
};

function animalHunt(animal:Animal & Hunter){ 
  console.log(animal.name,animal.age,animal.hunt);
}

2. string literal type

타입을 특정 문자열로 지정할 수 있으며 그외에 문자로
할당하게 되면 오류가 발생한다.

type up = 'up'
let up :up = 'up'; //'up'만 할당 가능
up = 'down' // 다른 문자열로 할당 불가(❌)

3. enum

관련된 여러가지 상수 값을 모아 정의하는 데이터 타입이다.
기본적으로 enum은 0부터 시작하여 멤버들의 번호를 매기는 특징이 있다.

3.1 숫자 열거형

만약 값을 따로 지정하지 않으면 Up은 0, Down은 1 ,
0부터 1씩 증가한다.

enum Direction {
  Up , //0
  Down, // 1
  Left, // 2
  Right, // 3
}
console.log(Direction.Right) //3

Up이 1로 설정되어 있으면 그 다음 멤버는 2부터 시작되며 1씩 증가한다.

enum Direction {
  Up = 1,
  Down,
  Left,
  Right,
}
console.log(Direction.Right) //4

3.2 문자열 열거형

문자열 값으로도 초기화할 수 있는데 숫자형과 달리 자동 증가를 할 수 없다.
따라서 각 멤버 모두 문자열 형태로 작성해줘야 한다.

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}
console.log(Direction.Up); //"UP"

enum에서 설정된 아이템을 일부만 값을 할당할 수 있다.
값이 할당되지 않은 아이템은 이전 아이템의 값에 +1된 값이 설정된다.

enum Team {
  Manager   = 101,
  Planner   = 208,
  Developer = 302,
  Designer, // 302 + 1
}

let yamoo9:number = Team.Manager; // 101
let sarha:number = Team.Designer; //  303

3.3 이종의 열거형

enum은 문자열과 숫자열 모두 섞인 형태로 작성할 수 있지만 자바스크립트의 런타임 동작을 활용하는 것이 아니라면 권장하지 않는 방식이다.

enum BooleanLikeHeterogeneousEnum {
  No = 0,
  Yes = "YES",
}

4. 타입 표명(Type Assertion)

타입 표명은 데이터 타입이 확실한 경우에만 사용한다.
아래 코드는 foo 변수가 빈 객체로 타입이 추론되기 때문에 그외에 다른 key 속성을 foo변수에 추가할 수 없다.

let foo = {};
foo.bar = 123; // 오류: 속성 'bar'가 `{}`에 존재하지 않음
foo.bas = 'hello'; // 오류: 속성 'bar'가 `{}`에 존재하지 않음

as 데이터 타입와 같이 타입 표명을 통해 foo 변수를
key 속성이 존재한 객체 타입으로 지정할 수 있다.

interface Foo {
    bar: number;
    bas: string;
}
let foo = {} as Foo;
foo.bar = 123;
foo.bas = 'hello';
console.log(foo); // {"bar": 123,"bas": "hello"} 

4.1 데이터 표명 방식

  1. 변수 as 데이터 타입
  2. <데이터 타입> 변수
function print():any{
  return 'Hello';
}
console.log((result as string).length); //5
console.log(<string>result.length);  //5

0개의 댓글