타입스크립트에 대응하는 definition file은 없을까요?

[search5]

저희가 이번에 jui를 사용하기로 하면서 vanilla.js 대신에 타입스크립트를 사용하기로 했습니다.

그 과정에서 타입스크립트가 기존의 자바스크립트 라이브러리를 가져다 사용할 수 있지만 타입을 선언한 파일이 필요하다는 것을 알았습니다.

그런데 아직 jui는 타입스크립트 정의 파일이 없는 것 같은데 혹시 진행 계획이 있으신지 문의합니다. 없으면 조금씩이라도 만들면 어떨까 싶기도 합니다..

감사합니다.

[easylogic]

아직 타입스크립트를 잘 몰라서 그런데요 타입 정의에 대한 소스를 어디서 얻을 수 있을 까요?

[search5]

@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 여기에서 보실 수 있는데 아마 보시면 금방 아시지 않을까 싶습니다.

[easylogic]

@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/ 참조)

[search5]

@easylogic grid 까지만 사용하고 있습니다.

[easylogic]

@search5

그럼 jui-core, jui, jui-grid 기준으로 각 프로젝트마다

index.d.ts 파일 생성해서 진행을 하면 될 것 같네요..

진행시작하고 진행사항 하나씩 공유하도록 하겠습니다.

[search5]

@easylogic 고맙습니다.

[seogi1004]

이건 검토를 좀 해볼게요! ㅎㅎ

[easylogic]

@search5 타입 정의 관련해서 jui-core 의 샘플을 한번 만들어봤는데요.

https://github.com/easylogic/DefinitelyTyped/blob/2017a7731f18f0038cb29b65d304733ea8d9aea4/jui-core/index.d.ts

필요한 부분만 일단은 했는데요.

이런식으로 구성하는게 맞는지 모르겠네요.

실제로 이렇게 구성이 되었을 때 TypeScript 에서 어떤식으로 쓰는지를 몰라서 애매하네요.

혹시 TypeScript 를 어떤식으로 쓰시는지 샘플 코드를 얻을 수 있을까요?

[search5]

@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');
    });
});

[easylogic]

@search5 혹시 아래 부분에서 xtable, paging 에서 Type 이 필요하신건가요?

jui.ready(["grid.xtable", "ui.paging"], function(xtable, paging) {    

[search5]

@easylogic 네, 사실 그런게 필요합니다.

[easylogic]

@search5

제가 잘 몰라서 그런데요.

만약에 타입이 주어지면 어떤식으로 동작하게 되는건가요?

그냥 껍데기인건지. 아님 실제 컴파일상의 오류도 같이 잡는것인지

[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 '$'.

[easylogic]

@search5 어떤 느낌인지 이해했습니다.

관련소스 좀 더 구성하고 알려드릴게요.

ps. $ 이거 같은 경우는 jQuery 로드하셔서 jQueryStatic 으로 타입을 잡으셔야 할 것 같네요.

[search5]

@easylogic 고맙습니다. 저도 계속 답변드릴게요 :)

[easylogic]

@search5

궁금한게 있습니다.

타입스크립트로 진행하시는거면 컴파일 타임에만 타입을 체크하나요?

아님 실행도중에도 체크하는건가요?

[search5]

@easylogic 컴파일 타임에만 타입을 체크합니다.

[search5]

@easylogic 그런데 노드JS를 안 써봐서 .. 아마 타입스크립트가 런타임 환경에서 동작 가능한 노드 JS 라면 런타임에도 체크할 공산이 큽니다.

[easylogic]

jui 도 진행중입니다. 절반 정도 한것 같네요. 8개 정도만 더 하면 될 듯 하고

https://github.com/easylogic/DefinitelyTyped/blob/3609ea4d9889c725c3dbd7fa97126ac37634d5fb/jui/index.d.ts

jui 쪽 끝나고 jui-grid 진행하면서 다시 공유드릴게요.

[search5]

@easylogic 아, 신속한 작업 고맙습니다.

[easylogic]

jui-core 랑 jui 에 대한 기본정의 파일은 다 작성했습니다.

jui-grid 쪽 해야겠네요.

[easylogic]

@search5

https://github.com/easylogic/DefinitelyTyped/commit/4b5e1d326353d68d5ec87bde7813085ddbbc3db5

일단 jui-grid 쪽 정의파일 까지는 했구여..

테스트 코드를 만든 다음에 원래 프로젝트에 PR 을 날려봐야겠네요.

혹시 그냥 npm 패키지에 index.d.ts 를 포함시켜서 나가면 실제 프로젝트에서 쓰실 수 있나요?

그러면 관리 하는 포인트가 줄어들 것 같아서요.

[search5]

@easylogic npm 패키지에 내려보내도 쓰는 것은 어렵지 않게 될것 같습니다. 그래도 DefinitelyTyped 에 공개되는 편이 좋을것 같습니다.

[easylogic]

@search5 그럼 최대한 2개다 적용 되도록 해놓을게요.

jui-grid 관련해서 샘플 만들어서 테스트 해보고 다시 진행사항 알려드리겠습니다.

[search5]

@easylogic 네, 고맙습니다.

[easylogic]

@search5

https://github.com/DefinitelyTyped/DefinitelyTyped/pull/13806

jui-core, jui, jui-grid 모두 해서 PR 날렸습니다.

등록되면 다시 알려드릴게요.

[easylogic]

@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 쪽으로 가서 돌리면 ㅋ 다른 문법으로 바꾸라고 빌드가 안되네요.

아 ~ 난감하다.

아무쪼록 구성 되는대로 알려드릴게요.

[search5]

@easylogic 넵, 지속적으로 작업해주셔서 정말 고맙습니다. 잘 받아서 사용할게요.

[easylogic]

@search5 타입 스크립트 쪽 정의 파일 머지 됐어요 이제 어떤식으로 테스트를 해봐야할 까요?