Wanghao: /* Understanding Typing, Variables, and Functions ⌘ */

2017-11-02T12:25:57Z

Understanding Typing, Variables, and Functions ⌘

New page

[[Category:private]]
<slideshow style="nobleprog" headingmark="⌘" incmark="…" scaled="true" font="Trebuchet MS" >
;title: TypeScript 2
;author: Hao Wang
</slideshow>

== Introduction ⌘==

*ECMAScript2015/ES2015/ES6
<big>node --v8-options | grep "in progress"</big>

== Installing TypeScript ⌘==

== Preparing a TypeScript project ⌘==

== Understanding Typing, Variables, and Functions ⌘==
== Basic Types ⌘==
=== Basic Types - boolean ⌘===
* let isDone: boolean = false;
=== Basic Types - number ⌘===
<pre>
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
</pre>
=== Basic Types - string ⌘===
<pre>
let color: string = "blue";
color = 'red';
</pre>
=== Basic Types - string - use template string ⌘===
<pre>
`let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ fullName }.

I'll be ${ age + 1 } years old next month.`;
</pre>
=== Basic Types - Array ⌘===
* let list: number[] = [1, 2, 3];
* let list: Array<number> = [1, 2, 3];

=== Basic Types - Enum ⌘===
<pre>
// Declare a tuple type
let x: [string, number];
// Initialize it
x = ["hello", 10]; // OK
// Initialize it incorrectly
x = [10, "hello"]; // Error
</pre>

=== Basic Types - any ⌘===
<pre>
let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean
</pre>
=== Basic Types - Void ⌘===
<pre>
function warnUser(): void {
alert("This is my warning message");
}
</pre>
=== Basic Types - undefnined and null ⌘===
<pre>
/ Not much else we can assign to these variables!
let u: undefined = undefined;
let n: null = null;
</pre>
* assign themselves as value if use for typing
* subtype of all other type so you can assign them to other tpyes
* use -- strictNullCheck
** to only allow assigning to '''void''' type and themselves.
** const text: string = null;
** using union to make typing explicit. string | null | undefined

=== Basic Types - never ⌘===
* make sure '''no return'''. Not even a void type.
<pre>
// Function returning never must have unreachable end point
function error(message: string): never {
throw new Error(message);
}

// Inferred return type is never
function fail() {
return error("Something failed");
}

// Function returning never must have unreachable end pointnot
function infiniteLoop(): never {
while (true) {
}
}
</pre>

=== Type Assertion ⌘===
* When you know the type better than TypeScript
* like type casting
* not type casting - there is not type checking or restructuring
<pre>
//angel brackets <--- not for JSX
let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;
</pre>
<pre>
//as
let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;
</pre>

== Working with Interfaces and Classes ⌘==

=== Interfaces ⌘===
* Type-checking focuses on the '''shape''' that values have. This is sometimes called '''“duck typing”''' or “structural subtyping”. ''If it sounds like a duck, walks a duck, it is a duck''
* In TypeScript, interfaces fill the role of naming these types, and are a powerful way of defining contracts within your code as well as contracts with code outside of your project.

=== Classes ⌘===
* Starting with ECMAScript 2015, also known as ECMAScript 6, JavaScript programmers will be able to build their applications using this object-oriented class-based approach. In TypeScript, we allow developers to use these techniques now, and compile them down to JavaScript that works across all major browsers and platforms, without having to wait for the next version of JavaScript.

==== Parameter Properties ⌘====
<pre>
class Octopus {
readonly name: string;
readonly numberOfLegs: number = 8;
constructor (theName: string) {
this.name = theName;
}
}

class Octopus {
readonly numberOfLegs: number = 8;
constructor(readonly name: string) {
}
}
</pre>

== Organizing your code with Namespaces ⌘==

=== A note ⌘===
* Internal modules” are now “namespaces”. “External modules” are now simply “modules”, as to align with ECMAScript 2015’s terminology, (namely that '''module X {''' is equivalent to the now-preferred '''namespace X {''').

=== Working with other JS libraries ⌘===
* type definition is required (*.d.ts)
* https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/jquery
* npm install --save-dev @types/jquery@1

== Reusing code through Modules ⌘==

=== What is a Module ⌘===
* Modules are executed within their own scope, not in the global scope;
* To consume a variable, function, class, interface, etc. exported from a different module, it has to be imported
* Modules are declarative; the relationships between modules are specified in terms of imports and exports at the file level.

*In TypeScript, just as in ECMAScript 2015, any file containing a top-level import or export is considered a module.
*A script is a file with no imports or exports.

=== Module loading ⌘===
* Module Definitions and Module Loaders:
** CommonJS - webpack
** AMD - Require.js, browserify
** ECMAScript 2015 native modules (ES6)
** CommonJS/Webpack/ES6 - SystemJS

* SimpleModule.ts
<pre>
import m = require("mod");
export let t = m.something + 1;
</pre>
* AMD / RequireJS SimpleModule.js
<pre>
define(["require", "exports", "./mod"], function (require, exports, mod_1) {
exports.t = mod_1.something + 1;
});
</pre>
* CommonJS / Node SimpleModule.js
<pre>
var mod_1 = require("./mod");
exports.t = mod_1.something + 1;
</pre>

=== Working with Other JavaScript Libraries ⌘===
*In TypeScript, just as in ECMAScript 2015, any file containing a top-level import or export is considered a module.

== Compiling, testing and running TypeScript ⌘==

== Debugging TypeScript ⌘==

<big>node --inspect dist/</big>

<big>chrome://inspect</big>

== Launching your application ⌘==

== Closing remarks ⌘==

* See [https://www.mediawiki.org/wiki/Extension:S5SlideShow#Getting_started here] what else you may want to customize

TypeScript 2 - Revision history

Wanghao: /* Understanding Typing, Variables, and Functions ⌘ */