타입스크립트 2

hojoon·2023년 3월 16일
0

타입스크립트

목록 보기
2/9

Static Types vs Dynamic Types

static 개발 하는 도중 알수 있다.
dynamic 실제 런타임에 돌입 해야만 알 수 있다.

//자바스크립트
function add(n1, n2) {
  if (typeof n1 !== "number" || typeof n2 !== "number") {
    throw new Error("타입 에러");
  }
  return n1 + n2;
}

//타입스크립트
function addts(n1: number, n2: number) {
  return n1 + n2;
}

먼저 에러를 확인할 수 있다.

타입스크립트에서는 프로그램 작성을 위해 기본 제공하는 타입들이 있다.

  • boolean
  • number
  • string
  • null
  • undefined
  • symbol(es6에 추가)
  • array:object형

프로그래밍을 도울 몇가지 타입이 더 제공된다

  • any, void, never, unknown
  • enum
  • tuple:object

Primitive Type

  • 오브젝트와 레퍼렌스 형태가 아닌 실제 값을 저장하는 자료형입니다.
    (오브젝트, 레퍼렌스는 실제 값을 저장하는게 아닌 실제 값을 저장하는 위치를 저장하는 것)
  • boolean
  • number
  • string
  • null
  • undefined
  • symbol(es6에 추가)

literal 값으로 primitive 타입의 서브 타입을 나타낼 수 있다.
3.14 => number타입의 서브 타입
true; => boolean에 서브 타입
->레퍼 객체로 만들 수 있다
ex)
new Boolean(false)
new String('world')
new Number(42)
전부다 object이고 primitive 타입이 아님

그렇지만 이렇게 사용하는 것은 권장되지 않는다.

const reverse = (s: String): String => {
  return s.split("").reverse().join("");
};

const reverse2 = (s: string): string => {
  return s.split("").reverse().join("");
};

타입스크립트의 핵심 primitive types는 모두 소문자이다.!

boolean

타입으로 사용해서는 안되고 대문자로 쓴것은 전부 레퍼 객체이다.

이런 느낌!

number

신기한것은 백만이라는 숫자를 저렇게 쓸수 있다.
NaN또한 숫자!

string

타입스크립트 또한 따옴표로 string을 감싼다.

Template String

  • 행에 걸쳐 있거나, 표현식을 넣을 수 있는 문자열
  • 이 문자열은 backtick(``)으로 감싸준다.
  • 포함된 표현식은 ${} 으로 사용할 수 있다.

symbol

  • es5의 symbol이다
  • new Symbol로 사용할 수 없다.
  • Symbol을 함수로 사용해서 symbol 타입을 만들어낼 수 있다.

console.log(Symbol("foo") === Symbol("foo")); // false

언제 사용하는 걸까?

  • primitive 타입의 값을 담아서 사용한다.
  • 고유하고 수정불가능한 값으로 만들어준다.
  • 그래서 주로 접근을 제어하는데 쓰는 경우가 많다.

위에 코드는 고유한 값이기 때문에 false이다.

undefined & null

  • 실제로 각각 undefined, null 이라는 타입을 가진다.
  • void 와 마찬가지로 , 그 자체로는 그다지 유용하지 않다.
  • 둘다 소문자만 존재한다.
let u : undefined = undefined;
let n : null = null;

undefined, null은 설정을 하지않으면 모든 타입에 서브타입으로 존재한다.

  • number에 null,undefined를 할당할 수 있다.
  • '--strictNullChecks' 를 사용하면 null과 undefined는 void 나 자기 자신들에게만 할당할 수 있다.

null은?

  • 런타입에서 typeof 연산자를 이용해서 알아내면 object라고 나온다.
  • 무언가가 있는데, 사용할 준비가 덜 된 상태.
  • null 이라는 타입은 null만 가질수 있다.

undefined는??

  • 무언가가 아예 준비되지 않은 상태
  • 값을 아예 할당하지 않은 변수
  • 런타입에서 typeof를 이용해서 알아내면 undefined!

object type

  • primitive type이 아닌 것을 나타내고 싶을 때 사용하는 타입

non-primitive type

  • nom number, string, boolean, bigint, symbol, null or undefined

array

  • 원래 자바스크립트에서 array는 객체입니다.
  • 사용방법
    • 타입[]
      - Array<타입>

유니온 타입으로도 사용 가능하다.

tuple

any

  • 어떤 타입이어도 상관없는 타입이다.
  • 최대한 쓰지 않는게 핵심이다.
  • 타입체크가 정상적으로 이뤄지지 않기 때문이다.
  • 필요하지 않는 경우에는 any를 사용하지 않아야 한다.
  • 편의를 위해서 사용하는 경우에는 타입 안전성을 잃는다.

이렇게 말도 안되는 코드가 작성 가능해진다.

unknown

  • 프로그래밍을 할때 모르는 변수의 타입을 묘사해야 할 수도 있다.
    • 이러한 값은 동적 콘텐츠
    • 이 경우, 컴파일러와 미래의 코드를 읽는 사람에게 이 변수가 무엇이든 될수 있음을 알려주는 타입을 제공하기를 원하므로 unknown이 생겼다.

  • 타입스크립트 3.0부터 지원
  • any와 같이 아무거나 할당할 수 있다.
    • 컴파일러가 타입을 추론할 수 있게끔 타입의 유형을 좁히거나
    • 타입을 확정해주지 않으면 다른 곳에 할당 할 수 없고, 사용할 수 없다.
  • unknown 타입을 사용하면 runtime error를 줄일 수 있을 것 같다.
    • 사용 전에 데이터의 일부 유형의 검사를 수행해야 함을 알리는 API에 사용할 수 있을 것 같다.

never

일반적으로 return에 사용된다.

  • never 타입은 모든 타입의 서브타입이다. -> 모든 타입에 할당 할 수 있다.
  • 하지만 never에는 어떤 것도 할당할 수 없다.
  • any 조차도 never에게 할당 할 수 없다.
  • 잘못된 타입을 넣는 실수를 막고자 할 때 사용하기도 한다.

void

소문자로만 사용하고 값을 반환하지 않는 일종의 undefined를 반환하는 상태,

타입스크립트의 베이직한 타입들에 대해서 알아보았다. 아직까지는 공부할게 많이 남았지만 공부하면서 느낀점은 타입을 일일히 지정해주기 때문에 코드 런타임전에 개발하면서 수많은 오류와 버그를 해결할 수 있을것이라고 생각했다.
또한 어떻게 보면 코드 가독성?? 개발자가 코드를 작성하면서 의도한것이 무엇인지 좀더 쉽게 알수 있을것이라고 생각했다. 결론은 재밌다.

profile
프론트? 백? 초보 개발자의 기록 공간

0개의 댓글