Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
TypeScript
Write JavaScript the way you really want to
Rūtenis Turčinas - rutenis.turcinas@gmail.com
Author
 Rūtenis Turčinas
 rutenis.turcinas@gmail.com
 https://github.com/rootis/jug-topic-1.git
http://www.typescriptlang.org/Content/TypeScript Language Specification.pdf
Agenda
Specification Integration
BuildClean Code
Questions Thoughts Suggestions
TypeScript. What is it? Do we need it?
 TypeScript is a typed superset of JavaScript that compiles to plain JavaScript
 ...
Difference between other languages
 CoffeeScript
 More differences from JavaScript
 You can not use plain JavaScript in...
How TypeScript works?
 TypeScript file: test.ts
 > tsc test.ts
 Compiler makes test.js file
 JavaScript file will be e...
Hello World!
Data types
 boolean
 number
 string
 Array
 enum
 any (try to avoid it)
 void
Statements, loops, functions
 Simple variable assignment
 var variableName: dataType = value;
 Variable which data type...
Classes, interfaces, methods
interface UsersGroup {
getLanguage: () => string;
}
class Jug implements UsersGroup {
public ...
Inheritance, overriding
class KaunasJug extends Jug {
protected getJavaVersion(): number {
return 1.8;
}
}
function printU...
Overloading
interface UsersGroup {
getLanguage(isUpperCase: boolean): string;
getLanguage(versionPrefix: string): string;
...
Generics
function printProperty<T>(property: T): void {
console.log(property);
}
interface UserGroupArray<T extends Langua...
Lambdas (use as little as possible)
class JavaUsersGroup {
private city: string;
constructor(city: string) {
this.city = c...
Modules
module usersGroup {
export class API {
public static init(data: any) {
new ViewModel(data.someJSON);
}
}
class Vie...
External libraries
 Large API, difficult to use, hard to remember: actions, events, properties, sub
modules...
 For exam...
DefinetlyTyped - *.d.ts
 Declaration file (*.d.ts) describes the library or module
 > tsc --declaration file.ts
declare ...
Definition manager - tsd
 LOTS of the *.d.ts files are here: https://github.com/borisyankov/DefinitelyTyped
 But its har...
Libraries without *.d.ts or legacy code
 We are using super secret library...
 In our project exists lots of legacy code...
Dependency management tools
 Internal modules
 External modules: import $ = require('jquery');
 commonJS
 --module com...
How to write TypeScript correctly?
 TypeScript also can be terrible... if its plain JavaScript
 How to prevent it?
 Use...
Decouple modules
 Most of the times JavaScript logic lives in one place
 Large files tightly coupled in different ways
...
Single responsibility for every item
 One module/class/method should be responsible just for one thing
 Currently we are...
Hide as much as possible
 Encapsulate code
 Export only public API
 One file - one module
 Except – model entities
 M...
Try to keep code in first level
 JAVA developers can feel much more convenient by having source code in first
level
 Les...
OK. But my friend uses SunOS and VIM
for editing source code. Can he..?
 Sure thing!
One more thing… Production needs one
file rather than 3
 For development we want all files: *.ts, *.js, *.js.map
 But fo...
Large project. Lots of code.
How to test it?
 Karma, Jasmine, Mocha, tsJunit, Qjunit, ...
 Karma tests can be binded or ...
Minuses in TypeScript
 Eclipse IDE
 After compiler version update your code may be broken...
Questions Thoughts Suggestions
Prochain SlideShare
Chargement dans…5
×

TypeScript - Silver Bullet for the Full-stack Developers

19 342 vues

Publié le

TypeScript lets you write JavaScript the way you really want to Its a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source. Enjoy writing JavaScript.

Publié dans : Logiciels
  • Soyez le premier à commenter

TypeScript - Silver Bullet for the Full-stack Developers

  1. 1. TypeScript Write JavaScript the way you really want to Rūtenis Turčinas - rutenis.turcinas@gmail.com
  2. 2. Author  Rūtenis Turčinas  rutenis.turcinas@gmail.com  https://github.com/rootis/jug-topic-1.git
  3. 3. http://www.typescriptlang.org/Content/TypeScript Language Specification.pdf
  4. 4. Agenda Specification Integration BuildClean Code
  5. 5. Questions Thoughts Suggestions
  6. 6. TypeScript. What is it? Do we need it?  TypeScript is a typed superset of JavaScript that compiles to plain JavaScript  Made by Microsoft  Open Source  Google had plans to release AtScript language, but desided to use TypeScript  Google and Microsoft are writing the Angular 2 framework in TypeScript  If your project uses JavaScript – TypeScript would be better
  7. 7. Difference between other languages  CoffeeScript  More differences from JavaScript  You can not use plain JavaScript in *.coffee files  Dart  Has an own virtual machine  Browser manufacturers has no plans to support Dart in the near future
  8. 8. How TypeScript works?  TypeScript file: test.ts  > tsc test.ts  Compiler makes test.js file  JavaScript file will be executed by browser  > tsc test.ts –sourcemap  Compiler makes the same test.js and one more file: test.js.map  Map file used to map *.js with *.ts file lines (to debug *.ts file instead of *.js)
  9. 9. Hello World!
  10. 10. Data types  boolean  number  string  Array  enum  any (try to avoid it)  void
  11. 11. Statements, loops, functions  Simple variable assignment  var variableName: dataType = value;  Variable which data type is a function  var variableName: (paramName: dataType) => returnType = value;  Complex data type (do not use such data types)  var person: {name: string; surname: string; age: number, isMale: () => boolean} = null;
  12. 12. Classes, interfaces, methods interface UsersGroup { getLanguage: () => string; } class Jug implements UsersGroup { public getLanguage(): string { return "Java " + this.getJavaVersionTitle(); } protected getJavaVersion(): number { return 1.7; } private getJavaVersionTitle(): string { return "v" + this.getJavaVersion(); } }
  13. 13. Inheritance, overriding class KaunasJug extends Jug { protected getJavaVersion(): number { return 1.8; } } function printUsersGroupLanguage(usersGroup: UsersGroup): void { console.log(usersGroup.getLanguage()); } printUsersGroupLanguage(new Jug()); printUsersGroupLanguage(new KaunasJug());
  14. 14. Overloading interface UsersGroup { getLanguage(isUpperCase: boolean): string; getLanguage(versionPrefix: string): string; } class KaunasJug implements UsersGroup { getLanguage(property?: any): string { if (typeof property === 'boolean'){ return property ? "JAVA v1.8" : "Java v1.8"; } else if (typeof property === "string") { return "Java " + property + "1.8"; } } }
  15. 15. Generics function printProperty<T>(property: T): void { console.log(property); } interface UserGroupArray<T extends Language> { add(... languages: T[]): void; printAllGroups(): void; }
  16. 16. Lambdas (use as little as possible) class JavaUsersGroup { private city: string; constructor(city: string) { this.city = city; } public printTitle1(): void { console.log(this.city + " JUG"); } public printTitle2 = (): void => { console.log(this.city + " JUG"); }; }
  17. 17. Modules module usersGroup { export class API { public static init(data: any) { new ViewModel(data.someJSON); } } class ViewModel { constructor(jsonDataToLoad: string) { console.log('Loading...'); } } class SomeInnerClass { } }
  18. 18. External libraries  Large API, difficult to use, hard to remember: actions, events, properties, sub modules...  For example: using selector you get jQuery object. You want to get it‘s specific child. Which method to use? Can you use the selector?  99% of developers would use google. More convenient to use ctrl+space and get the suggestion:  And if you try to do something ridiculous – the code won‘t compile:
  19. 19. DefinetlyTyped - *.d.ts  Declaration file (*.d.ts) describes the library or module  > tsc --declaration file.ts declare module usersGroup { class API { static init(data: any): void; } }
  20. 20. Definition manager - tsd  LOTS of the *.d.ts files are here: https://github.com/borisyankov/DefinitelyTyped  But its hard to search and download... Is there a better way?  > npm install tsd –g  E.g. you want to use library lodash  Does it has lodash.d.ts file? Which version?  > tsd query lodash  Yes! It exists. We want to download lodash.d.ts file  > tsd install lodash –save  Using -save you wil store the information about installed *.d.ts in tsd.json
  21. 21. Libraries without *.d.ts or legacy code  We are using super secret library...  In our project exists lots of legacy code...  But we still want to use TypeScript!  What to do?  Need to create declaration file for that library or legacy code (*.d.ts) interface A_Static { new(m: any): A_Instance; st: string; } interface A_Instance { inst: number; } declare var A: A_Static;
  22. 22. Dependency management tools  Internal modules  External modules: import $ = require('jquery');  commonJS  --module commonjs  AMD - requireJS  --module amd
  23. 23. How to write TypeScript correctly?  TypeScript also can be terrible... if its plain JavaScript  How to prevent it?  Use simple rules:  Every variable, property, or function result – must have defined data type  Never use any data type  Use same clean code conventions like in server side
  24. 24. Decouple modules  Most of the times JavaScript logic lives in one place  Large files tightly coupled in different ways  Impossible to do refactoring without bugs  How to solve it?  Decouple logic to different modules  Don‘t copy paste, just depend on some module  Define strict public API for integration with other modules
  25. 25. Single responsibility for every item  One module/class/method should be responsible just for one thing  Currently we are trying one approach:  If length of file is more than 200 lines – we should rethink: is it only responsible for one thing?  If length of method is more than 5 lines – we should rethink: is it only responsible for one thing?  In our project:  97% of files have <= 200 lines  72% of methods have <= 5 lines (in 4 files: ~200, ~180, ~150, ~120)
  26. 26. Hide as much as possible  Encapsulate code  Export only public API  One file - one module  Except – model entities  Much easier to refactor hidden code
  27. 27. Try to keep code in first level  JAVA developers can feel much more convenient by having source code in first level  Less complexity  Easyer to understand and support
  28. 28. OK. But my friend uses SunOS and VIM for editing source code. Can he..?  Sure thing!
  29. 29. One more thing… Production needs one file rather than 3  For development we want all files: *.ts, *.js, *.js.map  But for production we want only one: compressed *.js  You can configure build scripts  E.g. maven resource filtering
  30. 30. Large project. Lots of code. How to test it?  Karma, Jasmine, Mocha, tsJunit, Qjunit, ...  Karma tests can be binded or decoupled from back end unit tests  Binded tests can be skipped together with java tests using –DskipTests  Decoupled tests can be skipped separate from java tests using custom properties
  31. 31. Minuses in TypeScript  Eclipse IDE  After compiler version update your code may be broken...
  32. 32. Questions Thoughts Suggestions

×