반응형
Jake Seo
제이크서 위키 블로그
Jake Seo
전체 방문자
오늘
어제
  • 분류 전체보기 (715)
    • 일상, 일기 (0)
    • 백준 문제풀이 (1)
    • 릿코드 문제풀이 (2)
    • 알고리즘 이론 (10)
      • 기본 이론 (2)
      • 배열과 문자열 (8)
    • 데이터베이스 (15)
      • Planet Scale (1)
      • MSSQL (9)
      • 디비 기본 개념 (1)
      • SQLite 직접 만들어보기 (4)
    • 보안 (7)
    • 설계 (1)
    • 네트워크 (17)
      • HTTP (9)
      • OSI Layers (5)
    • 회고 (31)
      • 연간 회고 (2)
      • 주간 회고 (29)
    • 인프라 (52)
      • 도커 (12)
      • AWS (9)
      • 용어 (21)
      • 웹 성능 (1)
      • 대규모 서비스를 지탱하는 기술 (9)
    • 깃 (7)
    • 빌드 도구 (7)
      • 메이븐 (6)
      • 그레이들 (0)
    • Java (135)
      • 이펙티브 자바 (73)
      • 자바 API (4)
      • 자바 잡지식 (30)
      • 자바 디자인 패턴 (21)
      • 톰캣 (Tomcat) (7)
    • 프레임워크 (64)
      • next.js (14)
      • 스프링 프레임워크 (28)
      • 토비의 스프링 (6)
      • 스프링 부트 (3)
      • JPA (Java Persistence API) (5)
      • Nest.js (8)
    • 프론트엔드 (48)
      • 다크모드 (1)
      • 노드 패키지 관리 매니저 (3)
      • CSS (19)
      • Web API (11)
      • tailwind-css (1)
      • React (5)
      • React 새 공식문서 요약 (1)
      • HTML (Markup Language) (5)
    • 자바스크립트 (108)
      • 모던 자바스크립트 (31)
      • 개념 (31)
      • 정규표현식 (5)
      • 코드 스니펫 (1)
      • 라이브러리 (6)
      • 인터뷰 (24)
      • 웹개발자를 위한 자바스크립트의 모든 것 (6)
      • 팁 (2)
    • Typescript (49)
    • 리눅스와 유닉스 (10)
    • Computer Science (1)
      • Compiler (1)
    • IDE (3)
      • VSCODE (1)
      • IntelliJ (2)
    • 세미나 & 컨퍼런스 (1)
    • 용어 (개발용어) (16)
      • 함수형 프로그래밍 용어들 (1)
    • ORM (2)
      • Prisma (2)
    • NODEJS (2)
    • cypress (1)
    • 리액트 네이티브 (React Native) (31)
    • 러스트 (Rust) (15)
    • 코틀린 (Kotlin) (4)
      • 자바에서 코틀린으로 (4)
    • 정규표현식 (3)
    • 구글 애널리틱스 (GA) (1)
    • SEO (2)
    • UML (2)
    • 맛탐험 (2)
    • 리팩토링 (1)
    • 서평 (2)
    • 소프트웨어 공학 (18)
      • 테스팅 (16)
      • 개발 프로세스 (1)
    • 교육학 (1)
    • 삶의 지혜, 통찰 (1)
    • Chat GPT (2)
    • 쉘스크립트 (1)
    • 컴파일 (2)
    • Dart (12)
    • 코드팩토리의 플러터 프로그래밍 (4)
    • 플러터 (17)
    • 안드로이드 스튜디오 (1)
    • 윈도우즈 (1)
    • 잡다한 백엔드 지식 (1)
    • 디자인 패턴 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • next js app
  • 느린 쿼리
  • 자바스크립트 인터뷰
  • 프로그래머의 뇌
  • 자바
  • 참조 해제
  • 디자인패턴
  • 외래키 제약조건
  • rust
  • 스프링 검증
  • 메이븐 골
  • try-with-resources
  • 메이븐 페이즈
  • prerendering
  • 메이븐 라이프사이클
  • 플라이웨이트패턴
  • item8
  • Java
  • 추상 팩터리 패턴
  • 도커공식문서
  • 러스트
  • MSSQL
  • Javadoc 자바독 자바주석 주석 Comment
  • 싱글톤
  • serverless computing
  • 알고리즘
  • 자바스크립트 면접
  • NEXT JS
  • bean Validation
  • 서버리스 컴퓨팅
  • item9
  • 객체복사
  • 이펙티브 자바
  • 작업기억공간
  • 자바 검증
  • 자바스크립트
  • 싱글톤 패턴
  • 이펙티브자바
  • 이펙티브 자바 item9
  • 싱글턴
  • 팩터리 메서드 패턴
  • item7
  • 슬로우 쿼리
  • 자바 디자인패턴
  • 자료구조
  • pnpm
  • 빈 검증
  • Pre-rendering
  • 토비의 스프링
  • Next.js

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
Jake Seo

제이크서 위키 블로그

Typescript

TS005. 타입스크립트의 타입 추론 (type inference)

2023. 12. 27. 18:01

타입 추론 (Type Inference)

  • 타입스크립트에서 자체적으로 변수나 파라미터의 타입을 유추하는 기능

기본 타입 추론 예시

  • 아래의 코드에서는 :number 와 같이 타입을 지정해주지 않았음에도 타입스크립트가 스스로 타입을 추론함
let myNumber = 1000; // number 타입
let myBoolean = true; // boolean 타입
let myString = "jake"; // string 타입

myNumber = "JAKE"; // 기존에 number 로 추론된 타입에 문자열을 넣으려 하면 에러가 발생함

const 키워드가 붙었을 때의 타입 추론

  • const 키워드가 붙으면 let 키워드와 좀 다르게 상수로 타입을 추론함
  • const 로 선언된 상수는 변화할 일이 없으니 더 구체적인 타입이 추론됨
const stringLiteral: "string literal" = "string literal"; // "string literal" 문자열 자체가 타입 이름이 됨
const constBoolean: true = true; // true 자체가 타입 이름이 됨

오브젝트의 타입 추론

  • 오브젝트 내부의 프로퍼티도 타입 추론이 가능
  • 아래의 name 은 string, age 는 number 로 추론 가능함
const person1 = {
  name: "Jake",
  age: 20,
};

person1.name = "JACK"; // 같은 `string` 타입을 할당하기에 에러가 나지 않음

오브젝트의 프로퍼티를 const 로 캐스팅한다면?

  • 이전에 const 키워드가 붙었을 때의 타입추론과 동일하게 동작함
  • name 은 Jake 라는 타입이 되어버리고 age 는 20 이라는 타입이 되어버림
const person2 = {
  name: "Jake" as const,
  age: 20 as const,
};

person2.name = "JACK"; // 에러 ("Jake" 타입이기 때문에 "Jake" 만 할당 가능)

picture 0

배열 타입 추론

  • 배열 내부 원소 타입의 종류로 추론함
  • 숫자만 들어있으면 number[] 로 추론
  • 숫자와 문자가 둘 다 들어있으면 (number | string)[] 로 추론
let numbers = [1, 2, 3, 4, 5];
let numbersAndStrings = [1, 2, 3, "4", "5", "6"];

numbers.push("6"); // 에러 (number[] 타입에 문자열을 넣으려 함)
numbersAndStrings.push("7"); // 정상

배열 원소를 꺼내왔을 때의 타입

  • 배열 원소를 꺼내오면 기본적으로 배열의 타입을 그대로 받아옴
  • 이 때, 인덱스를 초과했는지 알 수는 없음
    • numbersAndStrings[100] 는 원소를 참조할 수 있는 인덱스를 초과했지만, 정적 분석 때 에러를 내주진 않음
const number = numbers[0]; // number
const inIndex = numbersAndStrings[0]; // number | string
const outOfIndex = numbersAndStrings[100]; // 정상, 인덱스 범위를 초과했는지 알지 못함

튜플

  • 튜플은 길이가 고정된 배열을 표현할 수 있는 타입이라고 보면 됨
  • 값 집합을 결합하고 싶은데 각 값의 유형이 다를 때 유용함
  • 튜플은 배열을 as const 로 묶어서 생성할 수도 있음
// 일반 튜플 생성
let myTuple: [string, number];
myTuple = ["Hello", 100];

// const readonly 튜플 생성
const twoNumbers = [1, 3] as const;
twoNumbers[0] = 2; // 에러
twoNumbers.push(100); // 에러 (read only 는 push 불가능)
const one = twoNumbers[0]; // 1이라는 타입이 됨
const three = twoNumbers[3]; // 에러, 튜플은 길이가 고정되어 인덱스 범위를 초과했는지 알 수 있음

picture 1

반응형
저작자표시 비영리 (새창열림)

'Typescript' 카테고리의 다른 글

TS007. 타입스크립트 Union 이란?  (0) 2023.12.28
TS006. 타입스크립트 타입 캐스팅 및 주의점  (0) 2023.12.27
TS004. 타입스크립트의 Enum 타입 간단하게 알아보기  (0) 2023.12.27
TS003. 타입과 인터페이스  (0) 2023.12.27
TS002. 자바스크립트의 기본(Primitive) 타입과 타입스크립트에만 있는 타입  (0) 2023.12.26
    'Typescript' 카테고리의 다른 글
    • TS007. 타입스크립트 Union 이란?
    • TS006. 타입스크립트 타입 캐스팅 및 주의점
    • TS004. 타입스크립트의 Enum 타입 간단하게 알아보기
    • TS003. 타입과 인터페이스
    Jake Seo
    Jake Seo
    ✔ 잘 보셨다면 광고 한번 클릭해주시면 큰 힘이 됩니다. ✔ 댓글로 틀린 부분을 지적해주시면 기분 나빠하지 않고 수정합니다. ✔ 많은 퇴고를 거친 글이 좋은 글이 된다고 생각합니다. ✔ 간결하고 명료하게 사람들을 이해 시키는 것을 목표로 합니다.

    티스토리툴바