typescript로 moment.js를 어떻게 가져올 수 있습니까?


96

Typescript를 배우려고합니다. 관련성이 없다고 생각하지만이 데모에서는 VSCode를 사용하고 있습니다.

나는이 package.json거기에이 조각을 가지고 그 :

{
  "devDependencies": {
    "gulp": "^3.9.1",
    "jspm": "^0.16.33",
    "typescript": "^1.8.10"
  },
  "jspm": {
    "moment": "npm:moment@^2.12.0"
  }
}

그런 다음 다음 main.js과 같은 Typescript 클래스가 있습니다 .

import moment from 'moment';
export class Main {
}

gulpfile.js모습은 다음과 같습니다.

var gulp = require('gulp');
var typescript = require('gulp-tsb');
var compilerOptions = {
                        "rootDir": "src/",
                        "sourceMap": true,
                        "target": "es5",
                        "module": "amd",
                        "declaration": false,
                        "noImplicitAny": false,
                        "noResolve": true,
                        "removeComments": true,
                        "noLib": false,
                        "emitDecoratorMetadata": true,
                        "experimentalDecorators": true
                      };
var typescriptCompiler = typescript.create(compilerOptions);
gulp.task('build', function() {
  return gulp.src('/src')
    .pipe(typescriptCompiler())
    .pipe(gulp.dest('/dest'));
});

gulp 빌드를 실행하면 다음 메시지가 표시됩니다. "../main.ts(1,25): Cannot file module 'moment'."

사용 import moment = require('moment');하면 jspm이 작동하고 응용 프로그램을 실행할 때 모듈을 가져 오지만 여전히 빌드 오류가 발생합니다. 나는 또한 시도했다 :

npm install typings -g
typings install moment --ambient --save

하지만 문제를 개선하는 대신 악화되었습니다. 이제 빌드에서 위의 오류와 다음과 같은 오류가 발생합니다."../typings/browser/ambient/moment/index.d.ts(9,21): Cannot find namespace 'moment'."

입력을 통해 제공된 파일로 이동하여 파일 하단에 추가하면 :

declare module "moment" { export = moment; }

두 번째 오류가 사라질 수 있지만 내 main.ts파일 에서 작업 할 순간을 얻으려면 require 문이 여전히 필요하며 여전히 첫 번째 빌드 오류가 발생합니다.

.d.ts잠시 내 고유 한 파일 을 만들어야 합니까? 아니면 누락 된 설정 부분이 있습니까?


1
지금에 실행 사람에 대한이 업데이트를 추가 : import moment, { Moment } from 'moment';당신이 할 수 있습니다 const x = moment();const x: Moment = moment();
ryuu9187

이 솔루션 중 어느 것도 작동하지 않았으며
chrismarx

답변:


124

최신 정보

분명히 moment는 이제 자체 유형 정의를 제공하므로 ( 최소한 2.14.1 이상 sivabudh 에 따라 ) 필요 typings하거나 전혀 필요하지 않습니다 @types.

import * as moment from 'moment' npm 패키지와 함께 제공되는 유형 정의를로드해야합니다.

그러나 moment / pull / 3319 # issuecomment-263752265 에서 말했듯 이 순간 팀은 이러한 정의를 유지하는 데 몇 가지 문제가있는 것 같습니다 (아직도이를 유지하는 사람을 찾고 있습니다) .


플래그 moment없이 타이핑 을 설치해야합니다 --ambient.

그런 다음 import * as moment from 'moment'


작동했습니다. --ambient플래그 를 사용하는 것과 사용 하지 않는 것의 차이점을 설명 할 수 있습니까 ? 앰비언트 플래그를 사용하여 작동하도록 numericjs를 얻었습니다. 또한 메인 페이지 npmjs.com/package/typings 는 앰비언트 플래그를 사용하는 예제를 제공합니다. 언제 다른 하나를 사용하고 싶거나 필요로하는지 모르겠습니다. 감사!
peinearydevelopment

1
솔직히 말해서 할 수 없습니다. 일반적으로 /의 --ambient모든 Typescript 정의에 플래그를 사용 하지만 정의에 이상한 구조가 있고 파일이 올바르게 다운로드되지 않습니다. moment.d.ts 정의 파일을 보면 다운로드시 해결되지 않는 노드 버전에 대한 참조 만 포함됩니다 (문제를 열어 볼 가치가있을 수 있음). typingsDefinitelyTypedmoment
Aides

분명히이 문제와 관련된 것이 이미 있습니다 : github.com/DefinitelyTyped/DefinitelyTyped/issues/8388
peinearydevelopment

1
'moment / moment'b / c에서 import *를 사용하여 작동하도록했습니다. b / c 노드 모듈 폴더의 하위 폴더로 설치되었습니다.
user441058

1
나는 웹팩이고 순간 버전 2.17.1을 사용하고 있지만 여전히 작동하지 않습니다. 나는 시도했다 : import * as moment from 'moment'; 그리고 *를 '순간 / 순간'에서 순간으로 가져옵니다. 작동하지 않습니다!
Mohy Eldeen

59

TS에서 별도로 moment () 함수와 Moment 클래스 를 가져와야 합니다.

여기 typescript 문서 에서 메모를 찾았 습니다 .

/ * ~ ES6 모듈은 호출 가능한 함수를 직접 내보낼 수 없습니다.
* ~이 파일은 CommonJS 스타일을 사용하여 가져와야합니다.
* ~ import x = require ( 'someLibrary');

따라서 moment js를 typescript로 가져 오는 코드는 실제로 다음과 같습니다.

import { Moment } from 'moment'
....
let moment = require('moment');
...
interface SomeTime {
  aMoment: Moment,
}
...
fn() {
  ...
  someTime.aMoment = moment(...);
  ...
}

1
유형과 기능의 차이를 보여주기 때문에 좋은 대답입니다. 감사!
Jelle den Burger

'require'라는 이름을 찾을 수 없음
Coded Container

4
이제 이것은 타자에 import * as moment from 'moment';사용할 수 있습니다 moment.Moment.
meteor

나를 위해 일한 것은 다음과 같습니다. import moment = require ( 'moment');
Telmo Pimentel Mota

사실 당신은 또한 사용할 수있는 moment.Moment공간에서 직접 인터페이스moment
HalfWebDev

20

이것이 언제 변경되었는지 확실하지 않지만 최신 버전의 typescript를 사용하면 import moment from 'moment';다른 모든 것이 정상적으로 작동합니다.

최신 정보:

최근에 수입을 고친 것 같습니다. 적어도 2.24.0당신은 사용하고 싶을 것입니다import * as moment from 'moment';


5
import * as moment from 'moment'typescript에서는 import moment from 'moment'작동하지 않지만 작동합니다.
Stuart McIntyre 2018

작동하지만 GMT 0의 시간을 얻고 있지만 작동하지 않는 현지 시간이 필요합니다. moment (). utc (). format () 시도하지만 동일한 결과를 되돌리고 있습니다.
kbhaskar

@kbhaskar는 가져 오기를 수정 한 최신 버전을 기준으로합니다. 업데이트 된 대답을 참조하십시오
NSjonas

1
나는 이것이 거의 다라고 생각합니다. 내가해야 할 유일한 추가 단계 는 이 답변 에서 얻은 구성에 esModuleInteropset을 추가 true하는 입니다. 감사.
Mark Birbeck

14

타이핑을 통해

Moment.js는 이제 v2.14.1에서 TypeScript를 지원합니다.

참조 : https://github.com/moment/moment/pull/3280


직접

최선의 답은 아닐 수도 있지만 이것은 무차별 대입 방식이며 저에게 효과적입니다.

  1. 실제 moment.js파일을 다운로드 하여 프로젝트에 포함하기 만하면 됩니다.
  2. 예를 들어 내 프로젝트는 다음과 같습니다.

$ tree . ├── main.js ├── main.js.map ├── main.ts └── moment.js

  1. 다음은 샘플 소스 코드입니다.

```

import * as moment from 'moment';

class HelloWorld {
    public hello(input:string):string {
        if (input === '') {
            return "Hello, World!";
        }
        else {
            return "Hello, " + input + "!";
        }
    }
}

let h = new HelloWorld();
console.log(moment().format('YYYY-MM-DD HH:mm:ss'));
  1. node실행 하는 데 사용하십시오 main.js.

예, 이것이 어려운 답변임을 확인합니다. 매력처럼 작동했습니다.
Capy

npm i @ types / moment를 사용하여이 작업을 수행하려고하면 다음 오류가 표시됩니다. TypeScript 오류 : src \ app.ts (1,1) : 오류 TS7038 : 네임 스페이스 스타일 가져 오기를 호출하거나 생성 할 수 없으며 런타임시 실패. tsc -v 2.7.2
GONeale

2

제가 찬성하고 댓글을 단 답변이 모호하다는 것을 방금 깨달았습니다. 그래서 다음은 정확히 나를 위해 일한 것입니다. 현재 Moment 2.26.0및 TS에 있습니다 3.8.3.

코드에서 :

import moment from 'moment';

TS 구성에서 :

{
  "compilerOptions": {
    "esModuleInterop": true,
    ...
  }
}

CommonJS와 EMS 를 모두 구축 중이므로이 구성을 다른 구성 파일로 가져옵니다.

통찰력은 Express 사용과 관련된 이 답변 에서 비롯됩니다 . 더 일반적인 것이 아니라 Moment.js와 관련하여 검색하는 모든 사람을 돕기 위해 여기에 추가 할 가치가 있다고 생각했습니다.


그럼 당신은 moment()대신 일반처럼 사용할 수 있습니다moment.default()
xinthose


0

아직도 망가 졌나요? 을 제거해보십시오 @types/moment.

그래서 파일 @types/moment에서 패키지를 제거 package.json하고 다음을 사용하여 작동했습니다.

import * as moment from 'moment'

최신 버전의 moment을 필요로하지 않습니다@types/moment 유형이 이미 포함되어 있으므로 패키지가 .

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.