DH의 개발 공부로그

Canvas 사용하기 // 기존 코드 class Game { constructor() { this.canvas = document.querySelector("canvas"); this.ctx = this.canvas.getContext("2d"); this.canvas.width = 500; this.canvas.height = window.innerHeight; } } class Game { public canvas: HTMLCanvasElement; public ctx: CanvasRenderingContext2D; constructor() { this.canvas = document.querySelector("canvas") as HTMLCanvasElement; this.ctx = this.can..

이번에는 타입스크립트를 공부한걸 토대로 기존에 작업했었던 JavaScript 슈팅게임을 TypeScript로 변경하는 것을 해보려고 합니다. 물론 제가 작성하는 코드가 최적화된 TypeScript코드가 아닐지는 몰라도 최대한 자료들을 찾아가면서 적용하려고 하는 중입니다. 틀린부분이 있으면 댓글에 남겨주시거나 github에 남겨주시면 적극 반영하겠습니다! 감사합니다! 그럼 시작하겠습니다. :) 게임소개 슈팅게임 바로가기 Github 소스 보러가기 JavaScript 코드가 궁금하신 분들은 github에서 확인 가능합니다. 변수설정 및 DOM 제어 const $startScreen = document.querySelector("#start_screen") const $canvasScreen = documen..

인터페이스(interface) 인터페이스는 객체 형태를 설명해주는 설계도라고 할 수 있습니다. type과 비슷하기도 하지만 다른점을 가지고 있고, 프로퍼티와 메소드를 가질 수 있다는 점은 클래스와 유사하기도 합니다. 인터페이스는 보통 다음과 같은 것들의 타입에 대한 약속을 정의해 줍니다. 1. 객체의 스펙(속성과 속성의 타입) 2. 함수의 파라미터 3. 함수의 스펙(파라미터, 반환 타입 등) 4. 배열과 객체를 접근하는 방식 5. 클래스 인터페이스와 타입의 차이점 인터페이스와 타입은 위에서 말했다 싶이 비슷합니다. 둘다 타입을 정의를 해줄 때 사용을 하고, 비슷한 역활을 하고 있기 때문 입니다. 그렇다면 차이점이 무엇인지 알아보겠습니다. Interface는 객체의 형태만 가능하다 type UserName..

클래스 타입스크립트는 자바스크립트 기반의 언어이기 때문에 자바스크립트에서와 마찬가지로 class를 선언하고 사용이 가능합니다. class PlayerInfo { } 접근제한자 타입 스크립트에서는 자바와 같이 클래스 기반 객체 지향 언어가 지원하는 접근 제한자 public, pivate, protected를 지원하며 의미 또한 동일합니다. 접근 구분 private protected publick 선언한 클래스 내 ⭕ ⭕ ⭕ 상속받은 클래스 내 ❌ ⭕ ⭕ 인스턴스 ❌ ❌ ⭕ class PlayerInfo { constructor( private firstName: string, private lastName: string, public nickName: string ) { } // 메서드도 보호 가능 pri..

Call Signatures Call Signatures은 함수의 매개변수와 반환 값의 타입을 모두 type으로 미리 선언하는 것을 말합니다. 그리고 이것으로 React에서 함수로 props를 보낼 때, 어떻게 작동할지 미리 설계도 가능합니다. 이러한 방식은 프로그램을 짜기 전에 타입을 먼저 생각하고 코드를 구현하는 방식에서 많이 쓰이며, 따라서 개발자가 미리 타입을 인지하고 코드를 작성 할 수 있다는 장점이 있습니다. type Add = (a:number, b:number) => number // Call Signatures const add : Add = (a, b) => a + b오버로딩 (Overloading) function overloading, method overloading이라고도 불리며..

다형성(Polymorphism)이란? poly는 '많다, 많음' 라는 뜻이고 morp-는 '구조, 형태' 라는 뜻을 가지고 있습니다. 따라서 Polymorphism, 다형성이란 여러가지 다양한 구조, 모양, 형태 라는 뜻을 가지고 있습니다. 타입스크립트에서 이런한 다형성을 가능하게 해주는 것은 바로 제네릭(Generics) 타입입니다. 제네릭(Generic)이란? 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미합니다. 제네릭은 선언 시점이 아니라 생성 시점에 타입을 명시하여, 단일 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법입니다. 그리하여 인터페이스, 함수 등의 재사용성을 높일 수 있다는 장점이 있습니다. 제네릭을 선언할 때 관용적으로 사용되는 식..

타입스크립트 Tuple Tuple은 array 생성시 사용합니다. 정해진 갯수의 요소를 가지는 배열을 생성하고 원하는 타입의 순서를 지정하여, 해당 위치에 해당 타입이 필요 합니다. const array2 : [string, number, boolean] = ['shape', 1, true]; Undefined, Null let un : undefined = undefined; // undefined는 선택적 타입 let nu : null = null; Any 타입스크립트에서 Any는 어떠한 타입이든 허용을 하는 타입으로 특정 값으로 인하여 타입 검사 오류가 발생하는 것을 원하지 않을 때 사용할 수 있습니다. 즉 , 이말은 타입의 안정성이 지켜지지 않는 것이고 타입스크립트에서 빠져나온다고 볼 수도 있습니..

기본 문법 변수명 : 타입명 변수를 선언할 때 타입을 지정해 줄 수 있습니다. // 구문 let 변수명 : 타입명 // 예시 // 문자열 let str : string = 'shape' // 숫자 let num : number = 20 // 배열 let arr1 : string[] = ['a', 'b', 'c', 'd']; let arr2 : number[] = [1, 2, 3, 4]; let arr3: [string, number] = ["shape", 182]; // boolean let isTrue : boolean = true; // 객체 const player : { name : string, age : number } = { name : 'shape', age : 20 }; Optinal Ty..