타입스크립트 as 문법 예제

타입스크립트의 as 문법은 개발자가 특정 값의 타입을 정확히 알고 있을 때 사용하는 타입 단언(Type Assertion) 문법이다.

value as Type 형태로 작성하며, 타입스크립트가 해당 값을 지정한 타입으로 검사하도록 설정한다.

주로, DOM 요소, API 응답 데이터, unknown 타입 등을 구체적인 타입으로 다룰 때 사용한다.

만약, 잘못된 타입을 지정하면 실행 중 오류가 발생할 수 있으며, 실제 데이터 구조를 확인한 후 사용해야 한다.

'unknown' 형식의 값에서는 속성을 사용할 수 없습니다.

⊙

const value = data as string;

⊙

값 as 타입

⊙

const data: unknown = "Hello TypeScript";

const message = data as string;

console.log(message.length);

⊙

const data: unknown = 100;

const message = data as string;

// 컴파일러에는 string이라고 알려주었지만
// 실제 값은 여전히 숫자 100입니다.
console.log(typeof message); // "number"

⊙

const value = 123;

const assertion = value as unknown as string;
const conversion = String(value);

⊙

console.log(typeof assertion); // "number"
console.log(typeof conversion); // "string"

⊙

const numberValue = Number("100");
const stringValue = String(100);
const booleanValue = Boolean(1);

⊙

const input: unknown = "typescript";

const text = input as string;

console.log(text.toUpperCase());

⊙

const input: unknown = getExternalValue();

if (typeof input === "string") {
  console.log(input.toUpperCase());
}

⊙

interface User {
  id: number;
  name: string;
}

const data = {
  id: 1,
  name: "Kim",
};

const user = data as User;

console.log(user.name);

⊙

interface User {
  id: number;
  name: string;
}

const data = {
  id: 1,
};

const user = data as User;

console.log(user.name.toUpperCase());

⊙

type TextValue = string | number;

const value: TextValue = "100";

const text = value as string;

console.log(text.length);

⊙

function printValue(value: string | number) {
  if (typeof value === "string") {
    console.log(value.toUpperCase());
  } else {
    console.log(value.toFixed(2));
  }
}

⊙

const emailInput = document.querySelector("#email");

⊙

const emailInput = document.querySelector("#email");

console.log(emailInput.value);

⊙

const emailInput = document.querySelector(
  "#email",
) as HTMLInputElement | null;

if (emailInput) {
  console.log(emailInput.value);
}

⊙

const emailInput = document.querySelector(
  "#email",
) as HTMLInputElement | null;

console.log(emailInput?.value);

⊙

<input id="email" type="email" />

const element = document.querySelector(
  "#email",
) as HTMLInputElement | null;

if (!element) {
  throw new Error("이메일 입력 요소를 찾을 수 없습니다.");
}

element.value = "example@email.com";

⊙

const input = document.querySelector("#username");

input?.addEventListener("input", (event) => {
  const target = event.target as HTMLInputElement;

  console.log(target.value);
});

⊙

const input = document.querySelector("#username");

input?.addEventListener("input", (event) => {
  if (event.target instanceof HTMLInputElement) {
    console.log(event.target.value);
  }
});

⊙

interface User {
  id: number;
  name: string;
  email: string;
}

async function getUser() {
  const response = await fetch("/api/user/1");
  const data = (await response.json()) as User;

  return data;
}

⊙

interface User {
  id: number;
  name: string;
  email: string;
}

function isUser(value: unknown): value is User {
  if (typeof value !== "object" || value === null) {
    return false;
  }

  const user = value as Record<string, unknown>;

  return (
    typeof user.id === "number" &&
    typeof user.name === "string" &&
    typeof user.email === "string"
  );
}

async function getUser(): Promise<User> {
  const response = await fetch("/api/user/1");
  const data: unknown = await response.json();

  if (!isUser(data)) {
    throw new Error("사용자 응답 형식이 올바르지 않습니다.");
  }

  return data;
}

⊙

const direction = "left" as const;

⊙

let direction = "left";
// string

⊙

const direction = "left" as const;
// "left"

⊙

const settings = {
  theme: "dark",
  language: "ko",
} as const;

⊙

const coordinates = [10, 20] as const;

⊙

function request(
  method: "GET" | "POST",
  url: string,
) {
  console.log(method, url);
}

const options = {
  method: "GET",
  url: "/api/users",
} as const;

request(options.method, options.url);

⊙

const value: unknown = "hello";

const text = <string>value;