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.

1. TypeScript
Write JavaScript the way you really want to
Rūtenis Turčinas - rutenis.turcinas@gmail.com

2. Author
 Rūtenis Turčinas
 rutenis.turcinas@gmail.com
 https://github.com/rootis/jug-topic-1.git

3. http://www.typescriptlang.org/Content/TypeScript Language Specification.pdf

4. Agenda
Specification Integration
BuildClean Code

5. Questions Thoughts Suggestions

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. 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. 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. Hello World!

10. Data types
 boolean
 number
 string
 Array
 enum
 any (try to avoid it)
 void

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. 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. 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. 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. Generics
function printProperty<T>(property: T): void {
console.log(property);
}
interface UserGroupArray<T extends Language> {
add(... languages: T[]): void;
printAllGroups(): void;
}

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. 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. 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. 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. 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. 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. Dependency management tools
 Internal modules
 External modules: import $ = require('jquery');
 commonJS
 --module commonjs
 AMD - requireJS
 --module amd

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. 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. 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. 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. 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. OK. But my friend uses SunOS and VIM
for editing source code. Can he..?
 Sure thing!

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. 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. Minuses in TypeScript
 Eclipse IDE
 After compiler version update your code may be broken...

32. Questions Thoughts Suggestions