Front-End/TypeScript

타입 어노테이션 & 추론

Voyage_dev 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);
}