Typescript

Module not found: Error: Can’t resolve ‘./keyboard’ in ‘..\Desktop\tetris\src’

M

문제상황 keyboard.ts파일에 Keyboard class를 만들고, export했다. main.ts파일에서 keyboard.ts파일을 import했는데 다음과 같은 에러가 나왔다. Module not found: Error: Can't resolve './keyboard' in 'C:\Users\W24946\Desktop\tetris\src' 내 코드 keyboard.ts class Keyboard { ..... } export default Keyboard main.ts import './style.css'; import Keyboard from './keyboard'; const a = new Keyboard(); 해결방안 찾기 webpack.config.js 파일에 문제가? webpack에서...

code ELIFECYCLE errno 1

c

문제상황 typescript와 webpack을 같이 사용하려고 했다. webpack, webpack-cli, webpack-dev-server를 devDependencies로 깔고 typescript는 global로 깔았다. 근데 build해보니까 아래와 같은 에러가 났다. ./src/main.ts 1.01 KiB [built] [code generated] 1 ERROR in child compilations webpack 5.4.0 compiled with 1 error in 1919 ms npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! tetris@1.0.0 build: `webpack` npm ERR! Exit status 1 npm ERR! npm ERR...

Promise executor functions should not be async

P

문제상황 function ready() { return new Promise<void>((resolve) => { console.log('game ready'); resolve(); }); } function end() { return new Promise<void>(async (resolve) => { await matrixReset(); resolve(); }); } function matrixReset() { return new Promise<void>((resolve) => { setTimeout(() => { console.log('matrix is reset!!'); resolve(); }, 2000); }); } async function over() { await end();...

Function declared in a loop contains unsafe references to variable(s)

F

문제상황 run = (timeout: number) => new Promise<void>((resolve) => { let direction = 'r'; const todos = []; for (let i = 0; i < 15; i += 1) { if (i === 6) direction = 'l'; if (i === 10) direction = 'r'; todos.push(() => { this.dragonBGmove(`${direction + 4}`, timeout); }); todos.push(() => { this.dragonBGmove(`${direction + 3}`, timeout); }); } resolve(); }); 7,8번째 줄에서 다음과 같은 에러가 뜬다. Function...

[string] vs string[] vs Array

[

[string]

튜플처럼 쓰는거다.

let a : [string] = ["a"]
let b : [string, number] = ["b", 100];

string[]

let a : string[] = ["a", "b", "c", "d", "e"];

Array<string>

let a : Array<string> = ["a", "b", "c", "d", "e"];

string[] 하고 Array<string>는 같다!!!

Property ‘xxxx’ does not exist on type ‘MyComponent’

P

class MyComponent extends Component<Props,States> {
constructor(props: Props) {
super(props);
this.spells = 'abc'
}
}

javascript였다면 spells를 추가하는게 문제가 안되는데, typescript에서는 내 맘대로 프로퍼티를 추가하면 안된다. MyComponent라는 타입에다가 먼저 spells라는 프로퍼티가 들어갈것이라고 알려줘야한다.

class MyComponent extends Component<Props,States> {
constructor(props: Props) {
super(props);
this.spells = 'abc'
}
}

Typescript 기초(5) – Functions

T

Typescript Handbook / Developer’s Record 를 참고했습니다. 함수 타입 인자의 타입과 return type을 지정할 수 있다. 또한 익명함수도 만들 수 있어서 변수에 할당도 된다. function add(x: number, y: number): number { return x + y; } let myAdd = function(x: number, y: number): number { return x + y; }; 함수 자체의 타입도 만들 수 있다. let myAdd : (x: number, y: number) => number; myAdd = function(x: number, y: number) { return x + y } console...

Typescript 기초(4) – Class

T

Typescript Handbook / Developer's Record 를 참고했습니다. 기본 class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return `안녕 ${this.greeting}`; } } let 병인이: Greeter = new Greeter("만나서 반가워"); console.log(병인이.greet()); // 안녕 만나서 반가워 상속 class Animal { name: string; constructor(name: string) { this.name = name; } move(distance: number) { console.log(`${this...

Typescript 기초(3) – Interfaces

T

Typescript Handbook / Developer's Record 를 참고했습니다. 기본 interface LabelledValue { label: string; } let myObj: LabelledValue = { label: "A" } let myObj2: LabelledValue = { label: "B", size: 10 // error : Object literal may only specify known properties, and 'size' does not exist in type 'LabelledValue' } Object에 바로 Interface 지정해서 쓰는거는 모양이 딱 맞아야 한다. 하지만, 함수의 인자값으로 들어갈때는 모양이 조금 안맞아도 된다. interface...

Typescript 기초(2) – Variable Declarations

T

Typescript Handbook / Developer's Record 를 참고했습니다. var vs let vs const 이곳을 참고하면 된다. destructure array let input = [1, 2]; let [first, second] = input; console.log(first); // 1 console.log(second); // 2 function test([first, second]: [number, number]) { console.log(first); // 100 console.log(second); // 200 } test([100, 200]); let [first, ...rest] = [1,2,3,4]; console.log(first); // 1 console...