타입 어노테이션?
- 어떤 값이 어떤 타입을 참조하고 있는지 타입스크립트에게 알려주는 코드를 의미한다.
- 개발자가 타입을 작성 해 주는 것을 의미하기도 한다.
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);
}
타입 추론?
- 어떤 값이 어떤 타입인지 타입스크립트가 찾아서 추론하는 과정
- 컴퓨터가 타입을 추론한다.
- 어노테이션은 개발자가 지정 , 추론은 타입스크립트가 알아서
왜 타입 어노테이션을 해야 할까?
- 함수가 any 타입을 리턴하고 이 값을 명확하게 해야 할 때
- 어떤 변수를 선언한 이후에 다른 라인에서 초기화를 해야 할 때
- 추론할 수 없는 타입을 변수가 가지게 하려 할 때
// 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 |