Ted's Codding study

1. 타입 가드의 정의 및 사용법특정 범위 내에서 변수의 타입을 보다 구체적인 타입으로 좁히기 위해 사용하는 식(expression)컴파일러는 해당 범위 내에서 변수가 가질 수 있는 타입을 더 명확하게 인식타입 관련 에러를 예방타입에 특화된 속성이나 메소드를 안전하게 사용 가능function isNumber(x: any): x is number { return typeof x === 'number';}function double(x: any) { if (isNumber(x)) { console.log(x * 2); } else { console.log('Not a Number'); }}double(5); // 10double('5'); // Not a Number 2. is 키워드와 타..

1. 타입 단언의 개념개발자가 타입스크립트 컴파일러보다 해당 값의 타입을 더 잘 알고 있음을 명시적으로 선언하는 방법컴파일러에게 "이 변수의 타입을 내가 지정한 타입으로 간주해라"라고 지시타입 체크 과정에서 강제로 타입을 지정하는 것이므로 주의해서 사용2. as 키워드를 사용하여 타입 단언하기주로 as 키워드를 사용하여 타입 단언JSX와 함께 사용될 때 충돌을 피하기 위해 추천되는 방식사용 예제let someValue: any = 'this is a string';someValue = false;// ? someValue를 string으로 단언let length: number = (someValue as string).length; 3. 실제 프로젝트에서의 타입 단언 사용HTML 코드 클릭해주세요! ..

1. 인터페이스 정의객체 구조를 정의하는 타입스크립트의 기능 / 함수 타입 정의 시에도 사용객체가 어떤 프로퍼티와 메서드를 가져야 하는지 명시 컴파일 시간에 타입 체킹을 위해 사용되는 개념코드의 가독성과 유지 보수성을 향상다양한 구현체에 동일한 인터페이스를 적용하여 일관성과 재사용성을 제공1-1) 그 동안 써왔던 타입 속성 예시type UserType = { name: string; age: number;};type AdminUserType = UserType & { admin: boolean };type manyType = number | string | boolean; 1-2) 인터페이스 명시interface 키워드를 사용하여 명시인터페이스명은 대문자로 시작type 속성의 선택적 프로퍼티(옵셔널)..

1. 상태 및 데이터 타입 정의사용자 정보를 처리하는 API 응답 처리사용자 정보를 나타내는 타입과 API 응답 타입을 정의type User = { id: number; name: string; email: string;};type ApiResponse = { status: 'loading' | 'success' | 'error'; data?: User; message?: string; // 성공 또는 에러 메시지 출력}; 2. API 응답 처리 함수 구현API 응답에 따라 다른 작업을 수행하는 함수를 구현ApiResponse 타입의 객체를 매개변수로 받아 그 상태에 따라 적절한 로그를 출력하고, 필요한 작업을 수행function processApiResponse(response: ApiRes..

1. 함수의 선언과 호출매개변수와 반환 값에 타입 지정 가능기본 함수 선언function greet(name: string): string { return `Hello, ${name}`;} 화살표 함수: 타입 속성으로 명시하여 첨부type ArrowGreetType = (name: string) => string;const arrowGreet: ArrowGreetType = (name) => `Hello ${name}`;console.log(arrowGreet('테드'));console.log(arrowGreet(1)); // - Error// 'number' 형식의 인수는 'string' 형식의 매개 변수에 할당될 수 없습니다. 2. 선택적 매개변수와 기본 매개변수선택적 매개변수함수 호출 시 생략 가..