6월 12, 2017 Typescript No comments
‘this’ implicitly has type ‘any’ because it does not have a type annotation.
raphael의 element에 click시 event 연동 구현시 위와 같은 error 발생
click시 event 구현 code는 아래 처럼
this.ele.click(function(){
console.log("test click::x=%d, y=%d", x, y);
this.attr({fill : '#0F0'});
})
click event 첫번째 parameter로 element를 전달하기에 this를 any로 명시 필요
this.ele.click(function(this : any){
console.log("test click::x=%d, y=%d", x, y);
this.attr({fill : '#0F0'});
})
위와 같이 수정 후 해결
6월 7, 2017 Typescript No comments
export class DSButton {
x : number = 0;
y : number = 0;
width : number = 0;
height : number = 0;
constructor(x:number, y:number, width:number, height:number){
this.x = x;
this.y = y;
this.width = width;
this.height = height;
}
ToString() {
return "x=" + this.x + ", y=" + this.y + ", width=" + this.width + ", height=" + this.height;
}
}
import { DSButton } from './DSButton'
let button : DSButton;
button = new DSButton(0, 0, 100, 200);
console.log('button.ToString()=' + button.ToString());
module.exports = {
entry: './app.ts',
output: {
path: __dirname + '/build',
filename: 'bundle.js'
},
module: {
loaders: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
]
}
};
resolve : extensions:['.ts'] 추가
resolve: {
extensions: ['.ts']
}
6월 1, 2017 Typescript No comments
Typescript를 시작하고, 처음부터 맨붕이 왔던것은 Javascript에서 module 방식을 지원하지 않다보니, 그에 대한 대체 수단에 대한 개념 잡기가 쉽지 않음
Raphael JS (http://dmitrybaranovskiy.github.io/raphael) 를 Typescript에서 사용하여 원 그리기 예제 시작$ npm install --save raphael
test_raphael.ts source 상단에 raphael module Import 추가Javascript library를 직접 사용하려고 하기에 npm에서 설치된 경로의 .js 파일을 직접 입력
import raphael = require('./node_modules/raphael/raphael.js');
var paper = raphael(0, 0, 200, 200); var circle = paper.circle(100, 100, 50);
circle.attr({
'fill' : '#00f',
'stroke':'#000',
'stroke-width':5
});
$ tsc -p . test_raphael.ts(1,26): error TS6143: Module './node_modules/raphael/raphael.js' was resolved to '/home/ubuntu/workspace/node_modules/raphael/raphael.js', but '--allowJs' is not set.
tsconfig.json 파일에 allowjs : true를 설정 해주고 다시 build시 또 Error!!
$ tsc -p . error TS5055: Cannot write file '/home/ubuntu/workspace/node_modules/raphael/raphael.js' because it would overwrite input file.
"outDir" : "build"로 변경 시 정상 수행 됨loader를 선택하여 설치 Typescript는 awesome-typescript-loader, source-map-loader를 설치
$npm install --save webpack awesome-typescript-loader source-map-loader
module.exports = {
entry: './test_raphael.ts',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
]
},
};
$webpack
참고로 webpack –watch 수행시 source가 변경시 자동 build됨
<html>
<head>
</head>
<body>
<script type="text/javascript" src="bundle.js">
</script>
Test raphael.js
</body>
</html>
5월 31, 2017 Typescript No comments
npm을 통해서 typescript설치 (tsd도 같이 설치 : TypeScript Definition Manager)
c:\Test>npm install -g typescript tsd
greeter.ts라는 typescript source file생성
function greeter(person : string){
return "Hello, " + person;
}
var user = 123;
document.body.innerHTML = greeter(user);
확장자 ts를 tsc를 이용하여 compile
c:\test>tsc greeter.ts
최종 js 파일로 결과 출력
$npm init
자동으로 package.json 파일 생성 그 이후
$npm install –save typescript
package.json 샘플
{
"name": "typescript_test",
"version": "1.0.0",
"description": "test",
"main": "index.html",
"scripts": {
"build": "echo build",
"start": "echo test",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/scanhand/TypeScript_Test.git"
},
"author": "scanhand",
"license": "ISC",
"bugs": {
"url": "https://github.com/scanhand/TypeScript_Test/issues"
},
"homepage": "https://github.com/scanhand/TypeScript_Test#readme",
"dependencies": {
"raphael": "^2.2.7",
"tsd": "^0.6.5",
"typescript": "^2.3.3"
}
}
위와같이 –save를 설정시 package.json 파일에 자동 저장됨
$ tsc --init
수행시 자동으로 tsconfig.json 파일 생성됨
{
"compilerOptions": {
/* Basic Options */
"target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', or 'ESNEXT'. */
"module": "commonjs", /* Specify module code generation: 'commonjs', 'amd', 'system', 'umd' or 'es2015'. */
"allowJs": true, /* Allow javascript files to be compiled. */
"sourceMap": true, /* Generates corresponding '.map' file. */
"outDir": "build", /* Redirect output structure to the directory. */
/* Strict Type-Checking Options */
"strict": true /* Enable all strict type-checking options. */
},
"files" : [
"test_raphael.ts"
]
}
5월 31, 2017 Typescript No comments
항상 web application을 해야지 생각만 했었는데 지금 부터 맨땅에 해딩하기 시작 함. (앞으로 post는 순서 및 내용이 뒤죽박죽 할 예정)
AngularJs에서도 사용하고, Microsoft에서도 밀고 있는 Typescript로 접근해 보기 시작.
처음 작업환경은 Local Computer에서 npm을 이용해서 환경 설정하고 작업 하기 시작.
하지만, 작업 computer가 바뀌는 경우, 특히 집과 회사를 오가면서 같은 작업 반복시 github만 가지고는 조금 애매해 지기 시작함
그러다 우연히 찾은 c9(https://c9.io)을 작업 환경으로 사용하기 시작
작업 환경이 SublimeText와 느낌이 비슷하고, linux shell도 제공해주고, 무엇보다 virtual machine을 활용하여, 나만의 작업 환경을 그대로 유지하는게 참 좋음 (특히 무료!!!)
