Over Tech

타입스크립트( Typescript )의 타입 가드( Type Guard )는 특정 값의 타입을 검사하여, 조건문 내부의 값을 구체적이고 명확한 타입으로 안전하게 좁혀 사용하는 방법이다. 타입스크립트의 변수는 문자열, 숫자, 객체 등 여러 타입을 포함하는 유니언 타입으로 선언될 수 있다. 타입스크립트에서 여러가지 타입을 사용시, 타입 가드를 사용하면 현재 값이 어떤 타입인지 확인하고, 해당 타입에서 제공되는 속성이나 기능에 접근할 수 있다. Copy function printValue(value: string | number) { console.log(value.toUpperCase()); } ⊙ Copy function formatValue(value: string | number) { if (typeof value === "string") { return value.toUpperCase(); } return value.toFixed(2); } ⊙ Copy if (typeof value === "string") { // value: string } else { // value: number } ⊙ Copy function printLength(value: string | number) { if (typeof value === "string") { console.log(value.length); return; } console.log(value); } ⊙ Copy function printLength(value: string | number) { if (typeof value === "string") { console.log(value.length); return; } console.log(value); } ⊙ Copy function double(value: string | number)...

타입스크립트( Typescript )의 as 문법은 개발자가 특정 값의 타입을 컴파일러에 직접 알려 주는 타입 단언(Type Assertion) 문법이다. const assertion은 값의 타입을 가능한 한 구체적이고 변경할 수 없는 형태로 만드는 타입이다. as const는 값의 범위를 넓히지 않고 가장 구체적인 리터럴 타입과 읽기 전용 구조로 고정하는 문법이다.  타입 설계를 명확하게 만드는 데 유용하지만, 실제 데이터를 변환하거나 런타임의 안전성을 자동으로 보장하는 기능은 아니다. Copy const value = "hello" as const; ⊙ Copy 리터럴값 as const ⊙ Copy const message = "success" as const; const user = { name: "Kim", role: "admin", } as const; const colors = ["red", "green", "blue"] as const;

타입스크립트의 as 문법은 개발자가 특정 값의 타입을 정확히 알고 있을 때 사용하는 타입 단언(Type Assertion) 문법이다. value as Type 형태로 작성하며, 타입스크립트가 해당 값을 지정한 타입으로 검사하도록 설정한다. 주로, DOM 요소, API 응답 데이터, unknown 타입 등을 구체적인 타입으로 다룰 때 사용한다. 만약, 잘못된 타입을 지정하면 실행 중 오류가 발생할 수 있으며, 실제 데이터 구조를 확인한 후 사용해야 한다. Copy 'unknown' 형식의 값에서는 속성을 사용할 수 없습니다. ⊙ Copy const value = data as string; ⊙ Copy 값 as 타입 ⊙ Copy const data: unknown = "Hello TypeScript"; const message = data as string; console.log(message.length); ⊙ Copy const data: unknown = 100; const message = data as string; // 컴파일러에는 string이라고 알려주었지만 // 실제 값은 여전히 숫자 100입니다. console.log(typeof message); // "number" ⊙ Copy const value = 123; const assertion = value as unknown as string; const conversion = String(value); ⊙ Copy console.log(typeof assertion); // "number" console.log(typeof conversion); // "string" ⊙ Copy const numberValue = Number("100"); const stringValue = String(100); const booleanValue = Boolean(1)...

타입스크립트에는 `as` 키워드가 있다. `as` 키워드는 개발자가 특정 값의 타입을 정확히 알고 있는 경우, 타입스크립트의 컴파일러에 해당되는 타입을 직접 알려주고 명시하는 기능이다. 원하는 타입을 지정할 때 `as` 키워드를 사용할 수 있으며, 실제 데이터를 변환하는 것이 아니라 타입 검사 기준만 변경하게 된다. Copy 값 as 타입 ⊙ Copy const value: unknown = "TypeScript"; const textLength = (value as string).length; console.log(textLength); // 10 ⊙ Copy const value: unknown = 100; const text = value as string; console.log(text.toUpperCase()); ⊙ Copy const value = 100 as unknown as string; ⊙ Copy const value = 100; const text = String(value); console.log(text); // "100" ⊙ Copy const message: unknown = "안녕하세요"; // 오류 // console.log(message.length); ⊙ Copy const message: unknown = "안녕하세요"; const length = (message as string).length; console.log(length); ⊙ Copy const message: unknown = "안녕하세요"; const text = message as string; console.log(text.length); ⊙ Copy const message: unknown = "안녕하세요"; if (typeof message === "string") { con...

타입스크립트는 데이터 타입을 추론하는 기능을 가지고 있다. 타입스크립트의 타입 추론은 입력된 값과 사용 방식을 분석하여 타입을 자동으로 판단하는 기능을 뜻한다. 변수에 문자열을 저장하면 문자열 타입으로, 숫자를 저장하면 숫자 타입으로 타입스크립트는 타입을 추론한다. 타입 추론을 활용하면 불필요한 타입 표기를 줄이면서도 잘못된 값이 사용되는 것을 미리 확인할 수 있다. ⊙ Copy const userName: string = "민수"; const age: number = 20; ⊙ Copy const userName = "민수"; // userName의 타입을 자동으로 추론 ⊙ Copy let count = 10; ⊙ Copy let count: number = 10; ⊙ Copy let userName = "홍길동"; let age = 30; let isAdmin = false; ⊙ Copy // userName: string // age: number // isAdmin: boolean ⊙ Copy let age = 30; age = 31; // 정상 age = "서른"; // 오류 ⊙ Copy let status = "ready"; ⊙ Copy status = "loading"; status = "complete"; ⊙ Copy const status = "ready"; ⊙ Copy // status의 타입: "ready" ⊙ Copy let message = "hello"; // string const fixedMessage = "hello"; // "hello" ⊙ Copy const scores = [90, 85, 100]; ⊙ Copy // number[] ⊙ Copy...

타입스크립트( Typescript )에서 null과 undefined는 모두 값이 없음을 뜻한다. 다만, null과 undefined의 의미에는 차이가 있습니다. null은 개발자가 의도적으로 값이 비어 있음을 지정할 때 사용하지만, undefined는 변수나 속성에 아직 값이 할당되지 않았음을 뜻한다. 두 타입의 차이를 알고 있다면, 값의 존재 여부를 정확하게 확인하고, 조건문이나 함수의 반환값을 처리할 때 발생할 수 있는 오류도 줄일 수 있습니다. Copy let username: string | undefined; console.log(username); // undefined ⊙ Copy interface User { name: string; phone?: string; } const user: User = { name: "민수", }; console.log(user.phone); // undefined ⊙ Copy let selectedUser: string | null = null; selectedUser = "민수"; ⊙ Copy let profileImage: string | null = null; ⊙ Copy interface Profile { nickname: string; introduction: string | null; phone?: string; } ⊙ Copy const profile: Profile = { nickname: "코딩초보", introduction: null, };

타입스크립트의 void 타입은 함수가 실행된 뒤 호출한 곳에서 사용할 반환값이 없다는 뜻이다. 데이터를 계산해 돌려주는 함수가 아니라, 메시지를 출력하거나 상태를 변경하고 이벤트를 처리하는 함수에 사용될 수 있다. 만약, 알림을 표시하거나 로그를 기록하는 함수는 특정 작업을 수행만 할 뿐, 실행 결과는 굳이 사용하지 않는다. 이런 형태의 함수의 반환 타입을 void로 지정하면 해당 함수가 결과값 전달을 목적으로 하지 않는다는 점을 타입스크립에 명시할 수 있다. 다만, void가 있는 함수가 아무 작업도 하지 않는다는 의미는 아니다. void 함수도 화면을 변경하거나 데이터를 저장하고, 설정값을 수정하는 등 다양한 작업을 수행할 수 있다. 단지, 작업이 끝난 뒤 호출한 코드에서 활용할 반환값이 없다는 의미이기 때문이다. Copy function printMessage(): void { console.log("안녕하세요."); } ⊙ Copy function showNotification(): void { console.log("새로운 알림이 있습니다."); } ⊙ Copy const result = showNotification(); // result의 타입은 void ⊙ Copy function add(a: number, b: number): number { return a + b; } const result = add(10, 20); console.log(result); // 30 ⊙ Copy function logUserName(name: string) { console.log(name); } ⊙ Copy function logA(message: string) { console.log(message); } function logB(message: string): void { console.log(message); } ⊙ Copy function printOrderNumbe...

타입스크립트에는 never 키워드를 볼 수 있다. never 타입은 void와 비슷하게 반환값이 없다는 의미도 있지만, 실제로 값이 없거나, 코드가 정상적으로 동작하지 않는 상황을 표현하는 타입이다. 문장으로는 의미가 와닿지 않는다. 쉽게 생각해서 발생할 수 없는 모든 상황, 절대로 값이 존재하지 않는 상태로 우선 외우고 넘어가자. let result: never; result = "hello"; // 오류: Type 'string' is not assignable to type 'never'. result = 10; // 오류: Type 'number' is not assignable to type 'never'. - function throwError(message: string): never { throw new Error(message); } - function getUserName(name?: string): string { if (!name) { throwError("사용자 이름이 없습니다."); } return name.toUpperCase(); } - function runForever(): never { while (true) { console.log("실행 중"); } } - function formatValue(value: string | number): string { if (typeof value === "string") { return value.toUpperCase(); } if (typeof value === "number") { return value.toFixed(2); } const unreachable: never = value; return unreachable; } - type ...

타입스크립트로 웹앱을 개발하다 보면 외부 API 응답, 사용자가 입력한 값, JSON 데이터, 예외 처리 등의 데이터의 타입을 알 수 없는 경우들이 있다. 명세서가 있다면, 상관없지만, 그렇지 않은 경우 문제가 생길 수 있는데, 이런 경우 사용할 수 있는 타입스크립트 타입이 unknown 이다. unknown은 어떤 값이 들어올지 알 수 없다는 점에서는 any와 비슷하다. 하지만, unknown은 값을 사용하기 전에 타입 검사를 한다. 타입 안정성이 필요하다면 any보다 unknown 사용을 권장한다. Copy let value: unknown; value = 10; value = "TypeScript"; value = true; value = { name: "Kim" }; value = [1, 2, 3]; ⊙ Copy let value: unknown = "TypeScript"; console.log(value.toUpperCase()); ⊙ Copy let value: unknown = "TypeScript"; if (typeof value === "string") { console.log(value.toUpperCase()); } ⊙ Copy let value: any = "TypeScript"; value.toUpperCase(); value.notExistingMethod(); value.user.profile.name; ⊙ Copy let value: unknown = "TypeScript"; value.toUpperCase(); ⊙ Copy if (typeof value === "string") { value.toUpperCase(); }

타입스크립트( Typescript )의 특징은 변수, 함수, 객체 등에 데이터 타입을 지정하여 오류를 줄이는 역할을 한다. 관대한 자바스크립트( Javascript )의 변수 지정에 데이터 타입을 지정하는 것이 타입스크립트이다. 자바스크립트에서는 변수에 어떤 값이든 자유롭게 넣을 수 있지만, 타입스크립트는 변수, 함수, 객체에 들어갈 값의 종류를 미리 지정할 수 있다. 자바 또는 C# 과 같은 언어들에 데이터 타입을 지정하는 것과 같다고 볼 수 있다. 타입스크립트의 타입에는 여러 종류가 있다. 굳이 나열하면 string, number, boolean, array, object, null, undefined, any, unknown, union, void 가 있다. 타입스크립트 기본 타입 종류 | 변수 함수 객체 등에 지정하는 자료형 ⊙ 타입스크립트 기본 타입 종류 타입스크립트는 자바스크립트에 자료형을 지정한 것이라 볼 수 있으며, 이것을 타입( type )이라 칭한다. 자바스크립트가 자료형에 관대한 특징이 있기 때문에, 의도하지 않은 코드 동작의 오류가 발생할 수 있다. 예를 들어, 자바스크립트의 + 연산자가 대표적인데, + 연산자는 숫자간 덧셈 연산도 하지만, 문자열에 + 가 들어간 경우 문자열 연결 동작을 하기 때문이다. 이 외에도 여러가지 경우들이 있다. 구구절절 말은 많았지만, 자바 또는 C# 처럼 자료형( 데이터 타입, data-type )을 지정한다고 보면 이해가 쉽다. 타입스크립트의 타입 자료형에는 여러가지가 존재하는데 그 중 일부는 다음과 같다. string : 문자열 number : 숫자 boolean : 참/거짓 array : 배열 string[] : 문자열 배열 number[] : 숫자 배열 type : 타입 별칭 interface : 객체 구조 string | number : 문자열 또는 숫자 object : 객체 타입 null : 값이 비어 있음 undefined : 값이 할당되어 있지 않음 any : 아무 타입이나 가능 unknown ...