TypeScript - 타입 지정, 오류, 타입의 기본 타입

타입 스크립트의 중요도를 깨닫고,,

갈 수록 헷갈려지는 멘탈을 다 잡고,,

처음부터 다시 세세히 꼼꼼히 공부중 ! 화잇팅

---

타입 지정 (Type Annotation) (=문법)

일반 변수, 매개 변수, 객체 속성 등에 :TYPE 과 같은 형태로 타입을 지정해줄 수 있다.

let name: string = "Jane";
let age: number = 25;
let isHappy: boolean = true;

여기서 : string, : number 같은 부분이다.

 

function someFunc(a: TYPE_A, b: TYPE_B): TYPE_RETURN {
  return a + b
}
let some: TYPE_SOME = someFunc(1, 2)

이런 식으로 지정해줄 수 있고,

function add(a: number, b: number) {
  return a + b
}
const sum: number = add(1, 2)
console.log(sum) // 3

위 예시에서는 a,b에 number를 지정해주고 있고, 그렇게 실행된 함수의 반환 값 역시 number로 추론 되기 때문에 num 이라고 지정

"use strict";
function add(a, b) {
  return a + b;
}
const sum = add(1, 2);
console.log(sum);

자바스크립트로 컴파일 된 결과이다.

 

 

타입 에러

function add(a: number, b: number) {
  return a + b
}
const sum: string = add(1, 2)
console.log(sum)

이런 식으로 sum을 string으로 지정했다면, 컴파일 되기도 전에 코드 작성하는 시점에서 이미 에러가 발생된다.

---

타입의 기본 타입

출처 : 한 입 크기로 잘라먹는 타입 스크립트

 

이렇게 타입 스크립트의 내장된 타입은 서로 부모 자식 관계를 이루며 계층을 형성한다.

서로 간의 관계와 동작 방식과 관련이(오류가 발생되고, 이러한 다양한 문제) 있기 때문에, 이 계층을 이해한다는 것은 타입 스크립트를 이해하는데 꽤나 도움이 된다.

 

하나 하나 알아보자.

Number Type

let num: number
let integer: number = 6
let float: number = 3.14
let hex: number = 0xf00d // 61453
let binary: number = 0b1010 // 10
let octal: number = 0o744 // 484
let infinity: number = Infinity
let nan: number = NaN

: 숫자를 의미하는 모든 값을 사용할 수 있다. 단순 정수 뿐 아니라, 소수/음수/Infinity/Nan과 같은 특수한 숫자도 포함 되며, 2진수 및 8진수도 지원 된다.

 

Boolean Type

let isBoolean: boolean
let isDone: boolean = false

: 참, 거짓만 나타내는 타입

 

String Type

let str: string
let red: string = 'Red'
let green: string = "Green"
let myColor: string = `My color is ${red}.`
let yourColor: string = 'Your color is' + green

: 문자열을 의미하는 타입. ''작은 따옴표, ""쌍따옴표, 백틱 템플릿 리터럴과 같은 모든 문자열을 포함한다.

 

null Type, Undefined Type

let num: number = undefined
let str: string = null
let obj: { a: 1, b: false } = undefined
let arr: any[] = null
let und: undefined = null
let nul: null = undefined
let voi: void = null
// ...

: null, Undefined는 default 기본값으로 모든 타입의 하위 타입이므로, (1) 어디든 할당 가능하다. 

 

(1) 하지만 이건, 비엄격 모드로써(strictNullChecks를 false로)설정 했을 때의 이야기로, 해당 옵션은 안전한 타입스크립트 코드를 작성하는 측면에서는 다소 도움이되지 않고,

(2) 실무에선 보통 엄격 모드가 기본 세팅이므로, null 타입과 undefined 타입은, 오직 null, undefined만 포함 하는 타입이라고 이해 하면 좋다. 따라서 이렇게 직접 명시적으로 값을 포함 시켜줘야 한다.

let name: string | null;         
let age: number | undefined;

 

* 따라서 혹시 아직 값이 정해지지 않은 상태에서 임시로 null로 두고 싶다면 비엄격모드로 설정 하면 된다 ! 

strictNullChecks: false (기본값 비엄격)	null과 undefined는 모든 타입의 하위 타입. 그래서 어디든 할당 가능.
strictNullChecks: true (엄격 모드, 실무에서 대부분 이걸 사용)	null과 undefined는 자신의 타입에만 할당 가능. 직접 명시해야만 가능.

 

 

리터럴 타입

let numA: 10 = 10;

: 특정 값(=하나의 값)을 바로 지정해주고 싶을 때. 하나의 값만 포함하도록 그 값 자체로 만들어진 타입

해당 numA는 10 외에 다른 걸 저장할 수 없다.

숫자 뿐 아니라, 문자열이나 불리언도 모두 리터럴로 만들 수 있다.

let strA: "hello" = "hello";
let boolA: true = true;
let boolB: false = false;

---

출처 : 한눈에 보는 타입 스크립트(herophy님 블로그), 한 입 크기로 잘라먹는 타입 스크립트,Chat G