Typescript and Javascript for Create Phaser Game

frontend and javascript

• 클라이언트 환경 개선
• 웹브라우저 표준화(ecma)
  • ecma6
  • ecma5
• Tech Stack
• Package(webpack and CLIs)

why not javascript, why typescript

• javascript is old but more(발전 중인 javascript)
  • async iterator
  • ... literal
  • etc
• typescript is SUPERSET of javascript
  • javascript의 최전방
  • typescript 타입에 의한 linting 지원
    • 컴파일 타입 검사
    • 타입 추론에 의한 정적 타입 검사
  • type에 의한 code guard
  • enterprise 개발
• but! not 'why not javascript', 'it's javascript!'

PAHSER arounding

• phaser official support typescript
• phaser typescript staterpack
• phaser typescript webpack collaboration
  • 지속 가능한 빌드 감시
  • 임시 배포
  • 결과물 지속 반영
  • 개발 웹서버 지원
• Chrome debugger
  • from-lang to target-lang map file 지원
    • typescript to javascript ecma5(ie 11이상)
    • javascript ecma6 to javascript ecma3(ie 10이하)
    • typescript to javascript ecma6(최신 브라우저들)
  • 지원 기술 검색 Can I USE
  • command-line friendly

Tips

javascript

• 매우 빠르게 변화 중임
  • add immutable type
• unlimited free
  • CAN runtime member add
  • CAN runtime change val type
  • CAN closure
  • all is function, not native type
    • function is first class 'object' or 'function'
    • so class is function
    • so object is function
• but it is not free
  • hell gate 'call back hell'
  • Polyfill
    • use babel
    • source import
      • example
    • arrow function(=>) ie 문제
    • .prototype.includes - ie문제
• so use ecma6 and babel
  • async/await
• size is performance
  • script parsing time
  • engine runtime
• super many modules
  • Libraries like JQuery, Bootstrap, React, and Angular, and components from frameworks such as Ember.
• be friend MDN

typescript

• good webstorm or intellij
• but use visual studio code
• use tslint
• use typescript@lastest

javascript and typescript code

• using recommand include type - babel
  • ecma6 이후 표준으로 명기 되어 있고 앞으로 브라우저들이 지원할 예정
  • babel transpiler 사용하면 현재도 사용가능

import $ from 'jquery';
import _ from 'lodash';
import * as momnet from 'monent';

• can use 'any type' but use 'define type'

function add(a, b);
function add(a: number, b: number); // use this

• map do not use '[]', use 'get'

let map = new Map<string, number>();
map.set('magic', 23445);
let badVal = map['magic']; // not runtime error, bun not work
let goodVal = map.get('magic'); // good 23445

• import와 export

// from X.ts
export class X { }
// target.ts
import { X } from 'X.ts';
// or
import * as Util from 'X.ts';

// from Y.ts
export default class Y { }
// target.ts
import Y from 'Y.ts';

• 당연하지만 결과 자바 스크립트 코드에는 타입스크립트의 타입 데이터가 들어가지 않음

node/npm

• node version select careful(work select LTS, hobbit select Lastest)
• otherwise use nvm(nvm-windows or nvm)
• version select - a.b.c
  • use a.b

phaser

• Sound Load 문제 - ie11 문제
  • 순차 로딩을 해야함 로딩이 완료 되고 다음 로딩을 해야함

game.load.audio('n', ['audio/a.mp3', 'audio/a.ogg']);
game.load.onLoadComplete.add(soundloadFunction, this); // 끝나고 다시 로딩 호출 - 코드상으로 재귀 스택오버플로우 주의
game.load.start();

etc

• use webpack!
• use CLI
  • example
    • vue-cli
    • Express-cli
• 신중히 기술 스택을 정하세요.
• 계속 갱신하시고
• fe의 즐거움 호환성 'IE'