TypeScript的概要和簡介

安裝

Typescript的基本介紹能夠自行百度

centos虛擬機中能夠完整的體驗， virtualbox安裝開發版本，選擇開發工具項，不然加強功能沒法安裝【提示kernel 頭文件缺失，yum安裝後還是無效】

一些具體的網址

https://github.com/Microsoft/TypeScriptSamples

http://www.typescriptlang.org/

http://stackoverflow.com/questions/30536840/typescript-how-to-reference-jquery-easyui-library

https://github.com/DefinitelyTyped/DefinitelyTyped

因爲typescript基於node的環境，所以須要安裝nodejs npm ，而後安裝依賴的包，

直接連接國際站點太慢，加速npm包

編輯 ~/.npmrc 加入下面內容

registry = https://registry.npm.taobao.org

sudo yum install nodejs

sudo yum install npm

npm install -g typescript

如上即安裝了typescript，命令行下輸入tsc -h能夠看看

在Java項目中擁抱Nodejs — 使用gruntjs編譯typescript，並將生成的js合併、壓縮

http://www.tuicool.com/articles/aY3IVz

若是使用了idea專業版，直接集成了typescript，使用起來更簡單，只要配置了項目文件就行，typescript的項目文件tsconfig.json相似以下，根據本身的須要設置便可

{

   "compilerOptions": {

       "target": "es5",

       "noImplicitAny": false,

       "module": "commonjs",

       "removeComments": true,

       "sourceMap": true,

       "outDir": "js/dev/",

        "sourceRoot": "ts/"

    }

    //"include":[

    //     "ts"

    // ],

    //"exclude": [

    //     "js"

    // ]

}

 

基本類型

//基本類型

let flag: boolean = false;

const pi = 3.1415;

var n: number = 1;

var s: string = 'hello';

enum Color { Red, Green };

var bns: number[] = [1, 2, 3];

var ar: Array<number> = [1, 2]

//any

var list2 = [1, true, "free"];

//

var x = null;

//union type

var u: string | number;

u = "OK";

u = 42;

//遍歷

for(b1 in bns){

    console.log(b1);

}

list2.forEach(e => {

    console.log(e);

});

//

var tuple = { 'k1': 1, 'k2': (s: string): number => { console.log(s); return 100; } }

console.log(tuple["k2"]("hello world"));

interface IUserInfo {

    age: any;//定義一個任何變量的 age.

    userName: string;//定義一個 username.

    width?: number; //可選屬性

}

//類和接口 默認做用域 public

interface IClock {

    currentTime: Date;

    setTime(d: Date);

}

//--實現 IClock 接口

class Clock implements IClock {

    currentTime: Date;

    //--構造函數方法

    constructor(h: number, m: number) {

        this.setTime(new Date());

    }

    setTime(d: Date) {

        this.currentTime = d;

    }

}

let clk = new Clock(10, 10);

console.log(clk.currentTime);

class Person {

    constructor(u: string) {

    }

}

class Student1 extends Person {

    constructor(username: string) {

        super(username);

    }

}

class Grid {

    static origin = { x: 0, y: 0 };//不須要實例化就能訪問

    calculateDistanceFromOrigin(point: { x: number; y: number; }) {

        var xDist = (point.x - Grid.origin.x);

        var yDist = (point.y - Grid.origin.y);

        return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;

    }

    constructor(public scale: number) { }

}

//.net語言的get set

var passcode = "secret passcode";

class Employee {

    private _fullName: string;

    get fullName(): string {

        return this._fullName;

    }

    set fullName(newName: string) {

        if (passcode && passcode == "secret passcode") {

            this._fullName = newName;

        } else {

            console.error("Error");

        }

    }

}

//定義合併

interface Box {

    height: number;

    width: number;

}

interface Box {

    scale: number;

}

var box: Box = { height: 5, width: 6, scale: 10 }

module Animals {

    export class Zebra { }

}

module Animals {

    export interface Legged { numberOfLegs: number; }

    export class Dog { }

}

var buildName1 = (firstName: string, lastName?: string) => {

    if (lastName) {

        return `${firstName} ${lastName}`;

    } else {

        return firstName;

    }

};

var b1 = buildName1("a", "b");

console.log(n);

function buildName(firstName: string, ...restOfName: string[]) {

    return `${firstName} ${restOfName.join(" ")}`;

}

var emplyeeName = buildName("lai", "xiao", "chai", "yun");

console.log(emplyeeName);

var deck = {

    suits: ["hearts", "spades", "clubs", "diamonds"],

    cards: Array(52),

    //要想在函數內使用「this」，內層使用箭頭函數，外層使用正常函數

    createCardPicker: function () {

        return () => {

            var pickedCard = Math.floor(Math.random() * 52);

            var pickedSuit = Math.floor(pickedCard / 13);

            return { suit: this.suits[pickedSuit], card: pickedCard % 13 };

        }

    }

}

var cardPicker = deck.createCardPicker();

var pickedCard = cardPicker();

console.log(`card: ${pickedCard.card} of ${pickedCard.suit}`);

function identity<T>(arg: T): T {

    return arg;

}

var output = identity<string>("string");

console.log(output);

class GenericNumber<T>{

    zeroValue: T;

    add: (x: T, y: T) => T;

    fuck(x) {

        return x + 1;

    }

}

var myGenericeNumber = new GenericNumber<number>();

myGenericeNumber.zeroValue = 0;

interface Lengthwise {

    length: number;

}

function logginIdentity<T extends Lengthwise>(arg: T): T {

    console.log(arg.length);

    return arg;

}

interface Fullname {

    [index: number]: string;

}

interface Firstname {

    [index: string]: string;

}

var myName: Fullname = ["lai", "chuanfeng"];

var myFirstname: Firstname = { "firstname": "lai" };

console.log(myName[0]);

interface Account {

    add(x: number): void;

}

function account(): Account {

    return {

        add(x) { ++x }

    }

}

var a = account();

a.add(5);

//自動類型推導和提示

function langsvr(){

    return {'a':'1', 'b':2};

}

langsvr().a;

//自動的any類型

var fn = (a, b) => { return a + b };

console.log(fn(1, 2));

console.log(fn("1", "2"));

console.log(fn(1, "2"));

定義

和已有Javascript js交互的例子

interface JQuery {
text(content: string);
}
interface JQueryStatic {
get(url: string, callback: (data: string) => any);
(query: string): JQuery;
}
declare var $: JQueryStatic;
$.get("http://mysite.org/divContent",
function (data: string) {
$("div").text(data);
}
);
The 'JQueryStatic' interface references another interface: 'JQuery'. This interface represents a collection of one or more DOM elements.

The jQuery library can perform many operations on such a collection, but in this example the jQuery client only needs to know that it can set the text content of each jQuery element in a collection by passing a string to the 'text' method.

The 'JQueryStatic' interface also contains a method, 'get', that performs an Ajax get operation on the provided URL and arranges to invoke the provided callback upon receipt of a response.
(query: string): JQuery;

The bare signature indicates that instances of the interface are callable. This example illustrates that
TypeScript function types are just special cases of TypeScript object types. Specifically, function types are object types that contain one or more call signatures.

內置的Javascipt的類型支持
declare var document;
document.title = "Hello";
// Ok because document has been declared
In the case of 'document', the TypeScript compiler automatically supplies a declaration, because
TypeScript by default includes a file 'lib.d.ts' that provides interface declarations for the built-in JavaScript  library as well as the Document Object Model

typescript編譯器內置的定義文件cancellationToken.js              lib.es2017.object.d.tslib.dom.d.ts                      lib.es2017.sharedmemory.d.tslib.dom.iterable.d.ts             lib.es5.d.tslib.d.ts                          lib.es6.d.tslib.es2015.collection.d.ts        lib.scripthost.d.tslib.es2015.core.d.ts              lib.webworker.d.tslib.es2015.d.ts                   protocol.d.tslib.es2015.generator.d.ts         README.mdlib.es2015.iterable.d.ts          tsc.jslib.es2015.promise.d.ts           tsserver.jslib.es2015.proxy.d.ts             tsserverlibrary.d.tslib.es2015.reflect.d.ts           tsserverlibrary.jslib.es2015.symbol.d.ts            typescript.d.tslib.es2015.symbol.wellknown.d.ts  typescript.jslib.es2016.array.include.d.ts     typescriptServices.d.tslib.es2016.d.ts                   typescriptServices.jslib.es2017.d.ts                   typingsInstaller.js