typescript에만 있는 Type
any
모든 타입을 허용하는 타입으로, 타입 검사가 이루어지지 않습니다. JavaScript의 기본적인 동작과 비슷합니다.
책과 그리고 "이펙티브 타입스크립트-댄 밴더캄"에서 그리고 인터넷 검색을 하면 any 타입 지양하는게 좋다고 얘기한다 이유로는 크게 "안정성이 없다"," 함수 시그니처를 무시" ,"언어 서비스가 적용되지 않는다" 등등 여러 이유가 있기에 그렇다고 한다. (다음에 기회가 된다면 any 타입에 대해서 더 깊게 공부하고자 한다)
" any 타입은 검사를 포기한다는 선어과 같다. 타입스크립트가 any로 추론하는 타입이 있다면 타입을 직접 표기해야 한다" <타입스크립트 교과서 인용>
let someValue: any;
// 숫자 할당
someValue = 42;
// 문자열 할당
someValue = "Hello, TypeScript!";
// 객체 할당
someValue = { name: "John", age: 25 };
// 함수에 any 타입 사용
function logValue(value: any): void {
console.log("Logged value:", value);
}
// 함수 호출: 다양한 타입을 전달할 수 있음
logValue(123); // Logged value: 123
logValue("A string value"); // Logged value: A string value
logValue({ key: "value" }); // Logged value: { key: "value" }any[]는 push(), pop(), 연산할 때 타입 변경
// push() 예제
const values = [];
// const values: any[] = [];//로 두면 타입 계속 any로 고정됩니다
values.push(10); // values:number[]
values // const values:number[]
values.push("Hello");// values:string[]
values // const values: (string | number)[]
values.push({ name: "Alice" });
values // const values: (string | number | { name: string; })[]
// 배열의 요소를 pop (마지막 값 제거) 예제
let poppedValue = values.pop();
// pop()으로 타입이 이전으로 추론 불가
values // const values: (string | number | { name: string; })[]
console.log(poppedValue); // { name: "Alice" }
console.log(values); // [10, "Hello"]
// 연산할 때 타입 변경 예제
const b: any = '456';
const result1 = b + 2; // const result1: any
const result2 = b - 2; // const result2: number
const result3 = b * 3; // const result3: number
const result4 = b - 3; // const result4: number
const result5 = b + '789'; // const result5: string
console.log(result1); // '4562'
console.log(result2); // 454
console.log(result3); // 1368
console.log(result4); // 453
console.log(result5); // '456789'명시적으로 any를 반환하는 경우
unknow
모든 타입을 담을 수 있음: unknown은 any처럼 모든 타입의 값을 받을 수 있습니다. 하지만 any와 달리 값을 사용할 때 타입을 좁혀야만 접근이 가능합니다.unknown 타입을 다른 타입처럼 직접적으로 사용할 수 없습니다. 예를 들어, 함수 호출, 속성 접근, 연산 등은 불가능합니다.
// unknown 타입 선언
let value: unknown;
value = 42; // 숫자를 할당
value = "Hello"; // 문자열을 할당
value = true; // 불리언을 할당
if (typeof value === "string") {
console.log(value.toUpperCase()); // 타입이 문자열로 확인된 후에만 사용 가능
}
// 타입 단언을 통한 사용
const stringValue: string = value as string; // 명시적으로 string 타입으로 변환
console.log(stringValue.toUpperCase());
// 오류: 타입 검사가 없으면 연산 불가
// console.log(value.toUpperCase()); // 컴파일 에러 발생 (타입 검사 없이 사용 불가)try catch문에서 unknow 발생
타입스크립트 v4.4 부터는 error의 object가 unknown type으로 정의 되어서, ts error가 발생하기 떄문에 interface를 사용하는 것을 추천합니다. any 사용은 지양합니다.
(저는 프로젝트 처음에 오류 발생을 안 했는데 어느순간 에러가 발생한 경험이 있습니다)interface CustomError extends Error { // name: string; // message: string; // stack?: string; - Error 인터페이스 프로퍼티들을 직접 쓰거나 아니면 상속해준다. response?: { data: any; status: number; headers: string; }; } try { await axios.get('/user/12345'); } catch (err: unknown) { const customErr = err as CustomError; // 타입 단언한 것을 변수에 넣어서 뒤에서 자주 쓰이면 재사용 될 수 있게 console.error(customErr.response?.data); console.error(customErr.response?.status); console.error(customErr.response?.headers); }출처: https://inpa.tistory.com/entry/TS-📘-타입스크립트-커스텀-Error-처리하기 [Inpa Dev 👨💻:티스토리]
void
void 타입은 값을 반환하지 않는 함수를 정의할 때 사용됩니다. 일반적으로 함수가 값을 반환하지 않는 경우, 즉 반환 타입이 없는 함수에서 void를 사용하여 이를 명시적으로 나타냅니다. void는 자바스크립트의 undefined와 비슷한 개념이지만, 함수의 반환 값이 없음을 의미하는 데 중점을 둡니다.
undefined와 차이
void는 타입 시스템에서 "값이 없음"을 명시하기 위한 것이고, undefined는 자바스크립트에서 사용되는 값 그 자체입니다.
function returnUndefined(): undefined {
return undefined; // undefined를 반환하는 함수
}
function logMessage(message: string): void {
console.log(message); // 반환값이 없음
}
void 사용 예제
// 1. 콜백 함수에서 반환값을 사용하지 않는 경우
function processCallback(callback: () => void): void {
callback(); // 콜백 함수를 실행
}
processCallback(() => {
console.log("Callback executed");
});
// 2. 함수의 반환 값을 사용하지 못하게 제한하는 경우
function logMessage(message: string): void {
console.log("Logged message:", message);
// 반환값이 없음
}
// 함수 호출, 반환값을 사용하려고 해도 사용 불가
const result = logMessage("Hello, TypeScript!");
// result는 void 타입이므로 아래와 같이 사용하면 오류 발생
// console.log(result.toUpperCase()); // 오류 발생: 'void' 타입에는 'toUpperCase' 속성이 없습니다.
console.log(result); // undefined 출력 (반환 값 없음)
자료 출처
