odada

Next.js + TypeScript 핵심 가이드1. 기본 타입 정의와 인터페이스타입 정의의 기본type Todo = { id: number; text: string; done: boolean; createdAt: Date;}// 인터페이스 정의interface User { id: number; name: string; email: string; role: 'admin' | 'user'; // 리터럴 타입}2. 컴포넌트 Props 타입 지정// props 타입 정의interface ButtonProps { text: string; onClick: () => void; variant?: 'primary' | 'secondary';}// 컴포넌트에서 사용const Button: Reac..

ts 가져오기, 내보내기타입스크립트에서는 import와 export 키워드를 사용하여 모듈을 가져오고 내보낼 수 있습니다.// export.tsinterface User { name: string; age: number; role: boolean;}export function introduce(user: User) { return `${user.name}는 ${user.age}살이며, 관리자인가요? ${user.role ? '네' : '아니요'}`;}// import.tsimport { introduce } from './export';const userA = { name: '김가을', age: 2, role: false,};const userB = { name..

제너릭 (Generics)제너릭은 타입을 파라미터로 전달하여 타입 안정성을 확보하는 방법입니다.함수interface Obj { x: number;}type Arr = [number, number];function toArray(a: string, b: string): string[];function toArray(a: number, b: number): number[];function toArray(a: boolean, b: boolean): boolean[];function toArray(a: Obj, b: Obj): Obj[];function toArray(a: Arr, b: Arr): Arr[];function toArray(a: any, b: any) { return [a, b];}co..

타입 별칭 (Type Aliases)타입 별칭은 새로운 타입을 정의하는 용도로 사용됩니다. 타입 별칭은 기존 타입을 참조하여 새로운 타입을 정의할 수 있습니다.type User = | { name: string; age: number; role: boolean; } | [string, number, boolean];const user1: User = { name: '김가을', age: 2, role: false,};const user2: User = ['김겨울', 22, true];명시적 this인터페이스를 사용하여 클래스의 메서드 체이닝을 구현할 수 있습니다. 이때 인터페이스에 명시적 this를 사용하여 메서드 체이닝을..

인터페이스 (Interface)인터페이스란 객체 데이터의 타입을 지정하는 용도로 사용되는 문법입니다. 인터페이스는 객체의 구조를 정의하는 형태로 사용되며, 객체의 타입을 지정하는 역할을 합니다.// 인터페이스 정의 (대문자로 시작)interface User { name: string; age: number; isAdult: boolean;}const user1: User = { name: '김겨울', age: 22, isAdult: true,};const user2: User = { name: '김가을', age: 2, // `isAdult` 프로퍼티가 누락되어 타입 오류가 발생합니다. // isAdult: false,};위 코드에서 user2 객체는..

타입 추론 (Type Inference)최대한 타입을 적게 명시하여 코드를 간결하게 작성하는 것이 좋음타입 추론이란 TypeScript가 자동으로 타입을 추론하는 것변수나 함수의 타입을 명시하지 않아도 타입을 추론하여 사용let str = '문자열'; // 타입스크립트가 str을 문자열 타입으로 추론str = 123; // Error: Type '123' is not assignable to type 'string'01. 변수 추론초기화된 변수let str = '문자열'; // 타입스크립트가 str을 문자열 타입으로 추론let num = 123;let bool = true;기본값이 설정된 매개변수// a와 b의 타입을 명시하지 않아도 타입스크립트가 number 타입으로 추론function add(a: n..

타입 종류 (TypeScript Types)01. 타입 종류- 문자let str: string = '문자열'let str: string;let name: string = '김가을';let hello: string = `안녕하세요. ${blue}님`;- 숫자let num: number = 123let num: number; // undefinednum = 123; // 123console.log(num);let integer: number = 6;let float: number = 3.14;let hex: number = 0xf00d;let infinity: number = Infinity;let nan: number = NaN;- 불리언let bool: boolean = truelet bool: bool..

타입 개요 및 개발환경 구성01. 타입스크립트란?TypeScript2012년 마이크로소프트에서 발표한 오픈소스 프로그래밍 언어로,자바스크립트의 기반의 정적 타입 문법을 추가한 프로그래밍 언어!02. 타입스크립트의 특징정적 타입의 컴파일 언어자바스크립트(동적 타입) : 변수의 타입 오류를 런타임(동작) 시점에 확인타입스크립트(정적 타입) : 변수의 타입 오류를 컴파일 시점에 확인자바스크립트로 변환(컴파일) 후 브라우저에나 Node.js 환경에서 동작03. 개발환경 구성- 프로젝트 생성npm init -y- 패키지 설치parcel : 웹 애플리케이션 번들러npm i -D parcel typescript{ "name": "ts-test", "version": "1.0.0", "descripti..