寫這個的目的

1 . 對學習的過程做一個總結, 也方便以后回過頭來回顧
2 . 看了官方的東西,講的有點繁瑣,更適合當做手冊去查詢,我這里做簡單的介紹跟總結
3 . 如果有需要用到更深層次的東西, 請移步TS官網.

文章結構:

• 基礎類型
• 變量聲明
• 接口
• 類
• 函數
• 泛型
• 模塊

好了 ,要開車了, 大家坐好~

基礎類型

布爾值:

let isDone: boolean = false;

數字

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;

字符串

let name: string = "bob";
name = "smith";    //  先聲明類型,然后賦值

模板變量${ }

let name: string = `Gene`;
let age: number = 37;
let sentence: string = `Hello, my name is ${ name }.

I'll be ${ age + 1 } years old next month.`;

別忘記使用反引號包圍(), 而不是引號

數組

// 聲明數組類型
let list: number[] = [1, 2, 3];
// 第二種方式是使用數組泛型，Array<元素類型>：
let list: Array<number> = [1, 2, 3];

元組 Tuple

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error

任意值

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean   // 在編程階段還不清楚類型的變量,用any即可

變量聲明

在ES5中, js使用var來聲明變量, 對于習慣其他語言的同學來說, 完全看不懂var到底在干嘛,
ts中包含ES6的語法,使用 let 聲明變量, 使用const聲明常量
這塊有疑問的直接移步ES6入門

接口

廢話不多說,先上代碼

interface LabelledValue {
  label: string;
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

通過interface定義一個接口(也就是數據類型結構), 通過這個接口去規范我們傳遞的參數

可選屬性

interface SquareConfig {
  color?: string;
  width?: number;
}

這樣定義的話, 我們不用必須傳遞兩個參數, 所以有了選擇性

只讀屬性

interface Point {
    readonly x: number;
    readonly y: number;
}

readonly vs const

最簡單判斷該用readonly還是const的方法是看要把它做為變量使用還是做為一個屬性。 做為變量使用的話用const，若做為屬性則使用readonly。

類

看到這里, 老司機估計要開心的笑了, 心想這段我認識

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world");

配上TS的類型, 更酸爽

繼承

class Animal {
    name:string;
    constructor(theName: string) { this.name = theName; }
    move(distanceInMeters: number = 0) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

class Snake extends Animal {
    constructor(name: string) { super(name); }
    move(distanceInMeters = 5) {
        console.log("Slithering...");
        super.move(distanceInMeters);
    }
}

class Horse extends Animal {
    constructor(name: string) { super(name); }
    move(distanceInMeters = 45) {
        console.log("Galloping...");
        super.move(distanceInMeters);
    }
}

let sam = new Snake("Sammy the Python");
let tom: Animal = new Horse("Tommy the Palomino");

sam.move();
tom.move(34);

構造函數

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter: Greeter;
greeter = new Greeter("world");
console.log(greeter.greet());

構造函數在類實例化的時候會自動執行

修飾符(public, private, protected)

public 代表公用, 外部內部都可以調用
private 代表私有, 只能在內部調用
protected 代表受保護, 除了在內部可以調用, 還可以在派生類(繼承,也就相當于有父子關系的類中)中使用

函數

函數類型

function add(x: number, y: number): number {
    return x + y;
}

let myAdd = function(x: number, y: number): number { return x+y; };

推斷類型

你會發現如果你在賦值語句的一邊指定了類型但是另一邊沒有類型的話，TypeScript編譯器會自動識別出類型：

// myAdd has the full function type
let myAdd = function(x: number, y: number): number { return x + y; };

// The parameters `x` and `y` have the type number
let myAdd: (baseValue:number, increment:number) => number =
    function(x, y) { return x + y; };

可選參數和默認參數

function buildName(firstName: string, lastName: string) {
    return firstName + " " + lastName;
}

let result1 = buildName("Bob");                  // error, too few parameters
let result2 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
let result3 = buildName("Bob", "Adams");         // ah, just right

剩余參數

function buildName(firstName: string, ...restOfName: string[]) {
  return firstName + " " + restOfName.join(" ");
}

let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

泛型

之前沒有聽說過泛型的,大概介紹一下

像C#和Java這樣的語言中，可以使用泛型來創建可重用的組件，一個組件可以支持多種類型的數據。 這樣用戶就可以以自己的數據類型來使用組件。

// 不用泛型的話，這個函數可能是下面這樣：
function identity(arg: number): number {
    return arg;
}

我們需要一種方法使返回值的類型與傳入參數的類型是相同的。 這里，我們使用了類型變量，它是一種特殊的變量，只用于表示類型而不是值。

function identity<T>(arg: T): T {
    return arg;
}

我們給identity添加了類型變量T。 T幫助我們捕獲用戶傳入的類型（比如：number），之后我們就可以使用這個類型。 之后我們再次使用了T當做返回值類型?，F在我們可以知道參數類型與返回值類型是相同的了。

// 我們定義了泛型函數后，可以用兩種方法使用。 第一種是，傳入所有的參數，包含類型參數：
let output = identity<string>("myString");  // type of output will be 'string'

// 第二種方法更普遍。利用了類型推論 -- 即編譯器會根據傳入的參數自動地幫助我們確定T的類型：
let output = identity("myString");  // type of output will be 'string'

模塊

TypeScript與ECMAScript 2015一樣，任何包含頂級import或者export的文件都被當成一個模塊。

導出

Validation.ts

export interface StringValidator {
    isAcceptable(s: string): boolean;
}

ZipCodeValidator.ts

export const numberRegexp = /^[0-9]+$/;

export class ZipCodeValidator implements StringValidator {
    isAcceptable(s: string) {
        return s.length === 5 && numberRegexp.test(s);
    }
}

導出語句

導出語句很便利，因為我們可能需要對導出的部分重命名，所以上面的例子可以這樣改寫：

class ZipCodeValidator implements StringValidator {
    isAcceptable(s: string) {
        return s.length === 5 && numberRegexp.test(s);
    }
}
export { ZipCodeValidator };
export { ZipCodeValidator as mainValidator };

導入

import { ZipCodeValidator } from "./ZipCodeValidator";

let myValidator = new ZipCodeValidator();

可以對導入內容重命名

import { ZipCodeValidator as ZCV } from "./ZipCodeValidator";
let myValidator = new ZCV();

大概就先寫這么多吧, 算是簡單的總結 ,也方便回頭簡單回顧. 后續繼續加一些其他的. 如果需要更深層次了解, 直接去看官網就行. 大概了解了這么多, 我覺得就可以開始上手寫ts了.