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.