타입스크립트 (2) 기본 사용 방법

2022. 12. 20. 13:47·개발/Typescript

1. 타입 선언

타입스크립트는 변수 뒤에 타입을 명시할 수 있습니다.

let foo: string = 'hello';

타입과 다른 값이 할당되면 컴파일 시점에 에러가 발생합니다.

let bar: number = true; //error

함수의 경우에는 다음과 같이 매개변수와 반환값의 타입을 지정할 수 있습니다.

// 함수 선언식
function plus(x: number, y: number): number {
  return x + y;
}

// 함수 표현식
const plus = (x: number, y:number): number => x + y;

타입스크립트는 자바스크립트의 타입을 모두 사용할 수 있으며 다음과 같은 추가 타입을 제공합니다.

타입 설명
array 배열
tuple 배열에 고정된 아이템 수를 갖는 경우
enum 열거형. 숫자 집합에 이름을 지정
any 타입 추론을 할 수 없거나 체크가 필요 없어 모든 타입 할당 가능.
void 함수 반환값이 없을 때 사용
never 결코 발생하지 않는 값

2. 정적 타이핑

정적 타이핑이란 변수를 선언할 때 변수에 할당할 값의 유형을 명시적으로 선언하는 것을 의미합니다.

자바스크립트는 동적 타입(또는 느스한 타입)의 언어여서 동적으로 타입을 추론합니다. 이는 사용성이 좋지만 예상치 못한 오류가 발생할 수도 있습니다.

정적 타이핑을 사용하면 코드 가독성, 예측성, 안전성이 향상되어 대규모 프로젝트에 적합합니다.

3. 타입 추론

타입 추론은 타입스크립트에서 타입을 별도로 명시하지 않을 때 동적으로 타입이 결정되는 것입니다. 아래와 같이 타입을 지정하지 않고 값을 할당할 경우 변수의 타입이 자동으로 결정됩니다.

let foo = 123; //number type
foo = 'Hello'; //error

그러나 이는 타입스크립트의 장점을 없애는 것이기 때문에 사용하지 않는 것이 좋습니다.

4. 타입 캐스팅

기존의 타입에서 다른 타입으로 캐스팅하려면 as 또는 <>를 사용할 수 있습니다.

 

다음과 같이 querySelector() 메소드를 통해 요소를 선택하는 코드가 있다고 해보겠습니다.

let input = document.querySelector('input["type="text"]');

메소드를 통한 결과값의 유형은 Element 타입이며 따라서 다음 코드는 에러가 발생합니다.

console.log(input.value);

이는 Element 타입에는 value 속성이 없기 때문입니다. 이는 HTMLInputElement 타입에만 존재합니다. 이 때는 다음과 같이 타입캐스팅을 통해 문제를 해결할 수 있습니다.

let input = document.querySelector('input[type="text"]') as HTMLInputElement;

이제 input 변수는 HTMLInputElement 타입이 되어 input.value를 사용할 수 있게 됩니다.

<>를 사용하여 동일하게 타입 캐스팅을 할 수 있습니다.

let input = <HTMLInputElement>document.querySelector('input[type="text"]');

그러나 이와 같은 타입 단언 as Type 보다는 타입 선언 : Type을 사용하는 것이 런타임 오류를 방지할 수 있어 더 좋습니다.

 

참고 자료

  • https://poiemaweb.com/typescript-typing
  • https://www.typescripttutorial.net/typescript-tutorial/type-casting/

'개발 > Typescript' 카테고리의 다른 글

타입스크립트 (1) 타입스크립트란?  (0) 2022.12.20
타입스크립트 (3) 클래스 설명 및 사용 방법  (0) 2022.10.13
'개발/Typescript' 카테고리의 다른 글
  • 타입스크립트 (1) 타입스크립트란?
  • 타입스크립트 (3) 클래스 설명 및 사용 방법
휘Hwi
휘Hwi
여행, 사진, 개발, 책 이야기를 기록하는 여행자 휘의 블로그 𓂍
마이리얼트립 프로모션 할인 🏝️
마이리얼트립 호텔 예약 배너
※ 배너를 클릭하여 상품 구매 시, 파트너스 활동에 대한 소정의 수수료를 지급받습니다. 구매자에게 추가로 부과되는 수수료는 없습니다.
  • 휘Hwi
    휘: 끝나지 않은 이야기
    휘Hwi
  • 전체
    오늘
    어제
    • 분류 전체보기 N
      • 기록
        • 일상 에세이
        • 인사이트
        • 투자와 재테크
        • 코인 이야기
        • 아카이빙
        • 집무실 레터
        • 사랑에 대하여
        • 번역 이야기(完)
        • 프리랜서 일지(完)
      • 여행 N
        • 🌎 세계 여행기 S1 (完)
        • 🌊 삼삼한 여행기 (完)
        • 🚶 온더로드
        • 🇯🇵 일본
        • 🏝️ 발리
        • 🇻🇳 베트남 N
        • 🇱🇰 스리랑카
        • 🇮🇳 인도
        • 🇹🇭 태국
        • 🇸🇬 싱가포르
        • 🇦🇺 호주
        • 🇭🇰 홍콩
        • 🇰🇷 한국
        • 🍚 여행자의 한 끼
        • ℹ️ 여행 정보
      • 사진
        • 사진가
        • 사진 이론과 생각
        • 사진 관련 정보
      • 영상
        • 파이널컷 모션 공부
        • 고프로 GoPro
        • 영상 관련 정보
      • 책
        • 책 읽고 쓰기
      • 개발
        • 티스토리
        • Internet
        • HTML
        • CSS
        • JavaScript
        • Typescript
        • React
        • Node.js
        • Express
        • NestJS
        • Python
        • Django
        • MySQL
        • MongoDB
        • AWS
        • Deployment
        • Terminal
        • Git
        • Glossaries
        • Articles
        • Projects
        • TIL;
      • 미분류
  • 인기 글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
휘Hwi
타입스크립트 (2) 기본 사용 방법
상단으로

티스토리툴바