TypeScript基本介紹

後排的風過發表於2018-07-29
TypeScript

前言

本文主要介紹TypeScript的基本知識，想深入瞭解還得去看官方文件。

這裡有一個自己用TypeScirpt編寫的工具庫，歡迎大家使用和互相學習，有時間會寫下文章講下如何開發和釋出自己的工具庫。

什麼是TypeScript

TypeScript是Javascript的超集，並新增可選的靜態型別和類別，但瀏覽器無法識別，所以要通過工具轉換為Javascript程式碼才可以在瀏覽器上執行。

為什麼要用TypeScript

使用TypeScript可以更好地編寫和維護程式碼，因為它可以指定變數的型別，更容易知道這個變數是什麼型別和擁有什麼屬性，並且它在編譯階段就會檢查出錯誤，提早發現錯誤的時間，並且很多編輯器對TypeScript有很好的支援，會有程式碼提示，提高開發效率。

基礎型別

  • boolean
  • number
  • string
  • Array
let nums: number[] = [1, 2, 3];
let strings: Array<
string>
 = ['str'];
複製程式碼
  • enum
enum Color {Red, Green, Blue
  }  // Color = [0, 1, 2];
let c: Color = Color.Green;
  // 1複製程式碼
  • any
  • void
  • null、undefined
  • never

介面

物件型別

interface Shape { 
 readonly type: string;
  // 只讀屬性  color?: string;
  // 可選屬性  area: number;
  setColor(color: string): void;
  [prop: string]: any;
  // 其他屬性
  }複製程式碼

函式型別

interface createShape { 
   (square: Shape): Shape;

  }複製程式碼

類型別與繼承介面

interface Square extends Shape { 
 // 繼承於Shape介面  width: number;
  height: number;
  [prop: string]: any;
  // 其他屬性
  }interface ShapeConstructor { 
 // 構造器函式結構  new(shape: Shape): Shape;

  }interface CircleInterface extends Shape { 
 radius: number;

  }class Shape implements Shape { 
 // 產生Shape型別的類  readonly type = 'shape';
  // 只讀屬性只能在初始化時賦值  color?: string;
  area: number;
    constructor(shape: Shape) { 
   this.color = shape.color;
  
  }  setColor(color: string) { 
   this.color = color;
  
  }
  }class Square extends Shape implements Square { 
 readonly type = 'square';
  // 只讀屬性只能在初始化時賦值  width: number;
  height: number;
  constructor(square: Square) { 
   super(square);
    this.width = square.width;
    this.height = square.height;
    this.area = square.width * square.height;
  
  }
  }class Circle extends Shape implements CircleInterface { 
 readonly type = 'circle';
  radius: number;

  }function createNewShape(ctor: ShapeConstructor, shape: Shape): Shape { 
 return new ctor(shape);

  }複製程式碼

泛型

泛型允許我們可以靈活地在呼叫期間才指定型別或由TS推斷型別。

function createArray<
T>
 (): ()=>
 T[] { 
   return ()=>
 [];

  }const createNumberArray = createArray<
number>
();
const numberArray = createNumberArray();
numberArray.push(1);
numberArray.push('1');
  // 報錯，因為上面以指定陣列為數字型別複製程式碼

來源：https://juejin.im/post/5b5307ce6fb9a04fb136e1d0

相關文章