[TS]Narrowing & Assertion, Type Aliases, readonly

이해용·2022년 6월 22일
0
post-thumbnail
post-custom-banner
let myFunction = (x :number | string) => { 
  return x + 1 
} // '+' 연산자를 'string | number' 및 'number' 형식에 적용할 수 없습니다.

타입스크립트에서는 위처럼 사용하면 위와같은 에러가 발생된다.
따라서, Narrowing 또는 Assert 해주면 된다.

Type Narrowing

if문 등으로 타입을 하나로 정해주는 것을 뜻한다.

let myFunction = (x :number | string) => {
  if (typeof x === 'number') {
    return x + 1
  } 
  else if (typeof x === 'string') {
    return x + 1
  }
  else {
    return 0
  }
}

위처럼 typeof 도 사용 가능하고 in, instanceof 키워드도 사용가능하다.

Type Assertion

assertion 사전적 의미?
1. 명사 (사실임을) 주장 (=claim)
2. 명사 (권리 등의) 행사

Type Assertion 은 변수명 as string 으로 사용 가능하다.

let myFunction = (x :number | string) => { 
  return (x as number) + 1 
}
console.log( myFunction(10) ) // result: 11

as를 사용하면 간편하나 정확히 코드짜려면 narrowing을 쓰는게 좋다.
as는 타입을 개발자 맘대로 주장하는 역할이라 엄격한 타입체크기능을 잠깐 안쓰겠다는 뜻과 동일하다.

as 를 사용해야 할 때

  1. 왜 타입에러가 나는지 정말 모르겠는 상황에 임시로 에러해결용으로 사용
  2. 내가 어떤 타입이 들어올지 정말 확실하게 알고 있는데 컴파일러 에러가 방해할 때

Type Aliases(타입 별칭)

Type Aliasess 는 특정 타입이나 인터페이스를 참조할 수 있는 타입 변수를 의미한다.

// string 타입을 사용할 때
const name: string = 'capt';

// 타입 별칭을 사용할 때
type MyName = string;
const name: MyName = 'capt';

type 타입변수명 = 타입종류

타입을 변수처럼 만들어서 쓰는 alias 문법. 관습적으로 대문자로 시작한다.

object 타입

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

let Dog :AnimalType = { name : 'Bob', age : 10 } 

readonly

const myCountry = 'seoul'; 
myCountry = 'busan'; // 에러 발생

const는 값이 변하지 않는 변수를 만들고 싶을 때 사용

const myCountry = {
  region : 'seoul'
}
myCountry.region = 'busan';  //const 변수지만 객체 안에 있어서 에러발생되지 않는다.

object 자료를 const에 집어넣어도 object 내부는 마음대로 변경가능하다.
const 변수는 재할당만 막아줄 뿐이지 그 안에 있는 object 속성 바꾸는 것 까지 관여하지 않기 때문이다.
object 속성을 바뀌지 않게 막고 싶으면 타입스크립트 문법을 사용하면 된다.

readonly 키워드는 속성 왼쪽에 붙일 수 있으며 특정 속성을 변경불가능하게 잠궈준다.

type MyCountry = {
  readonly region : string,
}

const myCountry : MyCountry = {
  region : 'seoul'
}

myCountry.region = 'busan'; // error: 읽기 전용 속성이므로 'region'에 할당할 수 없습니다.

type

|

OR 연산자를 이용해서 Union type을 만들 수도 있습니다.

type Name = string;
type Age = number;
type NewOne = Name | Age; 

object &

type PositionX = { x: number };
type PositionY = { y: number };
type XandY = PositionX & PositionY
let coordinate :XandY = { x : 1, y : 2 }

object에 지정한 타입의 경우 합치기도 가능하여 & 기호를 사용하면 된다.
이를 extend 한다고 한다.

type 키워드는 재정의가 불가능

type Name = string; // error: 'Name' 식별자가 중복되었습니다.
type Name = number; // error: 'Name' 식별자가 중복되었습니다.

참고 및 출처
코딩애플 강의
https://www.typescriptlang.org/
https://joshua1988.github.io/ts/

profile
프론트엔드 개발자입니다.
post-custom-banner

0개의 댓글