Voyage_dev
항해하는 개발자
Voyage_dev
전체 방문자
오늘
어제
  • All (158)
    • Front-End (102)
      • HTML & CSS (7)
      • JavaScript (13)
      • Web & 표준 & ETC (15)
      • React (17)
      • Next (13)
      • TypeScript (6)
      • Zustand (1)
      • AWS (4)
      • Redux (1)
      • MobX (9)
      • GraphQL (1)
      • Flutter (15)
    • 알고리즘 (12)
      • Java (11)
      • JavaScript (1)
    • Git (1)
    • Project (2)
      • 개인 (1)
      • 팀 (1)
    • Books (30)
      • 누구나 자료구조와 알고리즘 (20)
      • Do It 타입스크립트 프로그래밍 (9)
    • 자료구조 (6)
    • 취업 (1)
    • 항해플러스 (1)
      • 1주 (1)

블로그 메뉴

  • 👨🏻‍💻 Github
  • 💻 Rss 블로그
  • 🏊‍♂️ Resume
  • 🗂️ Portfolio

인기 글

최근 댓글

hELLO · Designed By 정상우.
Voyage_dev

항해하는 개발자

타입 어노테이션 & 추론
Front-End/TypeScript

타입 어노테이션 & 추론

2024. 7. 24. 17:52

타입 어노테이션?

  • 어떤 값이 어떤 타입을 참조하고 있는지 타입스크립트에게 알려주는 코드를 의미한다.
  • 개발자가 타입을 작성 해 주는 것을 의미하기도 한다.
let name: string = 'Owen';
let age: number = 30;
let isMarried: boolean = false;

let haveNothing: null = null;
let nothing: undefined = undefined;

// built in object
let now: Date = new Date();

// array
let animals: string[] = ['cat', 'dog', 'cow'];

// class
class Car {}

let car: Car = new Car();

// object literal
let point: {x: number, y: number} = {
	x: 10,
	y: 20
}

// function
const logNumber: (i: number) => void = (i: number) => {
	console.log(i);
}

타입 추론?

  • 어떤 값이 어떤 타입인지 타입스크립트가 찾아서 추론하는 과정
  • 컴퓨터가 타입을 추론한다.
  • 어노테이션은 개발자가 지정 , 추론은 타입스크립트가 알아서

왜 타입 어노테이션을 해야 할까?

  1. 함수가 any 타입을 리턴하고 이 값을 명확하게 해야 할 때
  2. 어떤 변수를 선언한 이후에 다른 라인에서 초기화를 해야 할 때
  3. 추론할 수 없는 타입을 변수가 가지게 하려 할 때
// 1.

const json = '{"a": 1, "b": 2}';
const object = JSON.parse(json); // any 타입으로 인식 -> 타입 어노테이션 필요
console.log(object); // {a: 1, b: 2}
object.asdadsfgsdasdasdasd // 타입스크립트는 object를 any 타입으로 인식해서 이러한 에러를 찾지 못함

// 2.

const colors = ['red', 'blue', 'green'];
let foundColor; // 암묵적으로 any 타입을 가짐 -> 타입 어노테이션 필요

for (let i = 0; i < colors.length; i++) {
        if (colors[i] === 'blue') foundColor = true; // 이 타입은 any인데 boolean 타입으로 된다
}

// 3.
let numbers = [-10, -5, 10];
let numberAboveZero = false; // boolean 타입으로 타입 추론 -> 타입 어노테이션 필요 boolean | number

for (let i = 0; i < colors.length; i++) {
        if (numbers[i] > 0) numberAboveZero = numbers[i]; // error
}

 

함수에서 타입 어노테이션

const add = (a:number, b:number): number => { // 타입 추론에 의해서 number를 반환하게 하는 걸 알 수 있다
	return a + b;
}
// 함수에도 타입 어노테이션을 지정하는걸 추천

 

void vs never

 

void : 비어 있는 타입

never : 절대로 발생할 수 없는 타입

  • 둘 다 리턴이 없는 경우 사용
const logger = (message:string): void => {
	console.log(message)
}

const throwError = (message:string): never => {
	throw new Error(message);
}

'Front-End > TypeScript' 카테고리의 다른 글

유틸리티 타입  (3) 2024.07.24
제네릭 & 타입 가드  (2) 2024.07.24
타입스크립트 클래스 & 인터페이스  (0) 2024.07.24
타입스크립트란 무엇인가  (2) 2024.07.24
[Typescript] 타입스크립트란?  (1) 2022.12.14
    'Front-End/TypeScript' 카테고리의 다른 글
    • 제네릭 & 타입 가드
    • 타입스크립트 클래스 & 인터페이스
    • 타입스크립트란 무엇인가
    • [Typescript] 타입스크립트란?
    Voyage_dev
    Voyage_dev

    티스토리툴바