CodeFest 2014. Пугачев С. — Язык TypeScript или JavaScript на стероидах
Download as PPTX, PDF•1 like•1,321 views
Документ обсуждает преимущества TypeScript как усовершенствованной версии JavaScript, к которому добавлены опциональная статическая типизация и классы, что делает его более подходящим для масштабного программирования. Описаны ключевые аспекты языка, такие как возможность компиляции в JavaScript и совместимость с существующими библиотеками JavaScript. Также рассматриваются подходы к решению ограничений JavaScript для разработки более сложных приложений.
![Гибкость Производительность
“Think C++”“Think Script”
Простые сайты Сложные приложения, игры
var r = 3 * "10"; // r == 300
var a = new Array();
a.push(10);
var p = {x: 0, y: 0};
p.z = 5;
p["some text"] = 1;
p[1] = 2;
eval("var s = p[1] * a[0]"); // s == 20
var r = 3 * parseInt("10");
var a = new Array(100);
a[0] = 10;
var p = new Point(0, 0, 0);
p.z = 5;](https://image.slidesharecdn.com/spugachev-typescript-140330130556-phpapp01/85/CodeFest-2014-TypeScript-JavaScript-28-320.jpg)
![Типы
function toNumber(numberString: string,
...theArgs: number[]): number {
var num: number = parseFloat(numberString);
return num;
}](https://image.slidesharecdn.com/spugachev-typescript-140330130556-phpapp01/85/CodeFest-2014-TypeScript-JavaScript-43-320.jpg)
![Generics
interface IArray<T> {
map<TU>(callback:
(value: T, index: number, array: IArray<T>)
=> TU, thisArg?: any): Array<TU>;
}
var arrayOfStrings: IArray<string> = ['a', 'b', 'c'];
var arrayOfCharCodes: IArray<number> =
arrayOfStrings.map(
(value: string): number => value.charCodeAt(0));](https://image.slidesharecdn.com/spugachev-typescript-140330130556-phpapp01/85/CodeFest-2014-TypeScript-JavaScript-48-320.jpg)
![Классы
class Stateful extends Proxy {
constructor(kwArgs: Object) {
super(kwArgs);
}
get(key: string): any {
var getter: string = '_' + key + 'Getter';
return this[getter] ? this[getter]() :
super.get(key);
}
}](https://image.slidesharecdn.com/spugachev-typescript-140330130556-phpapp01/85/CodeFest-2014-TypeScript-JavaScript-49-320.jpg)
CodeFest 2014. Пугачев С. — Язык TypeScript или JavaScript на стероидах
- 1. TypeScript или JavaScript на стероидах author: { name: "Сергей Пугачёв", twitter: "@spugachev", company: "Microsoft Россия" };
- 3. Сегодня я бы хотел рассказать о 3 продуктах Microsoft…
- 5. Douglas Adams (автор «Автор автостопом по галактике») I've come up with a set of rules that describe our reactions to technologies: 1. Anything that is in the world when you’re born is normal and ordinary and is just a natural part of the way the world works. 2. Anything that's invented between when you’re fifteen and thirty-five is new and exciting and revolutionary and you can probably get a career in it. 3. Anything invented after you're thirty-five is against the natural order of things.
- 6. TypeScript Начинается с JavaScript Весь JavaScript код является TypeScript кодом Все JavaScript библиотеки работают с TypeScript Опциональная статическая типизация, классы, модули Хорошо подходит для масштабных приложений Нет Runtime издержек. Статическая типизация исчезает в Runtime Заканчивается на JavaScript Компилируется в JavaScript Запускается в любом браузере и любой ОС
- 7. TypeScript Начинается с JavaScript Весь JavaScript код является TypeScript кодом Все JavaScript библиотеки работают с TypeScript Опциональная статическая типизация, классы, модули Хорошо подходит для масштабных приложений Нет Runtime издержек. Статическая типизация исчезает в Runtime Заканчивается на JavaScript Компилируется в JavaScript Запускается в любом браузере и любой ОС
- 17. 2. Подходы к решению всех проблем
- 18. 1. Что не так с JavaScript?
- 21. “Никто больше не пишет на JavaScript. Все пишут на jQuery.” Скотт Хансельман
- 22. 1 10 100 1000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 Sunspiderrunsperminute(logscale) Internet Explorer производительность JavaScript
- 23. Закон Этвуда: всё, что может быть написано на JavaScript, будет написано на JavaScript.
- 26. "JavaScript – это ассемблер Web’а"
- 28. Гибкость Производительность “Think C++”“Think Script” Простые сайты Сложные приложения, игры var r = 3 * "10"; // r == 300 var a = new Array(); a.push(10); var p = {x: 0, y: 0}; p.z = 5; p["some text"] = 1; p[1] = 2; eval("var s = p[1] * a[0]"); // s == 20 var r = 3 * parseInt("10"); var a = new Array(100); a[0] = 10; var p = new Point(0, 0, 0); p.z = 5;
- 32. Что мы выяснили 1. JavaScript – ассемблер Web’а 2. JavaScript сам по себе мощный язык, на котором можно писать производительные приложения 3. JavaScript «не идеален» для создания больших проектов
- 33. 2. Подходы к решению всех проблем
- 34. • Компилировать язык в JavaScript • Создать новую виртуальную машину вместо JS 2 подхода
- 35. var Greeter = (function () { function Greeter(greeting) { this.greeting = greeting; } Greeter.prototype.greet = function () { return "<h1>" + this.greeting + "</h1>"; }; return Greeter; } )(); var greeter = new Greeter("Hello, world!"); var str = greeter.greet(); document.body.innerHTML = str; class Greeter { greeting: string; constructor(greeting: string) { this.greeting = greeting; } greet() { return "<h1>"+this.greeting+"</h1>"; } } var greeter = new Greeter("Hello, world!"); var str = greeter.greet(); document.body.innerHTML = str; TypeScript
- 36. var Greeter = (function () { function Greeter(greeting) { this.greeting = greeting; } Greeter.prototype.greet = function () { return "<h1>" + this.greeting + "</h1>"; }; return Greeter; } )(); var greeter = new Greeter("Hello, world!"); var str = greeter.greet(); document.body.innerHTML = str; class Greeter constructor: (@greeting) -> @greet -> return "<h1>" + this.greeting + "</h1>"; greeter = new Greeter("Hello, world!"); str = greeter.greet() document.body.innerHTML = str CoffeeScript
- 43. Типы function toNumber(numberString: string, ...theArgs: number[]): number { var num: number = parseFloat(numberString); return num; }
- 44. Перегрузка function numberStringSwap(value: number, radix?: number): string; function numberStringSwap(value: string): number; function numberStringSwap(value: any, radix: number = 10): any { if (typeof value === 'string') { return parseInt(value, radix); } else if (typeof value === 'number') { return String(value); } }
- 45. Типы var point: { x: number; y: number; }; point = { x: 0, y: 0 }; // OK point = { x: 0, y: 0, z: 0 }; // OK point = { x: 'zero', y: 0 }; // Error point = { x: 0 }; // Error
- 46. Интерфейсы interface IPoint { x: number; y: number; } interface IPoint3D extends IPoint { z: number; } var point: IPoint; var point2: IPoint3D;
- 47. Интерфейсы interface IPoint { x: number; y: number; z?: number; toGeo(): IPoint; }
- 48. Generics interface IArray<T> { map<TU>(callback: (value: T, index: number, array: IArray<T>) => TU, thisArg?: any): Array<TU>; } var arrayOfStrings: IArray<string> = ['a', 'b', 'c']; var arrayOfCharCodes: IArray<number> = arrayOfStrings.map( (value: string): number => value.charCodeAt(0));
- 49. Классы class Stateful extends Proxy { constructor(kwArgs: Object) { super(kwArgs); } get(key: string): any { var getter: string = '_' + key + 'Getter'; return this[getter] ? this[getter]() : super.get(key); } }
- 50. Enums enum Style { NONE = 0, BOLD = 1, ITALIC = 2, UNDERLINE = 4, EMPHASIS = Style.BOLD | Style.ITALIC, HYPERLINK = Style.BOLD | Style.UNDERLINE }
- 51. Модули module Shapes { export class Rectangle { constructor( public height: number, public width: number) { } } }