Frontend/TypeScript(7)
-
타입스크립트 클래스
클래스자바스크립트와 크게 다르지 않다.다만 자바스크립트에는 없고 자바에는 있는 몇몇 객체 지향 문법을 끌어와 쓰기 때문에 객체 지향적 몇몇 제약이 새로 생겼다. 예를 들어 자바스크립트에서는 클래스 인스턴스 변수를 굳이 선언하지 않아도 생성자 메소드(constructor)에서 this 키워드로 자동으로 생성시킬 수 있다. class Animal { constructor(name) { this.name = name; }} 하지만, 타입스크립트에서는 생성자 메소드(constructor)와 함께 클래스 바디에 인스턴스 변수를 정의 해주어야 한다.class Animal { name: string; // 인스턴스 변수 선언 constructor(name: string) { th..
2025.03.11 -
타입스크립트 리터럴
리터럴 타입 TypeScript에 문자열이나 숫자에 정확한 값을 지정하여 더 엄격한 타입을 지정하는 것. ✔ TypeScript에서 const 변수의 한계점에 대해 업그레이된게 리터럴 타입이라고 보면 됨 ❗ String Literal Types (문자형)let name_literal :"철수" | "영희";console.log(name_literal = "철수") // "철수"console.log(name_literal = "영철") // error 해당 예제를 보면 문자형 리터럴 타입이 무슨 뜻인지 바로 이해가 갈 것이다. 간단하게 해석해보자면name_literal에는 `철수` 나 `영희` 라는 문자열만 지정이 가능하게끔 엄격한 타입 지정을 해둔것이다.그렇기 때문에 첫 번째 console.log에서는 ..
2025.03.07 -
타입스크립트 함수
함수 여러 문장들을 묶어서 실행하는 기능을 갖는데,함수를 여러번 호출하여 사용할 있기 때문에함수는 재사용 가능한 코드 블럭의 기본 단위로 볼 수 있다. 함수 기본 구조function 키워드를 사용하여 정의는데, function 뒤에 함수명을 적고 함수명 뒤 괄호 안에 입력 파라미터들을 나열한다. 입력파라미터는 그 타입을 명시할 수도 있으며, 함수의 리턴 타입 또한 입력 파라미터 뒤에 : 을 찍은 후 리턴 타입을 명시할 수 있다. 📝 함수 형태// ▶ 함수function 함수 (인자:타입) : 리턴타입 {}// ▶ 화살표 함수const 변수명 = (인자 : 타입) : 리턴타입 => {}function 함수명(매개변수1: '매개변수1 타입', 매개변수2: '매개변수2 타입'): '반환 타입'{...}/..
2025.03.07 -
타입스크립트 연습문제 1. 인터페이스 정의 및 사용
✅ 주어진 코드로 "User" 인터페이스를 정의하고 이에 맞게 사용하기 - 해결할 코드export type User = unknown;export const users: unknown[] = [ { name: 'Max Mustermann', age: 25, occupation: 'Chimney sweep' }, { name: 'Kate Müller', age: 23, occupation: 'Astronaut' }];export function logPerson(user: unknown) { console.log(` - ${user.name}, ${user.age}`);}console.log('Users..
2025.02.25 -
타입스크립트 인터페이스
인터페이스컴퓨터 과학에서 인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미합니다. 타입스크립트에서 인터페이스는 객체 타입을 정의할 때 사용됩니다. 인터페이스는 객체 타입 뿐만 아니라 다음 범주에 대해서도 타입을 정의할 수 있습니다.객체의 스펙(속성과 속성의 타입)함수의 파라미터함수의 스펙(파라미터, 반환 타입 등)배열과 객체를 접근하는 방식클래스인터페이스 맛보기인터페이스에 대해 알아볼 수 있는 간단한 예제를 봅시다.let person = { name: 'Capt', age: 28 };function logAge(obj: { age: number }) { console.log(obj.age); // 28}logAge(person); // 28위 logAge() 함수에서 받는 인자의 형태는 age를 속..
2025.02.20 -
타입스크립트 기본 타입
1. Boolean(불리언)boolean은 true/false 값을 나타낸다.let isDone: boolean = false; 2. Number(숫자)TS의 모든 숫자는 부동 소수 값이기에 number라는 타입을 붙인다. 16진수, 10진수, 2진수, 8진수도 지원한다.let decimal: number = 6;let hex: number = 0xf00d;let binary: number = 0b1010;let octal: number = 0o744; 3. String(문자열)텍스트 데이터 타입을 string으로 표현하며, JS처럼 (")나 (')로 문자열 데이터를 감싸는 데에 사용한다. 템플릿 문자열이나 백틱을 사용하면 여러 줄의 문자열을 작성할 수 있고, ${expr} 같은 형태로 표현식을 포함할 ..
2025.02.19