Open search5 opened 7 years ago
아직 타입스크립트를 잘 몰라서 그런데요 타입 정의에 대한 소스를 어디서 얻을 수 있을 까요?
@easylogic https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html 여기에서 간략히 정의 내용을 얻을 수 있습니다.
타입 정의에 대한 간단한 샘플은 https://www.typescriptlang.org/docs/handbook/declaration-files/by-example.html 여기에서 볼 수 있구요.
타입스크립트 자체가 이름에서 풍기는 것처럼 어떤 변수가 어떤 데이터 타입이다.. 라는 것을 명시한거구요. 그래서 이 데이터 타입에 관한 건 https://www.typescriptlang.org/docs/handbook/basic-types.html 에서 모두 살펴볼 수 있습니다.
jQuery 샘플은
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/jquery/index.d.ts 여기에서 보실 수 있는데 아마 보시면 금방 아시지 않을까 싶습니다.
@search5 어떤 것인지 이해했습니다. Interface 를 정의하는 거군요.
현재 JUI 프로젝트가 총 4개로 나뉘어져 있는데요.
juijs/jui-core juijs/jui juijs/jui-grid juijs/jui-chart
생각보다 양이 많습니다. 클래스도 많구여...
아직 문서화 되지 않은 부분들도 많이 있어서 한번에 하기가 쉽지 않을 것 같습니다.
괜찮으시다면 필요한 것부터 우선적으로 하면 좋을 듯 한데요.
혹시 chart 와 grid 까지 모두 다 같이 사용하시는건가요?
ps. 참고로 jui가 업데이트 될때마다 api 문서도 자동으로 생성하고 있습니다. (http://api.jui.io/v2/ 참조)
@easylogic grid 까지만 사용하고 있습니다.
@search5
그럼 jui-core, jui, jui-grid 기준으로 각 프로젝트마다
index.d.ts 파일 생성해서 진행을 하면 될 것 같네요..
진행시작하고 진행사항 하나씩 공유하도록 하겠습니다.
@easylogic 고맙습니다.
이건 검토를 좀 해볼게요! ㅎㅎ
@search5 타입 정의 관련해서 jui-core 의 샘플을 한번 만들어봤는데요.
필요한 부분만 일단은 했는데요.
이런식으로 구성하는게 맞는지 모르겠네요.
실제로 이렇게 구성이 되었을 때 TypeScript 에서 어떤식으로 쓰는지를 몰라서 애매하네요.
혹시 TypeScript 를 어떤식으로 쓰시는지 샘플 코드를 얻을 수 있을까요?
@easylogic 지금 구성하고 있는 간단한 샘플은 이렇게 생겼습니다.
jui.ready(["grid.xtable", "ui.paging"], function(xtable, paging) {
let sample_board = xtable("#sample_board", {
fields: [ "idx", "title", "hit_cnt", "crea_dtm" ],
resize: true,
sort: true,
rowHeight: 26,
buffer: "page",
bufferCount: 10,
tpl: {
row: $("#row").html(),
none: $("#none").html()
}
});
// 처음에 1 페이지 불러오도록 수정
_paging(1, true);
let paging_1 = paging("#paging_1", {
count: 1000,
pageCount: 10,
screenCount: 10,
event: {
page: function(pNo) {
_paging(pNo, false);
}
},
tpl: {
"pages": $("#pages").html()
}
});
function _paging(page_no: number, is_init: boolean) {
let limit:number = 10;
let offset:number = (page_no - 1) * limit;
$.post("/sample/boardListData.wbn", {
limit: limit,
offset: offset
}, function (data) {
//sample_board.page(1);
sample_board.update(data['list']);
//sample_board.resize();
if (is_init) {
// paging_1 객체의 count 값 수정\
// 에.. 여기서 페이징 객체 초기화 해야 하나..
paging_1.options.count = data['cnt'];
paging_1.reload();
}
}, 'json');
}
$("#btn_save").click(function(e) {
e.preventDefault();
let form_value: Object = $("#form_board").serialize();
$.post("/sample/boardSave.wbn", form_value, function(data) {
alert('새 게시물이 작성되었습니다.');
location.href = "/sample/boardList.wbn";
}, 'json');
});
});
@search5 혹시 아래 부분에서 xtable, paging 에서 Type 이 필요하신건가요?
jui.ready(["grid.xtable", "ui.paging"], function(xtable, paging) {
@easylogic 네, 사실 그런게 필요합니다.
@search5
제가 잘 몰라서 그런데요.
만약에 타입이 주어지면 어떤식으로 동작하게 되는건가요?
그냥 껍데기인건지. 아님 실제 컴파일상의 오류도 같이 잡는것인지
@easylogic 예를 들자면 컴파일시에 다음과 같은 컴파일 오류 메시지가 발생합니다.
src/main/webapp/static/ts/sampleBoard.ts(1,1): error TS2304: Cannot find name 'jui'.
src/main/webapp/static/ts/sampleBoard.ts(10,18): error TS2304: Cannot find name '$'.
src/main/webapp/static/ts/sampleBoard.ts(11,19): error TS2304: Cannot find name '$'.
src/main/webapp/static/ts/sampleBoard.ts(28,22): error TS2304: Cannot find name '$'.
src/main/webapp/static/ts/sampleBoard.ts(36,9): error TS2304: Cannot find name '$'.
src/main/webapp/static/ts/sampleBoard.ts(54,5): error TS2304: Cannot find name '$'.
src/main/webapp/static/ts/sampleBoard.ts(57,34): error TS2304: Cannot find name '$'.
src/main/webapp/static/ts/sampleBoard.ts(59,9): error TS2304: Cannot find name '$'.
@search5 어떤 느낌인지 이해했습니다.
관련소스 좀 더 구성하고 알려드릴게요.
ps. $ 이거 같은 경우는 jQuery 로드하셔서 jQueryStatic 으로 타입을 잡으셔야 할 것 같네요.
@easylogic 고맙습니다. 저도 계속 답변드릴게요 :)
@search5
궁금한게 있습니다.
타입스크립트로 진행하시는거면 컴파일 타임에만 타입을 체크하나요?
아님 실행도중에도 체크하는건가요?
@easylogic 컴파일 타임에만 타입을 체크합니다.
@easylogic 그런데 노드JS를 안 써봐서 .. 아마 타입스크립트가 런타임 환경에서 동작 가능한 노드 JS 라면 런타임에도 체크할 공산이 큽니다.
jui 도 진행중입니다. 절반 정도 한것 같네요. 8개 정도만 더 하면 될 듯 하고
jui 쪽 끝나고 jui-grid 진행하면서 다시 공유드릴게요.
@easylogic 아, 신속한 작업 고맙습니다.
jui-core 랑 jui 에 대한 기본정의 파일은 다 작성했습니다.
jui-grid 쪽 해야겠네요.
@search5
https://github.com/easylogic/DefinitelyTyped/commit/4b5e1d326353d68d5ec87bde7813085ddbbc3db5
일단 jui-grid 쪽 정의파일 까지는 했구여..
테스트 코드를 만든 다음에 원래 프로젝트에 PR 을 날려봐야겠네요.
혹시 그냥 npm 패키지에 index.d.ts 를 포함시켜서 나가면 실제 프로젝트에서 쓰실 수 있나요?
그러면 관리 하는 포인트가 줄어들 것 같아서요.
@easylogic npm 패키지에 내려보내도 쓰는 것은 어렵지 않게 될것 같습니다. 그래도 DefinitelyTyped 에 공개되는 편이 좋을것 같습니다.
@search5 그럼 최대한 2개다 적용 되도록 해놓을게요.
jui-grid 관련해서 샘플 만들어서 테스트 해보고 다시 진행사항 알려드리겠습니다.
@easylogic 네, 고맙습니다.
@search5
https://github.com/DefinitelyTyped/DefinitelyTyped/pull/13806
jui-core, jui, jui-grid 모두 해서 PR 날렸습니다.
등록되면 다시 알려드릴게요.
@search5
https://github.com/DefinitelyTyped/DefinitelyTyped/pull/13806
위 PR 에서 최종적으로 점검 받고 수정하고 있는데요.
typescript 자체에서 callback 을 쓰지 말도록 문법상 체크 하는게 있어서
Class 기반으로 작업을 할려는데 생각보다 문법을 만드는게 쉽지가 않네요.
_.runtime("test", function () {
...
});
실제 정의를 아래와 같이 하는데요.
runtime : (message: string, callback: (() => any) ) => void;
문제가 local 에서 문법 체크(lint) 돌리면 정상인데.
Travis CI 쪽으로 가서 돌리면 ㅋ 다른 문법으로 바꾸라고 빌드가 안되네요.
아 ~ 난감하다.
아무쪼록 구성 되는대로 알려드릴게요.
@easylogic 넵, 지속적으로 작업해주셔서 정말 고맙습니다. 잘 받아서 사용할게요.
@search5 타입 스크립트 쪽 정의 파일 머지 됐어요 이제 어떤식으로 테스트를 해봐야할 까요?
저희가 이번에 jui를 사용하기로 하면서 vanilla.js 대신에 타입스크립트를 사용하기로 했습니다.
그 과정에서 타입스크립트가 기존의 자바스크립트 라이브러리를 가져다 사용할 수 있지만 타입을 선언한 파일이 필요하다는 것을 알았습니다.
그런데 아직 jui는 타입스크립트 정의 파일이 없는 것 같은데 혹시 진행 계획이 있으신지 문의합니다. 없으면 조금씩이라도 만들면 어떨까 싶기도 합니다..
감사합니다.