2018 TypeScript Update(3)Introduction Basic Grammar

2018 TypeScript Update(3)Introduction Basic Grammar

Iterators and Generators
http://www.typescriptlang.org/docs/handbook/iterators-and-generators.html
for .. of .. Statements
let someArray = [1, “string”, false];
for ( let entry of someArray){
console.log(entry);
}

for..of VS. for..in Statements
for in returns a list of keys on the object
for of returns a list of values of the object

let list = [4, 5, 6];
for (let i in list) {
console.log(i); // 0, 1, 2
}

for (let i of list) {
console.log(i); // 4, 5, 6
}

Modules and Namespaces
http://www.typescriptlang.org/docs/handbook/modules.html
“Internal modules” are now “namespaces”.
“External modules” are now simply “modules”.

Modules are executed within their own scope, not in the global scope, all variables, functions, classes, etc declared in a module are not visible outside the module unless they are saying export.

CommonJS module loader for Node.js and require.js for Web Application.

Exporting a declaration
export interface StringValidator {}
export const numberRegexp = /^[0-9]+$/;

export statements
class ZipCodeValidator implements StringValidator {}
export {ZipCodeValidator};
export {ZipCodeValidator as mainValidator};

export { ZipCodeValidator as RegExpBasedZipCodeValidator } from “./ZipCodeValidator”;

Import
import { ZipCodeValidator } from “./ZipCodeValidator”;
import { ZipCodeValidator as ZCV } from “./ZipCodeValidator”;

import * as validator from “./ZipCodeValidator”;
let myValidator = new validator.ZipCodeValidator();

Default exports
declare let $: jQuery;
export default $;

import $ from “JQuery”;

Simple Example for Module
For Node.js, use - - module commonjs; for require.js use - - module amd
> tsc --module commonjs Test.ts

Module usually will be *.d.ts

Namespaces
http://www.typescriptlang.org/docs/handbook/namespaces.html
namespace Validation {
export interface StringValidator {}
}

let validator = new Validation.ZipCodeValidator();

Merge and Compile file together
> tsc --outFile sample.js Validation.ts LettersOnlyValidator.ts ZipCodeValidator.ts Test.ts

http://www.typescriptlang.org/docs/handbook/jsx.html
JSX
Directly put XML in codes, it will be convert to javascript.
interface PropsType {
children: JSX.Element
name: string
}

class Component extends React.Component<PropsType, {}> {
render() {
return (
<h2>
this.props.children
</h2>
)
}
}

<Component>
<h1>Hello</h1>
</Componet>

Decorators
http://www.typescriptlang.org/docs/handbook/decorators.html
ECMAScript VS JavaScript
Browser support for ES6
http://kangax.github.io/compat-table/es6/

Mixins
http://www.typescriptlang.org/docs/handbook/mixins.html

Project Configuration
http://www.typescriptlang.org/docs/handbook/tsconfig-json.html

Build Tools
http://www.typescriptlang.org/docs/handbook/integrating-with-build-tools.html
Grunt, Gulp, Webpack

References:
http://sillycat.iteye.com/blog/2412076
http://sillycat.iteye.com/blog/2412265

vue and typescript
http://www.open-open.com/lib/view/open1519898735170.html
https://segmentfault.com/a/1190000011864013
https://segmentfault.com/a/1190000011744210#articleHeader12
https://github.com/shenzekun/vue-qq-music
Generic
http://www.open-open.com/lib/view/open1519652853300.html
ES6
http://es6.ruanyifeng.com/#docs/intro