Front/TypeScript 7

타입 가져오기, 내보내기

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..

Front/TypeScript 2024.07.18

타입 제너릭

제너릭 (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..

Front/TypeScript 2024.07.18

타입 별칭, this, 오버로딩, 클래스

타입 별칭 (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를 사용하여 메서드 체이닝을..

Front/TypeScript 2024.07.18

타입 인터페이스 (Interface)

인터페이스 (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 객체는..

Front/TypeScript 2024.07.18

타입 추론, 할당, 단언, 가드

타입 추론 (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..

Front/TypeScript 2024.07.18

타입 종류 (TypeScript Types)

타입 종류 (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..

Front/TypeScript 2024.07.18

타입 개요 및 개발환경 구성

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

Front/TypeScript 2024.03.19
티스토리 친구하기