typescript 基礎

看到用的iview3.1版本要支持typescript,以爲如今UI都開始支持ts,是該瞭解一波了

基礎

原始數據類型

包括:布爾值、數值、字符串、null、undefined 以及 ES6 Symbol。

let isDone: boolean = false;
// number string null undefined 
//能夠用 void 表示沒有任何返回值的函數
function sayname(): void {
    alert('Tom');
}

任意值

any 表示容許賦值爲任意類型。

let num: any = 'seven';
num = 7;
//變量若是在聲明的時候，未指定其類型，那麼它會被識別爲任意值類型：

聯合類型

表示取值能夠爲多種類型中的一種

let num: string | number;
num = 'seven';
num = 7;

接口

接口（Interfaces）來定義對象的類型

interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25
};
//約束了 tom 的形狀必須和接口 Person 一致
// 定義的變量比接口少了一些屬性是不容許的：多一些屬性也是不容許的：
//可選屬性
interface Person {
    name: string;
    age?: number;
}
//仍然不容許添加未定義的屬性：
let tom: Person = {
    name: 'Tom'
};
//任意屬性
interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}
let tom: Person = {
    name: 'Tom',
    gender: 'male',
    age:23
};
//一旦定義了任意屬性，那麼肯定屬性和可選屬性都必須是它的子屬性：
//任意屬性的值容許是 string，可是可選屬性 age 的值倒是 number，number 不是 string 的子屬性，因此報錯了
//只讀屬性 readonly 
interface Person {
    readonly id: number;
}
let tom: Person = {
    id: 89757,
};
tom.id = 9527;//error

數組

類型+方括號

let fibonacci: number[] = [1, 1, 2, 3, 5];
//泛型
let fibonacci: Array<number> = [1, 1, 2, 3, 5];
//接口
interface NumberArray {
    [index: number]: number;
}
//只要 index 的類型是 number，那麼值的類型必須是 number。
let fibonacci: NumberArray = [1, 1, 2, 3, 5];
//any
let list: any[] = ['Xcat Liu', 25, { website: 'http://xcatliu.com' }];
//類數組
//常見的類數組都有本身的接口定義，如 IArguments, NodeList, HTMLCollection 等：
function sum() {
    let args: IArguments = arguments;
}

函數

//可選參數必須接在必需參數後面,TypeScript 會將添加了默認值的參數識別爲可選參數,此時就不受「可選參數必須接在必需參數後面」的限制了
function sum(x: number, y: number,z?:number): number {//?可選
    return x + y;
}
//輸入多餘的（或者少於要求的）參數，是不被容許的
//TypeScript 的類型定義中，=> 用來表示函數的定義，左邊是輸入類型，須要用括號括起來，右邊是輸出類型
let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};
//rest參數,是數組
function push(array: any[], ...items: any[]) {
    items.forEach(function(item) {
        array.push(item);
    });
}

類型斷言

手動指定一個值的類型

//1. <類型>值
//2. 值 as 類型 //tsx 語法（React 的 jsx 語法的 ts 版）中必須用這一種
//類型斷言不是類型轉換，斷言成一個聯合類型中不存在的類型是不容許的
function getLength(something: string | number): number {
    if ((<string>something).length) {
        return (<string>something).length;
    } else {
        return something.toString().length;
    }
}

聲明

//聲明語句
declare var jQuery: (selector: string) => any;
jQuery('#foo');
//聲明文件
// jQuery.d.ts
declare var jQuery: (arg:string) => any;
//約定聲明文件以 .d.ts 爲後綴,使用到的文件的開頭，用「三斜線指令」表示引用了聲明文件
/// <reference path="./jQuery.d.ts" />
jQuery('#foo');
//第三方文件
// @types 的使用方式很簡單，直接用 npm 安裝對應的聲明模塊便可，以 jQuery 舉例：
npm install @types/jquery --save-dev

內置對象

JavaScript 中有不少內置對象，它們能夠直接在 TypeScript 中當作定義好了的類型。
內置對象是指根據標準在全局做用域（Global）上存在的對象

let b: Boolean = new Boolean(1);
let e: Error = new Error('Error occurred');
let d: Date = new Date();
let r: RegExp = /[a-z]/;
//BOM DOM對象 Document、HTMLElement、Event、NodeList
let body: HTMLElement = document.body;
let allDiv: NodeList = document.querySelectorAll('div');
document.addEventListener('click', function(e: MouseEvent) {
  // Do something
});
//ts 寫node
//npm install @types/node --save-dev