TypeScript入門教程

2019年8月24日 99次阅读 来源: RoyalRover

TypeScript是什麼

  • TypeScript是JavaScript的一個超集
  • TypeScript須要編譯為JavaScript才運轉（語法糖）
  • TypeScript供應了範例體系，範例相似Java
  • TypeScript供應了ES6的支撐，也能夠支撐部份ES7草案的特徵，不必憂鬱TypeScript沒法兼容如今主流的JavaScript詮釋器

環境裝置

  1. 裝置node.js
    https://nodejs.org/en/download/
  2. 裝置TypeScript包，這就是TS的編譯器
    npm install -g typescript
  3. 搜檢TypeScript是不是裝置勝利
    tsc -v

TypeScript開闢工具

TypeScript是開源的項目，由微軟開闢和保護，因而最初只要微軟的 Visual Studio 支撐。如今，湧現了更多自身支撐或許經由過程插件支撐 TypeScript 語法、智能提醒、糾錯、以至是內置編譯器的文本編輯器和IDE。

  • Visual Studio Code，微軟出品，內置支撐TypeScript特徵
  • Sublime Text的官方插件
  • WebStorm的最新版本內置支撐

範例體系

原始數據範例

主範例：

string、number、boolean

特別範例：

null、undefined、symbol（ES6）

基本範例聲明與運用：

string：
    let name: string = ‘Alice’;
    let desc: string = `my name is ${name}`;
number：
    let norm: number = 666;
    let binaryNum: number = 0b111;
    let hexNum: number = 0xfff;
    let octalNum: number = 0o17;
    let nan: number = NaN;
    let infinity: number = Infinity;
boolean:
    let yet: boolean = true;
    let flag: boolean = Boolean(0);
null:
    let n: null = null;
undefined:
    let u: undefined = undefined;
symbol:
    let s: Symbol = Symbol(2);
void:
    let v2: void = null;
    let v5: void = undefined;

恣意值範例

    let name: string = ‘Tom’;
    name = 666;

    demo.ts(2,1): error TS2322: Type '666' is not assignable to type 'string'.
運用any範例:
```
    let name: any = ‘Tom’;
    name = 666;
```
隱式恣意值範例:
    let name;
    name = ‘Tom’;
    name = 666;

等價於：

    let name : any;    
    name = ‘Tom’;
    name = 666;

範例推論

TS會在沒有明白指定範例的時刻推測出一個範例，這就是範例推論

let user = ‘Tom’;
user = 666;

demo.ts(2,1): error TS2322: Type '666' is not assignable to type 'string'.

團結範例

TS中的團結範例示意取值可為多種範例中的一種:

let user: string | number;
user = 666;
user = ‘Tom’;

接見團結範例的屬性或要領時，只能接見一切範例的共有要領:

function test(param: string|number){
return param.length;
}

demo.ts(2,18): error TS2339: Property 'length' does not exist on type 'string | number’.

範例斷言

範例斷言能夠手動指定一個值的範例,然則範例斷言不是強迫範例轉換，TypeScript編譯器不支撐強迫範例轉換。

function test(param: number|string){
    if((<string>param).length)
        return (<string>param).length;
    else    
        return param.toString().length    
}

對象的範例—接口

interface Sport {
    name: string,
    teamwork: boolean
}

let football: Sport = {
    name: 'soccer',
    teamwork: true
}

可選屬性：

interface Sport {
    name: string,
    teamwork: boolean,
    needPg?: boolean
}

let football: Sport = {
    name: 'soccer',
    teamwork: true
}

恣意屬性：

interface Sport {
    name: string,
    teamwork: boolean,             
    needPg?: boolean,
    [other: string]: any
}

let football: Sport = {
    name: 'soccer',
    teamwork: true,
    needPg: true,
    count: 22
}

一旦定義恣意屬性，那末肯定屬性和可選屬性的範例必需是它的子屬性

只讀屬性：

interface Sport {
    readonly name: string,
    teamwork: boolean
 }

let football: Sport = {
    name: 'soccer',
    teamwork: true
}

函數的範例

函數聲明

function avg(x: number,y:number):number{
return (x+y)/2;
}

函數表達式

let avg = function(x:number,y:number):number{
return (x+y)/2;
}

or

let avg: (x:number,y:number) => number = function(x:number,y:number):number{
return (x+y)/2;
}

函數可選參數：

function avg(x: number,y?:number):number{
if(y){
 return (x+y)/2;
}else{
return x;
}
}

可選參數必需在必選參數的背面

函數的可選參數與默認值:

function avg(y:number = 10,x: number):number{
if(y){
 return (x+y)/2;
}else{
return x;
}
}

TypeScript會將增加默認值的參數識別為可選參數，此時不受“可選參數必需在必選參數的背面”的限定

函數重載:

TypeScript中經由過程為一個函數舉行屢次函數定義，並完成函數完成重載

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: any):any{
if(typeof x == ‘number’){
 return Number(x.toString().split(‘’).reverse().join(‘’));
}else{
return x.split(‘’).reverse().join(‘’);
}
}

面向對象的函數重載：

interface A{
    say(x:number);
    say(x:string);
}

class AA implements A{
    say (x:any){
   if(typeof x == ‘string’)
             console.log(‘string’,x);
        else
console.log(‘number’,x);
    }
}
console.log((new AA()).say(1));
console.log((new AA()).say('123'));

字符串字面量範例

該範例束縛值只能是某幾個字符串的一個，這是在編譯器層面做的束縛，並不會轉變天生的js代碼

type Name = 'abc' | 'def' | 'mn';
function demo(e: Name): void{
    console.log(e);
}
demo(‘abc');

TypeScript與面向對象

類

class Block {
    private hash: string;
    private prevHash: string;
    private nonce: number;
    constructor (hash: string, prevHash: string, nonce = 0){
        this.hash = hash;
        this.prevHash = prevHash;
        this.nonce = nonce;
    }
    public get $hash(): string {
        return this.hash;
    }
    public set $hash(value: string) {
        this.hash = value;
    }
    public get $prevHash(): string {
        return this.prevHash;
    }
    public set $prevHash(value: string) {
        this.prevHash = value;
    }
    public get $nonce(): number {
        return this.nonce;
    }
    public set $nonce(value: number) {
        this.nonce = value;
    }
    public computeHash(){
        let sha256 = crypto.createHash('sha256');
        sha256.update(`${this.prevHash}${this.nonce.toString(16)}`,'utf8');
        let hash = sha256.digest('hex');
        return hash;
    }
}

籠統類

TypeScript中籠統類不允許被實例化

abstract class BtcBlock {
    public abstract computeHash(x:string):string;
}
class Block extends BtcBlock {
    public computeHash(x:string):string{
        return `btc${x}`;
    };
}

接口

上節已提到，TS中的接口就是籠統多個類的共有屬性與要領，作為對象的範例而存在

interface Alarm {
    alert(): void;
}
interface Light {
    lightOn(): void;
    lightOff(): void;
}
class Auto implements Alarm, Light {
    alert(){
        console.log('car alart');
    }
    lightOn(){
        console.log('car light on');
    }
    lightOff(){
        console.log('car light off');
    }
}

泛型

即在定義類、函數或接口時不指定詳細範例，而在運用時指定範例的特徵。

function useGeneric<T>(length: number,value: T):Array<T>{
    let array: Array<T> = [];
    for(let i=0;i<length;i++){
        array.push(value);
    }
    return array;
}
useGeneric<string>(2,'hello world');
useGeneric<number>(100,1);

裝潢器（註解）

裝潢器是特別範例的聲明，能夠被附加到類聲明、要領、接見符、屬性或參數上，詳細文檔：
https://www.tslang.cn/docs/ha…

裝潢器並未成為ES7的範例，因而將來可能會發作轉變，並不引薦人人在線上項目中運用

裝潢器之要領裝潢器

function enumerable(value: boolean) {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        descriptor.enumerable = value;
    };
}

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }

    @enumerable(false)
    greet() {
        return "Hello, " + this.greeting;
    }
}

TypeScript與JavaScript生態

形貌非TypeScript編寫的類庫的範例，須要聲明類庫所暴露出的API，相似於C的頭文件，在TypeScript中文件範例則為 .d.ts

  • 運用TypeScript生態供應的聲明文件
    npm install @types/node
    聲明文件列表：
    http://npm.vdian.net/browse/k…
  • 本身編寫聲明文件
    declare module “name”;
    原文作者：RoyalRover
    原文地址: https://segmentfault.com/a/1190000014684996
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞