◆ 11. Using Types
- number
- string: ' ', " ",
- boolean
app.ts
function add(n1: number, n2: number) {
return n1 + n2;
}
const number1 = 5;
const number2 = 2.8;
const result = add(number1, number2);
console.log(result); // 7.8함수의 매개변수에 타입을 지정하여 컴파일 시 오류를 예방할 수 있습니다.
예를 들어 number1에 문자열이 넘어가면 타입 오류가 발생합니다. 이는 개발 중에만 확인이 가능하고, 컴파일된 JS에서는 오류가 발생하지 않습니다.
◆ 12. TypeScript 타입 vs. JavaScript 타입
- JavaScript : 동적 타입 언어.
typeof를 통해 타입을 확인할 수 있지만, 이는 실행 중에만 확인할 수 있습니다. - TypeScript : 정적 타입 언어. 개발 중에 타입 오류를 미리 확인할 수 있습니다.
function add(n1: number, n2: number) {
if (typeof n1 !== 'number' || typeof n2 !== 'number') {
throw new Error('Incorrect input!');
}
return n1 + n2;
}
const number1 = '5';
const number2 = 2.8;
const result = add(number1, number2);
console.log(result);◆ 13. 중요: 타입 케이스
TypeScript에서는 기본 타입을 소문자로 작성합니다. 예를 들어, string, number, boolean, symbol, undefined, null, bigint 등은 원시 타입입니다.
◆ 14. 숫자, 문자열 및 불리언 작업하기
TypeScript와 JavaScript에서는 기본적으로 모든 숫자가 실수(float)로 취급됩니다.
function add(n1: number, n2: number, showResult: boolean, phrase: string) {
const result = n1 + n2;
if (showResult) {
console.log(phrase + result);
} else {
return result;
}
}
const number1 = 5;
const number2 = 2.8;
const printResult = true;
const resultPhrase = 'Result is : ';
add(number1, number2, printResult, resultPhrase);
◆ 15. 타입 할당 및 타입 추론하기
TypeScript는 타입을 명시적으로 지정하지 않아도 타입 추론을 통해 값을 기반으로 타입을 추론합니다. 추론한 타입에 맞지 않는 값을 할당하면 오류가 발생합니다.
const number1 = 5; // TypeScript는 `number`로 타입을 추론합니다.◆ 16. 객체 타입
객체를 다룰 때, object 타입을 사용하면 객체에 대한 속성 정보를 알 수 없습니다. 따라서 더 구체적인 객체 타입을 정의해야 합니다.
const person: object = {
name: 'Maximilian',
age: 30
};
// person.nickname을 호출하면 오류 발생객체에 대해 정확한 타입을 정의할 수 있습니다.
const person: { name: string; age: number } = {
name: 'Maximilian',
age: 30
};
◆ 중첩된 객체 및 타입
객체 안에 또 다른 객체가 있을 경우 중첩된 타입을 정의할 수 있습니다.
const product = {
id: 'abc1',
price: 12.99,
tags: ['great-offer', 'hot-and-new'],
details: {
title: 'Red Carpet',
description: 'A great carpet - almost brand-new!'
}
};◆ 18. 배열 타입
각 요소의 타입을 명시할 수 있습니다.
const person = {
name: 'Maximilian',
age: 30,
hobbies: ['Sports', 'Cooking']
};
let favoriteActivities: string[];
favoriteActivities = ['Sports'];
for (const hobby of person.hobbies) {
console.log(hobby);
}◆ 19. 튜플(Tuple) 작업하기
튜플은 고정된 크기와 타입을 가지는 배열입니다. [1, 'Max']와 같은 형태로 숫자와 문자열을 동시에 다룰 수 있습니다.
const person = {
name: 'Maximilian',
age: 30,
role: [2, 'author'] // 튜플 타입
};◆ 20. 열거형(Enum) 사용하기
고정된 값들에 대한 이름을 부여하는 방법입니다. 이는 코드에서 숫자를 사람이 읽을 수 있는 이름으로 변환하는 데 유용합니다.
enum Role { ADMIN = 5, READ_ONLY, AUTHOR }; // = 5와 같이 시작값을 지정할 수 있다.
const person = {
name: 'Maximilian',
age: 30,
role: Role.ADMIN
};◆ 21. Any 타입
any 타입은 어떤 타입도 할당할 수 있게 해줍니다. 하지만 가능한 사용을 피하는 것이 좋습니다.
any는 TypeScript의 타입 안정성을 무효화합니다.
let favoriteActivities: any[];
favoriteActivities = ['Sports', 5];◆ 22. 조합 타입(유니언 타입)
하나 이상의 타입을 합쳐서 사용합니다. 예를 들어, 숫자나 문자열을 모두 받을 수 있는 매개변수를 정의할 때 사용합니다.
function combine(input1: number | string, input2: number | string) {
let result;
if (typeof input1 === 'number' && typeof input2 === 'number') {
result = input1 + input2;
} else {
result = input1.toString() + input2.toString();
}
return result;
}◆ 23. 리터럴 타입
특정 값만 허용하는 타입입니다.
예를 들어, resultConversion이 'as-number'나 'as-text'만 허용하도록 제한할 수 있습니다.
function combine(input1: number | string, input2: number | string, resultConversion: 'as-number' | 'as-text') {
let result;
if (typeof input1 === 'number' && typeof input2 === 'number') {
result = input1 + input2;
} else {
result = input1.toString() + input2.toString();
}
if (resultConversion === 'as-number') {
return +result;
} else {
return result.toString();
}
}
◆ 24. 타입 알리어스 / 사용자 정의 타입
type 키워드를 사용하면 새로운 타입을 정의할 수 있습니다. 이를 통해 코드가 더 깔끔하고 재사용 가능해집니다.
type Combinable = number | string;
type ConversionDescriptor = 'as-number' | 'as-text';
function combine(input1: Combinable, input2: Combinable, resultConversion: ConversionDescriptor) {
let result;
if (typeof input1 === 'number' && typeof input2 === 'number') {
result = +input1 + +input2;
} else {
result = input1.toString() + input2.toString();
}
if (resultConversion === 'as-number') {
return +result;
} else {
return result.toString();
}
}◆ 25. 타입 알리어스 및 객체 타입
타입 알리어스를 사용하여 객체 타입에도 별칭을 만들 수 있습니다.
type User = { name: string; age: number };
const u1: User = { name: 'Max', age: 30 };◆ 26. 함수 반환 타입 및 무효(void)
함수의 반환 타입은 명시적으로 설정할 수 있으며, 반환하지 않으면 void를 사용합니다.
function add(n1: number, n2: number) {
return n1 + n2;
}
function printResult(num: number): void {
console.log('Result: ' + num);
}
printResult(add(5, 12)); // Result : 17
console.log(printResult(add(5, 12))); // undefined- void는 명시적으로 이 함수에 반환 구문이 없다고 알려줍니다.
- undefined는 TypeScript에서 반환 구문이 있지만 아무것도 반환하지 않는다고 이해합니다.
◆ 27. 타입의 기능을 하는 함수
TypeScript에서 Function 타입은 매개변수와 반환 값의 타입을 함께 정의할 수 있습니다.
- any 타입 : 모든 값에 할당할 수 있어 컴파일 오류가 발생하지 않지만, 런타임에서 타입 오류가 발생할 수 있습니다.
- Function 타입 : 함수가 어떤 함수인지 정확하게 지정할 수 없으며, 매개변수와 반환 타입을 명확히 정의해야 합니다.
let combineValues: (a: number, b: number) => number;
combineValues = add;
console.log(combineValues(8, 8)); // 16◆ 28. 함수 타입 및 콜백
함수 안에서 콜백을 사용하는 경우 TypeScript는 콜백 함수의 반환 타입을 추론합니다.
콜백 함수가 void로 선언된 경우 반환값을 무시하도록 설정할 수 있습니다.
function addAndHandle(n1: number, n2: number, cb: (num: number) => void) {
const result = n1 + n2;
cb(result); // 콜백 함수 실행
}
addAndHandle(10, 20, (result) => {
console.log(result); // 콜백 함수에서 반환값은 없고, result는 number 타입임.
});콜백에서 반환 타입 무시 : addAndHandle 함수의 콜백 타입이 void로 지정되어 있기 때문에 콜백 내에서 값을 반환하더라도 TypeScript는 이를 허용합니다.
◆ 29. 알 수 없는 타입 (unknown)
모든 타입을 받을 수 있지만, any와 다르게 타입을 체크할 때 반드시 타입 검사를 거쳐야 합니다.
즉, unknown은 타입 안정성을 유지하면서도 어떤 타입이든 받을 수 있는 유연성을 제공합니다.
let userInput: unknown; // 입력값을 알 수 없음
let userName: string;
userInput = 'Max';
if (typeof userInput === 'string') {
userName = userInput; // 오류 없음, 타입 검사 후 할당 가능
}unknown은 any와 비슷하지만 할당 시에 타입 검사를 강제하여 오류를 줄일 수 있습니다.
◆ 30. 절대 타입 (never)
결코 값을 반환하지 않는 함수를 나타내며, 보통 throw 또는 무한 루프에서 사용됩니다. void와는 다르게 never는 함수가 어떤 값을 절대로 반환하지 않는다는 의미를 가집니다.
function generateError(message: string, code: number): never {
throw { message: message, errorCode: code }; // 절대로 반환되지 않음
}generateError 함수는 throw를 통해 오류를 발생시키므로, 함수의 실행은 종료되며 아무 값도 반환하지 않게 됩니다. 따라서 이 함수는 never를 반환한다고 명시할 수 있습니다.