TypeScript для приложений Магазина Windows 8

• Создание простого класса
• Расширение класса с помощью наследования
• Использование сервисов определения местоположения
• Получение статической карты из Google Maps API
• Вставка элемента управления изображением на страницу.

///<reference path='win.ts'/>
 
module Data {
 
    class Location {
        longitude: any;
        latitude: any;
        url: string;
    }
 
    class MyLocation extends Location {
        retrieved: any;
    }
};

Javascript :

var __extends = this.__extends || function (d, b) {
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
}
 
var Data;
(function (Data) {
    var Location = (function () {
        function Location() { }
        return Location;
    })();  
 
    var MyLocation = (function (_super) {
        __extends(MyLocation, _super);
        function MyLocation() {
            _super.apply(this, arguments);
        }
        return MyLocation;
    })(Location);  
})(Data || (Data = {}));
; ;

Снимок экрана только для того, чтобы увидеть, что показывают в VS 2012

Не уверен насчет вас, но я не хотел бы писать код наследования для Javscript, TypeScript убивает его там! Хорошо, давайте двигаться дальше. Далее я добавлю функцию, чтобы получить местоположение с устройства, заполнить объект myLoc, а затем создать и вставить изображение в тело страницы.

Обратите внимание, что TypeScript и Javacript для этого одинаковы, разница здесь в том, что у нас есть типобезопасный код.

TypeScript :

var locator = new Windows.Devices.Geolocation.Geolocator();
 
  locator.getGeopositionAsync().then(function (pos) {
   
      var myLoc = new MyLocation();
      myLoc.latitude = pos.coordinate.latitude;
      myLoc.longitude = pos.coordinate.longitude;
 
      myLoc.retrieved = Date.now;
      myLoc.url = "http://maps.googleapis.com/maps/api/staticmap?center="
          + myLoc.latitude + "," + myLoc.longitude
          + "&zoom=12&size=400x400&sensor=false";
 
      // add a new img tag to the document
      var img = document.createElement("img");
      // set the src and style
      img.setAttribute("src", myLoc.url);
      img.setAttribute("style", "height:400px;width:400px;");
         
      // get the paragraph tag we set for the location of the content
      var p = document.body.getElementsByTagName("p")[0];
      p.appendChild(img);

Когда вы нажмете «Сохранить», вы заметите, что в строке состояния в левом нижнем углу Visual Studio будет отображаться «Компиляция TypeScript …», а затем полученный Javascript обновится / отобразится на правой панели. Важно отметить, что если у вас открыт файл js, вы получите приглашение
«Такой и такой файл открыт, вы хотите перезагрузить» .

Прежде чем запускать приложение, убедитесь, что вы включили возможности Location в файле манифеста пакета, как показано ниже, или вы получите неприятное окно сообщения, сообщающее, что вы этого не сделали.

Хорошо, нажмите F5 и посмотрите результаты.

Сначала вы получите приглашение «Позвольте мне использовать службы определения местоположения».

Советы и хитрости

Вывод