글

9월, 2026의 게시물 표시

타입스크립트 배열 타입 선언 방법

-
이미지
타입스크립트( Typescript )에서 배열 타입은 배열에 저장할 수 있는 값의 자료형을 명확하게 설정하는 방법이다. 문자열 배열은 문자열만, 숫자 배열은 숫자만 저장하도록 타입을 설정하는 것을 뜻한다. 배열 타입을 선언 방식은 요소 타입 뒤에 `[] (배열을 의미하는 표기 )`를 붙이는 방식이며, 제네릭 형태의 배열 타입을 사용하는 방법도 있다. 여러가지 자료형을 함께 저장해야 하는 경우에는 유니온 타입을 배열 타입으로 설정할 수 있다. 객체 배열도 각 객체가 가져야 할 속성과 속성 타입을 정의하여 선언할 수 있다. 배열 타입을 명시하면 타입스크립트가 배열에 잘못된 자료형의 값이 추가되는 것을 컴파일 단계에서 확인할 수 있어 타입 안정성을 보장받을 수 있다. 배열을 사용하는 함수에서는 매개변수와 반환값에도 배열 타입을 설정할 수 있다. 타입스크립트 배열 타입 선언 방법 타입[] 형태로 배열 타입 선언하기 타입스크립트는 타입 배열( 타입[] )을 생성할 수 있다. 타입 배열을 만드는 방법은 요소의 타입 뒤에 []를 붙이는 방식이다. 숫자만 저장하는 배열이라면 number[], 문자열만 저장하는 배열이라면 string[]처럼 선언한다. 타입스크립트는 배열 타입은 배열에 다른 타입의 값이 추가되는 것을 컴파일 단계에서 검사한다. Copy /** */ const scores: number[] = [90, 80, 70]; scores.push(100); /* 가능 */ /* scores.push("A"); 오류: string 타입의 값은 number[] 배열에 추가할 수 없다. */ console.log(scores); scores는 number[] 타입배열로 선언했으며, 배열의 각 요소는 number 타입이어야 한다. 숫자형태 100은 number 타입이며, 배열에 정상적으로 추가할 수 있다. "A"는 string 타입이기에 number[] 타입인 scores 배열에 추가할 수 없다. 타입[] 형태로 배열 타입 선언하기 ...
댓글 쓰기
위치: 대한민국 서울특별시
자세한 내용 보기

타입스크립트 제네릭 인터페이스 예제

-
타입스크립트 제네릭 인터페이스( Typescript Generic Interface)는 인터페이스 이름 뒤에 <T>와 같은 타입 매개변수를 선언하여 하나의 인터페이스 구조를 여러 데이터 타입에 사용할 수 있도록 하는 기능이다. Box<string>에서는 데이터가 string이 되고, Box<number>에서는 데이터가 number가 된다. 타입별로 비슷한 인터페이스를 반복해서 만들 수 있지만, 하나의 구조만을 재사용할 수 있다. ⊙ Copy interface Box<T> { value: T; } const text: Box<string> = { value: "Hello" }; const number: Box<number> = { value: 100 }; ⊙ Copy interface Box<T> { value: T; } ⊙ Copy interface Box<T> { value: T; } const textBox: Box<string> = { value: "Hello" }; const numberBox: Box<number> = { value: 100 }; console.log(textBox.value); console.log(numberBox.value); ⊙ Copy interface Box<string> { value: string; } ⊙ Copy interface DataBox<T> { data: T; } const nameData: DataBox<string> = { data: "Kim" }; const ageData: DataBox<number> = { data: 30 }; const activeData: DataBox<boolean...
댓글 쓰기
위치: 대한민국 서울특별시
자세한 내용 보기

타입스크립트 제네릭 배열 예제

-
타입스크립트( Typescript )에서 제네릭 배열( Generic Array )을 사용하면 배열 요소의 타입을 타입 매개변수 T를 이용하여 재사용 가능한 코드로 작성할 수 있다. 대표적인 표현 방법은 Array<T>와 T[]이다. Array<number>는 숫자 배열이고, Array<string>은 문자열 배열이다. 제네릭 함수( Generic Method )에서는 T[]를 매개변수나 반환 타입으로 사용하여 전달된 배열의 요소 타입을 유지할 수 있다. ⊙ Copy Array<T> T[] ⊙ Copy const numberList: Array<number> = [10, 20, 30]; const stringList: Array<string> = ["Apple", "Banana", "Orange"]; console.log(numberList); console.log(stringList); ⊙ Copy Array<number> → 숫자 배열 Array<string> → 문자열 배열 Array<boolean> → 불리언 배열 ⊙ Copy function getArray<T>(items: T[]): T[] { return items; } const numbers = getArray<number>([1, 2, 3]); const fruits = getArray<string>(["Apple", "Banana", "Orange"]); console.log(numbers); console.log(fruits); ⊙ Copy function firstItem<T>(items: T[]): T | undefined { return items[0]; } const firstNumber = fir...
댓글 쓰기
위치: 대한민국 서울특별시
자세한 내용 보기

타입스크립트 제네릭 함수 예제

-
타입스크립트( Typescript )의 제네릭( Generic ) 함수는 함수( Method )가 사용할 타입을 미리 하나로 고정하지 않고 타입 매개변수를 이용하여 여러 타입에서 재사용할 수 있도록 만든 함수이다. 제네릭 함수는 <T>와 같은 타입 매개변수를 사용한다. 함수 호출 시 타입을 직접 지정할 수도 있으며, 함수 인수를 통해 타입스크립트가 타입 인수를 추론할 수도 있다. 제네릭 함수 <T>를 이용하면 any를 사용하는 것보다 입력값과 반환값 사이의 타입 정보를 더 정확하게 사용할 수 있다. ⊙ Copy function identity<T>(value: T): T { return value; } const numberValue = identity<number>(100); const stringValue = identity<string>("Hello"); console.log(numberValue); console.log(stringValue); ⊙ Copy function getFirst<T>(items: T[]): T | undefined { return items[0]; } const numberResult = getFirst([10, 20, 30]); const stringResult = getFirst(["Apple", "Banana", "Orange"]); console.log(numberResult); console.log(stringResult); ⊙ Copy function createPair<T, U>(first: T, second: U): [T, U] { return [first, second]; } const pair1 = createPair<string, number>("Age", 20); const pair2 = cr...
댓글 쓰기
위치: 대한민국 서울특별시
자세한 내용 보기

타입스크립트 static 메서드 예제

-
타입스크립트( Typescript )에서 static 키워드를 메서드 앞에 붙이면 정적 메서드( static method )를 만들 수 있다. static 메서드는 클래스 자체에 속하는 메서드이다. new로 객체를 생성하지 않아도 클래스이름.메서드이름() 형태로 호출하여 사용할 수 있다. 타입스크립트는 JavaScript의 클래스 문법을 지원하면서 매개변수와 반환값 등에 타입을 지정할 수 있다. static 메서드는 계산 함수, 데이터 변환 함수처럼 공통 기능을 클래스에 묶을 때 사용할 수 있다. ⊙ Copy class 클래스이름 { static 메서드이름(): void { /* 실행할 코드 */ } } 클래스이름.메서드이름(); ⊙ Copy class Calculator { static hello(): void { console.log("계산기를 실행한다."); } } Calculator.hello(); ⊙ Copy class Calculator { static add(a: number, b: number): number { return a + b; } } const result: number = Calculator.add(10, 20); console.log(result); ⊙ Copy class Calculator { static add(a: number, b: number): number { return a + b; } subtract(a: number, b: number): number { return a - b; } } /* static 메서드 */ console.log(Calculator.add(10, 5)); /* 인스턴스 생성 */ const calculator = new Calculator(); /* 인스턴스 메서드 */ console.log(calculator.subtract(10, 5)); ⊙ Copy static 메서...
댓글 쓰기
위치: 대한민국 서울특별시
자세한 내용 보기

타입스크립트 static 속성 예제

-
타입스크립트( Typescript )에서 `static` 속성은 클래스 자체에 속하는 속성이다. 일반 속성은 `new`로 객체를 만들면 각각의 객체가 자신의 값을 가지지만, `static` 속성은 클래스에 그냥 존재하는 형태를 가진다. 굳이, `new`를 사용해 객체화 하지 않아도 속성을 사용할 수 있다. `객체명.속성명`이 아니라 `클래스명.속성명` 형태로 접근할 수 있다. 기본 문법은 `static 속성명 = 값` 형태이다. ⊙ Copy /* static 속성 */ 클래스명.속성명 /* 인스턴스 속성 */ 객체명.속성명 ⊙ Copy class Example { static message: string = "Hello"; } console.log(Example.message); ⊙ Copy class Website { static siteName: string = "TypeScript Study"; } console.log(Website.siteName); ⊙ Copy const website = new Website(); /* 오류 발생 */ console.log(website.siteName); ⊙ Copy class User { static count: number = 0; name: string; constructor(name: string) { this.name = name; /* 객체가 생성될 때마다 공통 count 증가 */ User.count++; } } const user1 = new User("민수"); const user2 = new User("지영"); const user3 = new User("현우"); console.log(User.count); ⊙ Copy class Product { static category: ...
댓글 쓰기
자세한 내용 보기

타입스크립트 getter와 setter 예제

-
타입스크립트( Typescript )에서 클래스에 get과 set을 이용하여 getter와 setter를 만들 수 있다. getter는 값을 읽을 때, setter는 값을 설정할 때 사용된다. 예를 들면, 일반 메서드와 달리 user.getName()처럼 호출하지 않고, user.name이나 user.name = "홍길동"처럼 일반 속성을 사용여 접근한다. getter와 setter는 클래스의 프로퍼티에 접근할 때 사용하는 접근자(accessor) 이다. get은 값을 읽고, set은 값을 설정한다. 단순히 값을 저장하고 읽기만 한다면 일반 public 필드를 사용해도 되지만, 값의 검사나 변환 같은 추가 처리가 필요할 때 getter와 setter 프로퍼티를 사용할 수 있다. ⊙ Copy class User { private _name: string = ""; get name(): string { return this._name; } set name(value: string) { this._name = value; } } ⊙ Copy class User { private _name: string = "홍길동"; get name(): string { return this._name; } } const user = new User(); console.log(user.name); ⊙ Copy class User { private _name: string = ""; set name(value: string) { if (value.length < 2) { throw new Error("이름은 2글자 이상이어야 한다."); } this._name = value; } } const user = new User(); user.name = "홍길동...
댓글 쓰기
위치: 대한민국 서울특별시
자세한 내용 보기

타입스크립트 추상 클래스 예제

-
타입스크립트( Typescript )의 추상 클래스는 abstract class로 선언하는 클래스이다. 추상 클래스는 new를 사용해 직접 인스턴스를 만들 수 없으며, 다른 클래스가 extends로 상속해서 사용한다. 추상 클래스 안에는 구현이 없는 추상 메서드뿐 아니라 실제 코드가 작성된 일반 메서드도 함께 넣을 수 있다. 공통 기능은 부모 클래스에서 구현하고, 클래스마다 달라져야 하는 기능은 추상 메서드로 정의할 수 있다. ⊙ Copy abstract class Animal { move(): void { console.log("동물이 움직인다."); } } class Dog extends Animal {} const dog = new Dog(); dog.move(); ⊙ Copy abstract class Animal { abstract makeSound(): void; } class Dog extends Animal { makeSound(): void { console.log("멍멍"); } } const dog = new Dog(); dog.makeSound(); ⊙ Copy abstract class Animal { abstract makeSound(): void; move(): void { console.log("앞으로 이동한다."); } } class Cat extends Animal { makeSound(): void { console.log("야옹"); } } const cat = new Cat(); cat.makeSound(); cat.move(); ⊙ Copy abstract class Animal { abstract makeSound(): void; } const animal = new Animal(); ⊙ Copy class Dog extends Animal { ...
댓글 쓰기
위치: 대한민국 서울특별시
자세한 내용 보기

타입스크립트 클래스 상속 예제

-
타입스크립트( Typescript )의 클래스 상속은 클래스가 가진 속성과 메서드를 다른 클래스가 물려받아 재사용하는 것을 뜻한다. 상속받는 자식 클래스는 extends 키워드를 사용해 부모 클래스를 지정하며, 부모 클래스의 public 및 protected 멤버를 사용할 수 있다. 자식 클래스에서는 부모 클래스의 기능을 그대로 사용할 수 있고, 새로운 속성과 메서드를 추가할 수 있다. 필요한 경우, 기존 메서드를 같은 이름으로 다시 정의하는 오버라이딩도 가능하다. 생성자를 사용하는 경우에는 super를 통해 부모 클래스의 생성자를 호출할 수 있다. 클래스 상속은 여러 클래스에서 공통으로 사용하는 기능을 부모 클래스에 정의하고, 각각의 자식 클래스에는 개별적인 기능만 추가하는 방식으로 코드 중복을 줄이고 구조를 체계적으로 관리하는 데 사용한다. ⊙ Copy class Animal { name: string; constructor(name: string) { this.name = name; } move(): void { console.log(`${this.name}이(가) 움직입니다.`); } } class Dog extends Animal { bark(): void { console.log("멍멍!"); } } const dog = new Dog("초코"); dog.move(); dog.bark(); ⊙ Copy class 자식클래스 extends 부모클래스 { } class Animal { move(): void { console.log(&quot;움직입니다.&quot;); } } class Dog extends Animal { bark(): void { console.log(&quot;멍멍!&quot;); } } const dog = new Dog(); dog.move(); dog.bark(); ...
댓글 쓰기
위치: 대한민국 서울특별시
자세한 내용 보기

비주얼 스튜디오 코드 VSCode 설치하기 - 마이크로소프트 공식 홈페이지

-
이미지
VSCode( 비주얼스튜디오코드, Visual Studio Code )는 마이크로소프트( Microsoft )에서 제공하는 있는 무료 코드 편집기 프로그램이다. 프로그래밍 언어의 소스 코드를 작성하고 수정하며, 확장 기능을 설치하여 개발 환경을 구성할 수 있다. 윈도우즈, 맥OS, 리눅스( Windows, macOS, Linux )에서 사용할 수 있으며, 공식 홈페이지를 통해 자신의 운영체제에 맞는 설치 파일을 다운로드받고 설치할 수 있다. 윈도우즈의 경우, 인스톨러 파일( Installer )를 이용하여 설치할 수 있다. 설치파일을 다운로드하고 실행한 다음 화면의 안내에 따라 VSCode 설치를 진행하면 된다. 설치가 완료되면 VSCode를 실행하여 자신이 원하는 코드를 작성할 수 있다. 비주얼 스튜디오 코드 설치하기 - 마이크로소프트 공식 홈페이지 VSCode 무료 소스 코드 편집기 VSCode(비주얼 스튜디오 코드, Visual Studio Code)는 Microsoft에서 개발한 무료 소스 코드 편집기이다. 소스 코드란 컴퓨터 프로그램을 만들기 위해 프로그래밍 언어로 작성한 명령문의 집합이며, VSCode에서 소스 코드를 작성하고 수정할 수 있다. VSCode의 특징을 보자. 무료 사용 VSCode 기본 프로그램을 무료로 다운로드하여 사용 다중 운영체제 Windows, macOS, Linux를 지원 코드 편집 여러 프로그래밍 언어의 소스 코드를 작성하고 수정 가능 확장 기능 Extensions를 이용하여 언어 지원과 개발 도구를 추가 디버깅 지원되는 언어와 개발 환경에서 프로그램 오류를 조사 Git 통합 Git을 이용한 소스 코드 변경 관리 기능을 제공 VSCode 자체는 코드 편집기이고 프로그래밍 언어에 따라 컴파일러, 실행 환경, 개발 도구 등을 별도로 설치해야 할 필요가 있다. 만약, Java 프로그램을 개발할 때는 VSCode 외에 JDK와 관련 확장 기능이 필요하다. VSCode 무료 소스 코드 편집기 VSCode 설치 전 확인 사항 VSCo...
댓글 쓰기
자세한 내용 보기