저의 팀과 저는 유명한 자바 스크립트 라이브러리 (jQuery, Backbone, Underscore 등)의 이전 버전을 사용하는 대규모 웹 응용 프로그램 프로젝트를 구축하고 있습니다. 우리는 현재 새로운 솔루션과 기존 JavaScript 코드를 대체하기 위해 TypeScript를 단계적으로 사용하려고합니다. 우리 프로젝트는 특정 JS 라이브러리 버전 (예 : jQuery 1.8.3)에 크게 의존하므로이 라이브러리를 최신 버전으로 업데이트하는 것은 최신 버전을 다운로드하고 삭제하는 것보다 약간 더 복잡합니다.업데이트 된 TypeScript로 날짜가 지정된 JavaScript 라이브러리 통합
이로 인해 TypeScript에서 단계적으로 문제가 발생합니다. 우리는 최신 TypeScript 표준과 호환되는 날짜가 지정된 JS 라이브러리 버전의 선언이 필요합니다. DefinitelyTyped이 타이프의 최신 버전에 JS 라이브러리의 최신 버전 선언 파일을 제공하는 훌륭한 일을하지만, 최신와 호환 오래된 JS 라이브러리 버전의 선언 파일을 제공하지 않습니다 TypeScript 표준.
TypeScript가 커짐에 따라 이전 라이브러리 선언 (예 : jQuery-1.8.3.d.ts)이 모두 동시에 진화하고 있기 때문에 먼지에 남아있는 것 같습니다. 이는 새로운 TypeScript 표준과 호환되도록 날짜가 지정된 라이브러리 선언 파일을 지속적으로 업데이트하기 위해 커뮤니티에 많은 노력을 기울일 것으로 기대하지 않기 때문에 완전히 이해할 수 있습니다.
내 질문은 : 오래된 JS 라이브러리에 많이 의존하는 새로운 TypeScript 코드에서 단계적으로 진행하는 가장 좋은 방법은 무엇입니까?
다음은 내가 겪고있는 문제의 예입니다. 기본적으로 TypeScript를 사용하여 백본 응용 프로그램을 만들려고합니다.
// Model.ts
import Backbone = require("backbone");
export class NewModel extends Backbone.Model {
...
}
우리가 require.js와 AMD를 사용하고 있기 때문에 우리는 다음과 같은 무언가를 얻을 :
// Model.js
...
define(['require', 'exports', 'backbone'], function(require, exports, Backbone) {
...
}
이 큰이며 정확하게 우리가 우리의 require.config 파일 때문에 원하는 출력의
// Config.ts
require.config({
baseUrl: './',
paths: {
'jquery': '../jquery-1.8.3.min',
'underscore': '../underscore/underscore.min',
'backbone': '../backbone/backbone',
'text': '../require/text'
},
shim: {
jquery: {
exports: '$'
},
underscore: {
exports: '_'
},
backbone: {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
});
그러나 타이프 라이터 우리가 backbone.d이 없으면 우리가이 코드를 컴파일 할 수 없습니다 : 우리가 필요로하는 모든 라이브러리를 정의 .ts은 backbone.js 라이브러리의 구조를 설명하고 "백본"모듈의 앰비언트 선언을 제공합니다.
// backbone.d.ts
declare module Backbone {
...
export class Model extends ModelBase {
...
}
...
}
declare module 'backbone' {
export = Backbone;
}
// Model.ts
/// <reference path="path/to/backbone.d.ts" />
import Backbone = require("backbone")
export class NewModel extends Backbone.Model {
...
}
우리는 이러한 선언을하지 않은 경우
다음 우리는 백본 모듈의 더 주변 선언이없고, 따라서Backbone.Model는 어디 클래스로 정의되어 있지 않습니다하지
extend Backbone.Model 타이프에서 수 있기 때문이다.
Model 클래스 유형이 버전에 관계없이 모든 'backbone.d.ts'파일에 존재하기 때문에 약간 과장된 샘플 문제입니다. 그러나 정확한 .dts 파일이 없으면 코드가 손상 될 수있는 JS 라이브러리의 미묘한 변경 사항이 있습니다.
그렇다고해서 연결된 JS 라이브러리가 실제로 존재하는 부분 만 사용하는 한 더 최근 버전의 .d.ts 파일 (우리가 해왔 던)을 사용할 수 있습니다. 오래 당신이 그들을 직접 사용합니다.그렇지 않으면 존재하지 않는 함수를 사용하거나 너무 많은 매개 변수를 전달하면 함수가 실제로 호출 될 때만 오류가 표시됩니다. TypeScript는 그 정보가 .d.ts 파일의 정보만을 기반으로하므로 선택하지 않습니다. 다음 생성 할
// Model.ts
/// <amd-dependency path="backbone" />
var Backbone = require("backbone");
export class NewModel extends Backbone.Model {
...
}
:
우리는 AMD의 의존성 해결 방법 같은과 함께 사용하여 define 요구 사항을 생성 할 수
// Model.js
...
define(['require', 'exports', 'backbone'], function(require, exports) {
var Backbone = require('backbone');
...
}
이 우리에게 Backbone 참조를 제공을 그 우리가 선언하고있는 변수 Backbone에 대한 지식이 없기 때문에 TypeScript는 여전히 불평합니다. 즉, .dts 파일이 제공하는 구조를 제공하지 않습니다.
대부분의 우리의 TypeScript 솔루션은 .js 파일과 관련 .dts 파일 간의 상관 관계가 부족함에도 불구하고 실제로 작동해야합니다. 내 관심사는 다음과 같습니다. 향후이 불일치로 인해 응용 프로그램의 주요 문제가 발생합니까?
는 바로 지금, 내가 생각할 수있는 최선의 솔루션에 있습니다 얻기
- .d.ts 버전에 가장 가까운 우리의 JS 라이브러리 버전과 그들이 최신 타이프 라이터 표준과 호환되도록을 업데이트 .
- 가장 최근의 .dts 파일을 사용하여 문제가 발생할 때마다 업데이트하십시오.
저는 다른 해결책에 대해 특히 감탄하지 않습니다. 그래서 나는 다른 의견을 제시합니다. 아직이 시점에 나와 함께있는 사람이 있다면 (미안하다), 제안 된 해결책에 대해 고맙게 생각합니다.