타입 명시해 주는 방법
- 함수명 = (인자 : 인자 타입) : 리턴값 타입 => 실행 내용
- 함수의 리턴값이 없는 경우 void로 넣어주면 된다
const calculateArea = (radius: number): number => Math.PI * radius * radius;
const radius = 5;
const area = calculateArea(radius);
console.log(`반지름이 ${radius}인 원의 넓이: ${area}`);
boolean
function isValidPassword(password: string): boolean {
return password.length >= 8;
}
const password = "q1w2e3r4!";
const valid = isValidPassword(password);
if (valid) {
console.log("유효한 패스워드입니다!");
} else {
console.log("유효하지 않은 패스워드입니다!");
}
number
function calculateArea(radius: number): number {
return Math.PI * radius * radius;
}
const radius = 5;
const area = calculateArea(radius);
console.log(`반지름이 ${radius}인 원의 넓이: ${area}`);
string
function greet(name: string): string {
return `안녕, ${name}!`;
}
const name = "Spartan";
const greeting = greet(name);
console.log(greeting);
배열
function calculateSum(numbers: number[]): number {
let sum: number = 0;
for (let i = 0; i < numbers.length; i++) {
sum += numbers[i];
}
return sum;
}
const testScores: number[] = [90, 85, 78, 92, 88];
const sumScore = calculateSum(testScores);
console.log(`점수의 총합: ${sumScore}`);
tuple(튜플)
- 튜플은 서로 다른 타입의 원소를 순서에 맞게 가질 수 있는 특수한 형태의 배열
- 배열은 같은 타입의 원소만 가질 수 있으나 튜플은 어떤 타입의 원소를 허용할지 정의만 해주면 다른 타입의 원소를 같이 사용할 수 있다
- 정의된 데이터 타입의 개수와 순서에 맞춰 저장해야 한다
const person: [string, number, boolean] = ['Spartan', 25, false];
const person2: [string, number, boolean] = [25, 'Spartan', false]; // 오류!
enum
- 열거형 데이터 타입 (특정 값들의 집합을 정의하는 데이터 타입)
- enum 안에 있는 각 요소는 값이 설정되어 있지 않으면 기본적으로 숫자 0으로 시작한다
- enum 안에 있는 요소에는 number 혹은 string타입의 값만 할당할 수 있다
// number
enum Direction {
Up, // 0
Down, // 1
Left, // 2
Right // 3
}
// 열거형을 사용하여 변수에 값 할당
const playerDirection: Direction = Direction.Up;
console.log(playerDirection); // 출력: 0 (Up)
playerDirection = Direction.Right;
console.log(playerDirection); // 출력: 3 (Right)
// string
enum Color {
Red = 'red',
Green = 'green',
Blue = 'blue'
}
// 열거형을 사용하여 변수에 값 할당
let userColor: Color = Color.Red;
console.log(userColor); // 출력: 'red'
userColor = Color.Green;
console.log(userColor); // 출력: 'green'
readonly
- 함수형 컴포넌트의 읽기 전용(readonly)으로 선언하면 컴포넌트가 props를 변경할 수 없고 렌더링만 할 수 있다
import React from 'react';
interface Props {
readonly message: string; // message props를 readonly로 선언
}
const MyFunctionalComponent: React.FC<Props> = ({ message }) => {
return <div>{message}</div>;
};
export default MyFunctionalComponent;
any
- TypeScript의 모든 타입, 어떤 값이든 저장할 수 있다
- 타입안정성을 잃게 될 수 있음으로 되도록 사용을 지양하는 것이 좋다
const myNumber: any = 10; // 숫자
const myString: any = "Hello, TypeScript!"; // 문자
const isTrue: any = true; // 논리형
unknown
- 모든 타입의 값을 저장할 수 있다, 하지만 그 값을 다른 타입의 변수에 할당하려면 명시적으로 타입을 확인해야 한다
- 가변적인 타입의 데이터를 저장할 때 사용한다
- 재할당이 일어나지 않으면 타입 안전성이 보장되지 않는다
- 변수 userInput에는 숫자, 문자, 논리형이 모두 할당되어 있으나 재 할당 시 타입을 명시해줘야 한다
const userInput: unknown;
userInput = 5;
userInput = "Hello";
userInput = true;
// unknown 타입은 다른 타입으로 할당할 수 있지만, 타입을 알지 못하기 때문에 사용할 수 없음
const myNumber: number = userInput; // 오류 발생
// unknown 타입에 as를 사용해 구체적인 타입을 명시해준다
myNumber = userInput as number;
// typeof 키워드를 이용하여 타입 체크 후 사용한다
if (typeof userInput === "number") {
myNumber = userInput; // 이제 오류가 발생하지 않음
}
union
- 두 개 이상의 타입을 허용하는 변수를 선언할 때 사용되며 변수가 여러 가지 타입 중 하나일 수 있음을 명시적으로 표현할 수 있다
- | (OR) 연산자를 사용하여 여러 타입을 결합하여 표현한다
- 변수 myVariable은 문자 또는 숫자 타입을 명시하기 때문에 문자, 숫자 값 중 하나를 할당할 수 있다
// Union 타입을 사용하여 문자열 또는 숫자 값을 가지는 변수 선언
let myVariable: string | number;
// 문자열 값 할당
myVariable = "Hello";
console.log(myVariable); // 출력: Hello
// 숫자 값 할당
myVariable = 123;
console.log(myVariable); // 출력: 123
