[TS] 타입 지정

Im-possible·2025년 4월 28일

TS

- 자바스크립트와 달리 함수 매개변수의 타입과 개수가 정확히 일치해야한다
- 매개 변수의 타입과 개수가 일치하지 않으면 타입 에러 발생(VSCode 상 빨간 밑줄)

함수에 타입 지정

매개 변수의 타입 지정

- 매개 변수명 뒤에 지정
const name: string = 'kim';
name = 123 // 타입 에러

const age: number = 20;

리턴 타입 지정

- 매개 변수 선언부 뒤에 지정
- 리턴 값이 없는 경우 void 지정
function fn(name: string): string{
  return 'Hello ' + name;
}

console.log(hello('TypeScript));

선택적 파라미터

- 함수의 매개 변수를 선택적으로 전달 받을 때 사용
- 매개 변수명 뒤에 `?` 추가
- 전달하지 않을 경우 undefined을 전달한다
- 지정한 타입 | undefined 로 설정된다
// age는 전달 해도, 안해도 된다.
function user(name: string, age?: number){
  console.log(name, age)
}

user('kim', 5);
user('lee'); // age는 undefined 전달

const job?: string = 'job'; // string | undefined 

console.log(job.toUpperCase()); // 타입 에러 발생
console.log(job?.toUpperCase()); // 정상 출력

유니언 타입

- 여러 종류의 타입을 허용하기 위해 |(OR 연산자)로 연결한 타입
- | 연산자로 연결된 타입 중 하나를 허용
// msg의 타입이 string OR number 중 하나여야한다.
function log(msg: string | number){
  console.log(msg);
}

log('hello');
log(123);

타입 가드

- 타입을 체크하기 위한 코드
- unknown의 경우 꺼낼 때 타입체크가 필요
// userName2 가 string 타입인지 체크
if(typeof userName2 === 'string'){
  console.log(userName2.toUpperCase()); 
}

0개의 댓글