typeof 타입 연산자
typeof로 런타임 값의 타입을 가져옵니다.
typeof 타입 연산자은(는) CoddyKit의 무료 TypeScript Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 TypeScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
값에서 타입 만들기
typeof 타입 연산자는 실행 시 값에서 정적 타입을 도출합니다. 값을 한 번 작성하고 그 구조를 타입으로 재사용할 수 있으므로 두 가지를 완전히 일치시킬 수 있습니다.
서로 다른 typeof
둘을 혼동하지 마십시오. JavaScript의 typeof는 실행 시 문자열을 반환하지만, TypeScript의 typeof는 타입 위치에 나타나 타입을 만듭니다. 같은 키워드지만 서로 다른 세계에서 동작합니다.
const n = 42
console.log(typeof n) // "number" — JS runtime
type T = typeof n // number — TS type position변수의 타입 캡처하기
타입 주석에서 값 앞에 typeof를 배치하면 해당 값에서 추론된 타입을 캡처할 수 있습니다. 여기서 T는 string이 됩니다.
const greeting = "hello"
type G = typeof greeting // string
const another: G = "world"
console.log(another)객체의 구조 캡처하기
const 객체에 typeof를 적용하면 직접 인터페이스를 작성하지 않아도 객체의 전체 추론 구조를 얻을 수 있습니다.
const config = { host: "localhost", port: 8080 }
type Config = typeof config // { host: string; port: number }
const c: Config = { host: "127.0.0.1", port: 3000 }
console.log(c)추론에서는 기본적으로 타입 범위가 넓어집니다
도움 없이는 TypeScript가 리터럴을 더 넓은 타입으로 확장합니다. port: 8080은 리터럴 8080이 아니라 number가 됩니다. 대부분의 경우에는 괜찮지만, 때로는 정확한 값을 보존하고 싶을 수 있습니다.
const settings = { mode: "dark" }
type S = typeof settings // { mode: string }
const x: S = { mode: "anything" }
console.log(x)as const와 함께 사용하는 typeof
값을 가장 좁은 리터럴 타입으로 고정하려면 as const를 추가하십시오. 이제 typeof는 정확한 리터럴을 캡처하고 모든 항목을 readonly로 표시합니다.
const settings = { mode: "dark" } as const
type S = typeof settings // { readonly mode: "dark" }
const x: S = { mode: "dark" }
console.log(x)배열에서 리터럴 타입 만들기
as const를 사용하면 배열에 typeof를 적용했을 때 리터럴 타입으로 이루어진 읽기 전용 튜플을 얻습니다. 이는 값의 유니언을 도출하는 기본 구성 요소입니다.
const roles = ["admin", "editor", "viewer"] as const
type Roles = typeof roles // readonly ["admin", "editor", "viewer"]
console.log(roles[0])값의 유니언 도출하기
typeof를 [number]를 사용한 인덱스 접근과 결합하면 상수 배열을 그 값들의 유니언 타입으로 바꿀 수 있습니다.
const roles = ["admin", "editor", "viewer"] as const
type Role = typeof roles[number] // "admin" | "editor" | "viewer"
const r: Role = "editor"
console.log(r)함수에 typeof 적용하기
함수의 타입도 캡처할 수 있습니다. 래퍼의 타입을 지정하거나 다른 곳에서 시그니처를 재사용할 때 유용합니다.
function add(a: number, b: number) { return a + b }
type AddFn = typeof add // (a: number, b: number) => number
const myAdd: AddFn = (x, y) => x + y
console.log(myAdd(2, 3))타입을 동기화된 상태로 유지하기
가장 큰 장점은 구성이나 상수를 값으로 한 번 정의한 다음 typeof로 타입을 도출할 수 있다는 점입니다. 값을 변경하면 타입도 자동으로 업데이트되므로 중복이 없습니다.
const defaults = { retries: 3, timeout: 1000 }
type Defaults = typeof defaults
function apply(opts: Defaults) { return opts.retries }
console.log(apply(defaults))식별자에서만 작동합니다
typeof 타입 연산자는 임의의 표현식이 아니라 식별자나 속성 경로를 받습니다. typeof (a + b)는 허용되지 않습니다.
const obj = { user: { name: "Ada" } }
type Name = typeof obj.user.name // string
const n: Name = "Leo"
console.log(n)빠른 확인
typeof 타입 연산자에 대한 이해도를 테스트해 보십시오.
복습
typeof 타입 연산자는 타입 위치에서 변수, 객체, 배열 또는 함수 같은 값으로부터 타입을 도출합니다. 기본적으로 리터럴의 범위는 넓어지지만, as const를 추가하면 정확한 리터럴 타입을 읽기 전용으로 캡처할 수 있습니다. 인덱스 접근(typeof arr[number])과 결합하면 값의 유니언을 얻을 수 있습니다. 값에서 타입을 도출하면 단일 기준을 유지하고 구조를 중복해서 작성하지 않아도 됩니다.
자주 묻는 질문
“typeof 타입 연산자” 강의는 무료인가요?
네 — “typeof 타입 연산자” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 TypeScript Academy 강의 전체를 잠금 해제할 수 있습니다. TypeScript Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“typeof 타입 연산자”에서 뭘 배우나요?
typeof로 런타임 값의 타입을 가져옵니다. 브라우저에서 직접 실행하는 실습 코드로 TypeScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
TypeScript Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 TypeScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“typeof 타입 연산자” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 TypeScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 TypeScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- typeof 타입 연산자
- keyof 타입 연산자
- 인덱스 접근 타입
- typeof와 keyof 결합