🦮함수 선언과 반환 타입 명시
함수를 TypeScript에서 선언할 때에는 매개변수의 타입과 반환 타입을 명시할 수 있고, 이를 통해 타입 에러를 방지할 수 있습니다.
function abPlus(a: number, b: number): number {
return a + b;
}
위의 예시에서 abPlus 함수는 a와 b라는 두 개의 매개변수를 받으며, 반환 타입으로 number를 가지고 있습니다. 예시와 같이 함수의 반환 타입을 명시하면 TypeScript 컴파일러가 해당 함수의 반환 값의 타입을 검사합니다.
위의 예시를 화살표 함수로 작성하면 다음과 같습니다.
const abPlus = (a: number, b: number): number => a + b;함수가 한 줄의 표현식인 경우에는 중괄호{}와 return을 생략할 수 있습니다.
TypeScript 컴파일러란?
TypeScript 컴파일러는 TypeScript 코드를 JavaScript 코드로 변환해주는 도구입니다.
TypeScript는 브라우저에서 직접 실행되지 않기 때문에 TypeScript를 JavaScript로 변환하는 과정을 거쳐야 합니다.
설치
컴파일러를 사용하기 위해서는 먼저 TypeScript를 설치해야 합니다.
npm install -g typescript
컴파일
.ts 확장자로 작성된 TypeScript 파일을 생성한 후, 터미널에서 다음 명령을 사용합니다.
tsc 파일이름.ts
이렇게 하면 파일이름.js 파일이 생성됩니다.
실시간 컴파일
tsc --watch
해당 명령어는 실시간으로 TypeScript 파일을 컴파일합니다.
🦮선택적 매개변수
함수 매개변수를 선택적으로 사용하기 위해 ?를 사용합니다.
function message(name: string, age?: number): string {
if (age !== undefined) {
return `Hello ${name} You are ${age} years old`;
} else {
return `Hello ${name}`;
}
}
// 화살표 함수는 다음과 같습니다
const message = (name: string, age?: number): string => {
if (age !== undefined) {
return `Hello, ${name} You are ${age} years old.`;
} else {
return `Hello, ${name}`;
}
};🦮기본 매개변수
매개변수에 기본 값을 다음과 같이 할당할 수 있습니다.
function clg(message: string = "Hello world"): void {
console.log(message);
}
//화살표 함수는 다음과 같습니다
const clg = (message: string = "Hello world"): void => {
console.log(message);
};🦮함수 타입이란?
TypeScript에서 함수 타입은 함수의 시그니처를(매개변수의 타입, 반환 값의 타입) 정의하는 방법입니다.
예시는 다음과 같습니다.
type PlusNumber = (x: number, y: number) => number;
const add: PlusNumber = (a, b) => a + b;
const subtract: PlusNumber = (a, b) => a - b;
- PlusNumber는 함수 타입을 나타내는 타입 별칭입니다. x와 y 매개변수를 받고 number 타입 값을 반환하는 함수를 나타냅니다.
- add 상수는 PlusNumber 함수 타입을 따르는 화살표 함수로 정의되어 있습니다.
- subtract 상수 역시 PlusNumber 함수 타입을 따르는 화살표 함수로 정의되어 있습니다.
함수 타입의 장점
- 타입 안전성: 함수 타입을 사용하면 함수가 올바른 매개변수 타입과 반환 타입을 가지도록 할 수 있습니다.
- 가독성: 함수 타입은 함수의 시그니처를 명시적으로 보여주므로 코드의 가독성을 높입니다.
- 인터페이스와 결합: 함수 타입은 인터페이스와 함께 사용하여 함수의 재사용성을 높일 수 있습니다.
인터페이스란?
인터페이스(Interface)는 TypeScript에서 객체의 구조를 정의하기 위한 것으로, 재사용 가능한 코드를 작성할 수 있습니다.
예를들어 다음과 같이 사용할 수 있습니다.
interface Person {
name: string;
age: number;
message?: string;
}
const Taeyoon: Person = {
name: "Taeyoon",
age: 20
};
const Taemin: Person = {
name: "Taemin",
age: 21,
message: "Hello, my name is Taemin"
};인터페이스의 장점
- 타입 검사 및 안전성: 객체가 인터페이스의 형태와 일치하는지 TypeScript 컴파일러가 검사를 수행합니다.
- 가독성: 코드에서 객체의 속성과 메소드가 어떻게 사용되어야 하는지 명시해줍니다.
- 재사용성: 인터페이스를 여러 객체나 함수에서 활용하여 일관성 있는 코드를 작성할 수 있습니다.
