소개
Typescript는 자바스크립트의 상위 집합 언어로, 정적 타입을 지원하여 개발자가 코드를 더욱 안정적으로 작성할 수 있게 도와줍니다. 하지만 Typescript의 타입 정의 방법은 처음 접하는 사람들에게는 낯설 수 있습니다. 이 블로그 포스트에서는 Typescript의 타입 정의 방법을 예시 코드와 함께 자세히 알아보겠습니다.
본문
1. 기본 타입 정의
Typescript에서 변수의 타입을 정의하는 가장 기본적인 방법은 콜론(:)을 사용하는 것입니다. 예를 들어, 다음과 같이 변수의 타입을 명시할 수 있습니다.
let name: string = 'John';
let age: number = 25;
let isStudent: boolean = true;
2. 배열 타입 정의
배열의 타입을 정의할 때는 변수명 뒤에 대괄호([])를 사용합니다. 예를 들어, 다음과 같이 배열의 타입을 명시할 수 있습니다.
let numbers: number[] = [1, 2, 3, 4, 5];
let names: string[] = ['John', 'Jane', 'Alice'];
3. 객체 타입 정의
객체의 타입을 정의할 때는 중괄호({})를 사용합니다. 예를 들어, 다음과 같이 객체의 타입을 명시할 수 있습니다.
let person: { name: string, age: number } = {
name: 'John',
age: 25
};
4. 함수 타입 정의
함수의 타입을 정의할 때는 매개변수와 반환값의 타입을 명시합니다. 예를 들어, 다음과 같이 함수의 타입을 명시할 수 있습니다.
function add(x: number, y: number): number {
return x + y;
}
5. 인터페이스를 이용한 타입 정의
인터페이스를 사용하여 복잡한 타입을 정의할 수도 있습니다. 예를 들어, 다음과 같이 인터페이스를 이용하여 객체의 타입을 정의할 수 있습니다.
interface Person {
name: string;
age: number;
}
let person: Person = {
name: 'John',
age: 25
};
6. 제네릭 타입 정의
제네릭을 사용하여 타입을 동적으로 정의할 수도 있습니다. 예를 들어, 다음과 같이 제네릭을 이용하여 배열의 타입을 정의할 수 있습니다.
let numbers: Array<number> = [1, 2, 3, 4, 5];
7. 유니온 타입 정의
유니온 타입을 사용하여 여러 타입 중 하나를 선택할 수 있습니다. 예를 들어, 다음과 같이 유니온 타입을 이용하여 변수의 타입을 정의할 수 있습니다.
let value: string | number = 'Hello';
value = 10;
8. 타입 별칭 정의
타입 별칭을 사용하여 타입에 이름을 부여할 수 있습니다. 예를 들어, 다음과 같이 타입 별칭을 이용하여 객체의 타입을 정의할 수 있습니다.
type Person = {
name: string;
age: number;
};
let person: Person = {
name: 'John',
age: 25
};
9. 클래스 타입 정의
클래스의 타입을 정의할 때는 클래스 이름을 사용합니다. 예를 들어, 다음과 같이 클래스의 타입을 명시할 수 있습니다.
class Person {
name: string;
age: number;
}
let person: Person = new Person();
person.name = 'John';
person.age = 25;
10. 모듈 타입 정의
모듈의 타입을 정의할 때는 export 키워드를 사용합니다. 예를 들어, 다음과 같이 모듈의 타입을 명시할 수 있습니다.
export interface Person {
name: string;
age: number;
}
let person: Person = {
name: 'John',
age: 25
};
결론
이 블로그 포스트에서는 Typescript의 타입 정의 방법을 예시 코드와 함께 알아보았습니다. 기본 타입부터 복잡한 타입까지 다양한 방법을 사용하여 변수, 배열, 객체, 함수 등의 타입을 정의할 수 있습니다. Typescript의 타입 정의 방법을 숙지하면 코드의 가독성과 안정성을 높일 수 있으며, 개발 과정에서 발생할 수 있는 오류를 사전에 방지할 수 있습니다.
'FrontEnd > TypeScript' 카테고리의 다른 글
Typescript와 함께 알아보는 Context API 사용방법 (0) | 2023.06.23 |
---|---|
아직도 이거 모르니? 예시코드와 함께 알아보는 Typescript React Hook (0) | 2023.06.23 |
아직도 이거 모르니? 예시코드와 함께 알아보는 Typescript 키워드 TOP 10! (0) | 2023.06.23 |
예시코드와 함께 알아보는 타입스크립트 디자인패턴: 옵저버 패턴 (0) | 2023.06.22 |
예시코드와 함께 알아보는 타입스크립트 디자인패턴: 싱글톤 패턴 (0) | 2023.06.22 |