홈>

외부 라이브러리의 유형을 정의하는 방법 TypeScript, Angular 및 Google Picker

Angular 4 앱에서 Google Picker API를 사용하려고합니다. Google Picker의 기능을 사용하려면 라이브러리를 가져와야하며 index.html 파일에서해야합니다.

index.html :

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="theme-color" content="#2185d0">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <title>Librostic</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="https://use.fontawesome.com/18845e1b3c.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One" rel="stylesheet">
</head>
<body>
  <app-root>
  </app-root>
  <!-- See the bellow script -->
  <script type="text/javascript" src="https://apis.google.com/js/api.js?onload=onApiLoad"></script> 
</body>
<script>
  $('.ui.dropdown')
    .dropdown()
  ;
</script>
</html>

그래서 문제는 Typescript가 무엇인지 모르기 때문에 몇 가지 방법을 사용하려고하는 곳입니다. 예를 보자. 다음과 같은 기능이 있습니다 :

function createPicker() {
      if (pickerApiLoaded && oauthToken) {
        // Here I get errors like: Cannot find name 'google'.
        var view = new google.picker.View(google.picker.ViewId.DOCS);
        view.setMimeTypes('application/pdf');
        var picker = new google.picker.PickerBuilder()
          .enableFeature(google.picker.Feature.NAV_HIDDEN)
          .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
          .setAppId(appId)
          .setOAuthToken(oauthToken)
          .addView(view)
          .addView(new google.picker.DocsUploadView())
          .setDeveloperKey(developerKey)
          .setCallback(pickerCallback)
          .build();
        picker.setVisible(true);
      }
    }

이것은 TypeScript 오류 일 뿐이며 TS 컴파일러없이 함수가 실행된다는 것을 의미합니다. 이 문제를 어떻게 해결할 수 있습니까? 감사합니다!

angulartypescriptgoogle-picker
  • 답변 # 1

    CRice의 답변 확대

    당신이 찾고있는 npm install @types/google.picker @types/gapi.client --save-dev

  • 답변 # 2

    누군가이 라이브러리에 대해 이미 작성된 유형일 수 있습니다. 많은 라이브러리에 대한 정의를 보유하고있는이 저장소를 확인해야합니다. 일반적으로 npm install @types/<library-name> --save-dev 를 사용하여 이러한 정의를 설치할 수 있습니다. .

    그렇지 않으면, 이미 작성된 정의가없고 사물을 다루고 싶다면 라이브러리를 임의의 이름으로 선언하여 타이프 스크립트를 침묵시킬 수 있습니다 (예 : declare const google: any; ).  파일 상단에. 그러나 그렇게하면 라이브러리를 사용할 때 모든 유형의 안전을 잃게됩니다.

관련 자료

  • 이전 Lucene 쿼리를 사용하여 야외 공유 UI에서 특정 컨텐츠 유형 문서 수를 얻는 방법
  • 다음 validation - 레일즈 콜백이 작동하지 않습니다
    • 관련 질문