vue.js 學習筆記3——TypeScript

時間 2019-11-06

標籤 vue node typescript 數據庫 npm json gulp 數組 bash 函數欄目 JavaScript 简体版

原文原文鏈接

vue.js 學習筆記3——TypeScript

工具

npm install -g typescript #安裝typescript 工具tsc編譯器
tsc a.ts #輸出 a.js
node a.js #運行js

typescript 經過tsconfig.json 文件配置。node

可經過gulp 等工具管理項目自動化編譯和運行。typescript

基礎類型

boolean 布爾、number 數字、string 字符串、enum 枚舉、any 任意、void 空、null 空值、 undefined 未定義、symbol 符號值、object 對象、never 不存在。數據庫

let isDone:boolean = false;
let name:string = "普通字符串";
let firstName:string = `模板字符串${isDone}`; //支持插入和換行

enum Color{Red=0,Green=2,Blue=4}
let c:Color = Color.Green;

let notSure:any = 4;
notSure = "字符串也行";

let voidValue:void = undefined;//只有undefined或null兩個值。 
let u:undefined = undefined;
let n:null = null;
let sym:symbol = Symbol(); //惟一存在，可用做對象成員的鍵
let o:object = {};//除boolean、number、string、symbol、null、undefined外的類型

():never=>{throw "";}; //用來定義沒有返回路徑的方法。該類型是全部類型的子類型。

注意：npm

ts中object和null不相容
object和基礎類型都不相容
any是根類型，never是葉子類型
嚴格選項下，null和undefined除自身和void都不相容

數組

[] 數組json

let list:number[] = [1,2,3];
let genList:Array<number>=[1,2,3]; //泛型數組

元組

let x:[string,number] = ['hello',10];

枚舉

const enum 常量枚舉會被用值直接替換
枚舉是一個對象，數值類型會有屬性雙向映射
用字面量或者無初始化的枚舉的成員是一個類型，值就是該枚舉成員。該枚舉是一個聯合
枚舉成員初始化是簡單常量算式，爲常量成員，不然爲計算成員
枚舉成員能夠是數字或字符型
外部枚舉成員默認是計算成員

字面量

"s"|"n"|"m" 用豎線分隔的字面量限定字符串變量的可選值。
1|2|3|4 數字變量的可選值。

接口

接口作類型的聲明，而沒有具體實現。gulp

interface 接口名 extends 可選的父接口{
    color?:string; //可選屬性
    width:number;
    readonly x:number;//只讀屬性
    [propName:string]:any; //索引屬性，如s["name"]，其餘屬性類型必須兼容索引屬性
    [index:number]:any; //數字下標作索引，s[1] 等價 s["1"]
    (start:number):string; //實例成員函數
    new():object; //初始化構造函數
}

類類型

類類型能夠實現接口。類分兩部分，靜態部分和實例部分，類構造函數屬於靜態部分，而接口實現屬於實例部分。數組

interface face{
    data:string;
}

class Ca implements face{
    data:string; //實現接口

    //初始化構造函數
    constructor(h:number,m:number){
        this.data = h + m;
    }
    private state:any;//私有屬性
}

//接口能夠繼承自類，包含類的相關聲明，包括私有。所以，通常只有父類的子類才能實現該接口。
interface ia extends Ca{
    new(state:any):face{}
}

類類型要素

extends 繼承基類
implements 實現接口
super() 調用基類初始化
this 實例對象
public/protected/private 訪問權限。只有public成員才具備結構性兼容的便利
readonly 只讀屬性
constructor() 構造函數
constructor(public a:number, readonly b:string) 參數屬性。具備特殊修飾符的a，b自動成爲對象成員
get set 存儲器。讀取屬性的函數
static 靜態屬性。類屬性
abstract 抽象類，抽象成員函數

函數

let myfun:(a:number,b:string)=>boolean; //函數類型
function fun2(a:number,b:string):boolean{} //函數
let fun3=function(){};//匿名函數
let fun4=()=>1;//箭頭函數

函數參數

function myfun(arg?:number):void{} //?表明可選

let fun2=(name="bill")=>void;//默認參數
function fun3(a:number, ...s:number[]){} //s是剩餘參數

this對象和類型

function定義的的函數，會在調用它時綁定上下文this變量。即this類型爲any。
箭頭函數則會在定義它的上下文綁定this變量。
this做爲函數返回類型，能夠用在繼承系統裏面串聯調用子類對象成員函數。

function f(this:void){} //禁用this

class A{
    f1():this{return this;}
}
class B extends A{
    f2():this{return this;}
}

let a:B = new B();
a.f1().f2(); //f1返回的this自動成爲子類型

重載

ts中給出不一樣函數重載的聲明，這樣就啓動了函數參數的類型檢查，定義只須要給出一份。用any參數來實現，但它不是重載。
注意！ts不能有多個實現。

迭代器 Symbol.iterator

for..of 語句調用對象上的迭代器Symbol.iterator函數。
for..in 語句迭代對象的鍵，適用任何對象

聲明、解構、展開、類型斷言

//變量聲明
let 變量名:可選的類型 = [1,2]; //字面量
//常量聲明，即不能修改的變量
let 常量名:可選的類型 = [1,2]; 

//解構數組
let [a, b]:可選的類型 = [1,2]; //a=1,b=2
let [a, ...b] = [1,2,3,4]; //a=1,b=[2,3,4]
//解構對象
let {a,b} = {a:1,b:2,c:3};//a=1,b=2
let {a:newA,c}={a:1,b:2,c:3};//newA=1,c=3;屬性名a修改爲newA

//展開數組
let a:number[] = [0,...[1,2],3];//a=[0,1,2,3];展開數組[1,2]

//類型斷言，繞過某些編譯器類型檢查
let a:string= 1 as string;

泛型

用標記來代替特定類型，或者替代類型的一部分。
<T>bash

泛型約束

指定泛型標誌的適用範圍。函數

let f:<T extends interFace>(arg:T)=>T;

交叉類型、聯合類型

U & T 合併U和T兩類型成員
U | T U,T的聯合體，值爲其中之一，成員爲共有的相同成員

索引類型

keyof 索引類型查詢，獲得公共屬性名的聯合
T[K] 其中，K extends keyof T，即K是聯合類型其中一個。結果是T.K

映射類型

[key in keyof T]:P 迭代T的屬性聯合，產生對應的對象屬性,並設置類型爲P。

預約義映射：

Exclude<T,U> 剔除U
Extract<T,U> 提取U
NonNullable<T> 剔除null和undefined。
ReturnType<T> 獲取函數返回類型
InstanceType<T> 獲取構造函數實例類型。
Readonly<T> 映射爲只讀版本
Partianl<T> 可選版本
Pick<T,K> 摘錄版本
Record<string,R> 將聯合映射爲對象，成員類型R

類型兼容

ts中使用告終構做爲類型兼容的標準，也就是隻要結構相容，就是相容，而不須要明確的類型命名聲明。

結構包含：

公共成員名稱和類型
函數參數排列和返回類型
私有和保護成員不適用該系統。

相容的意思是指：

let a:A = b as B;//A兼容B
A的全部成員，B都有
若是A是函數，B的參數，A都有（或B參數兼容A參數），且排列順序一致。由於js中A多餘的實參，容許B函數調用時忽略。其二，函數返回值也是類型兼容的一部分。

//複雜例子
let a:{x:number,y(a1:{k:1,k2:2}, a2:never):{r:number}}=
{x:1, y: (m:{k:1})=>{return {r:1};}}

類型保護、推斷

():is 類型 類型推斷謂詞
typeof
instanceof
| || 可null聯合類型相關符號
? undefined 可選類型相關符號
type 別名

模塊和命名空間

模塊加載器 CommonjS(node.js) 或 Require.js(AMD)； UMD,SystemJS,ES6/ES2015。

export 標識要導出的內容。
import 導入。
export default 默認導出，導入時能夠不指定對應的名字
export = commonjs語法
import module=require（」module「） commonjs語法
只要在頂層使用關鍵字，文件便可成爲模塊，不然全局可見
declare ts聲明格式
declare module ts聲明模塊
namespace 命名空間
import x= ns.cla x是別名
推薦使用模塊來組織代碼。

裝飾器

@裝飾器 是一個函數，會在被裝飾的對象運行時調用。reflect-metadata是元數據庫。

類裝飾器：

參數1，類構造函數
能夠返回修改後的構造對象，return class extends {new(...args:any[]):{}}{}

　函數裝飾器：

參數1，靜態，類的構造函數；實例成員爲類的原型對象。
參數2，成員的名字
參數3，成員的屬性描述符
可返回屬性描述符

屬性裝飾器：

類構造或原型對象
成員名字

參數裝飾器：

類構造或原型對象
成員名字
參數在函數參數列表中的索引

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。