TypeScript學習小記

什麼是 TypeScript?

JavaScript自己支持動態類型特性，可是隨着應用程序愈來愈大，JavaScript的靈活性也成爲了一種負擔。錯誤檢測和代碼調試也變得較爲複雜。TypeScript就是利用面向對象原理生成更好地JavaScript。

TypeScript就是所謂的JavaScript超集。它不是JavaScript的替代品，也不會爲JavaScript代碼添加任何新功能。相反，TypeScript容許程序員在其代碼中使用面向對象的構造，而後將其轉換爲JavaScript。它還包括類型安全和編譯時類型檢查等便利功能。

爲何要使用TypeScript?

TypeScript的設計目的應該是解決JavaScript的「痛點」：弱類型和沒有命名空間，致使很難模塊化，不適合開發大型程序。另外它還提供了一些語法糖來幫助你們更方便地實踐面向對象的編程。

TypeScript 的好處

編譯爲 JavaScript

建立一個ts文件，執行如下命令

TypeScript類型

• Boolean類型

  // Boolean類型
  let isDone: boolean = false

• number類型

// number類型  同JavaScript，TypeScript裏的全部數字都是浮點數 還支持2、8、十六進制數
let decLiteral: number = 6

• string類型

// string類型 還可使用模版字符串
let name: string = 'bob'
let sentence: string = `Hello, my name is ${ name }`

• 數組類型

// 數組類型 有兩種方式能夠定義數組 一、元素類型後面接上 [] 二、使用數組泛型，Array<元素類型>
let list: number[] = [1, 2, 3]
let list: Array<number> = [1, 2, 3]

• 元組類型

// 元組Tuple 元組類型容許表示一個已知元素數量和類型的數組，各元素的類型沒必要相同
let x: [string, number]
x = ['hello', 10]; // OK
x = [10, 'hello']; // Error
// 當訪問一個越界的元素，會使用聯合類型替代
x[3] = 'world'; // OK, 字符串能夠賦值給(string | number)類型

• 枚舉類型

  // 枚舉類型 enum類型是對JavaScript標準數據類型的一個補充
     enum Color {Red, Green, Blue}
     let c: Color = Color.Green
     // 默認狀況下，從0開始爲元素編號。 你也能夠手動的指定成員的數值
     enum Color {Red = 1, Green = 2, Blue = 4}
     let c: Color = Color.Green
     // 枚舉類型提供的一個便利是你能夠由枚舉的值獲得它的名字。 例如，咱們知道數值爲2，可是不肯定它映射到Color裏的哪一個名字，咱們能夠查找相應的名字：(我的感受有點像map)
     enum Color {Red = 1, Green, Blue}
     let colorName: string = Color[2];
     console.log(colorName);  // 顯示'Green'由於上面代碼裏它的值是2

• any類型

// any類型 不清楚類型的變量指定一個類型，不但願類型檢查器對這些值進行檢查而是直接讓它們經過編譯階段的檢查
let notSure: any = 4
notSure = "maybe a string instead"
notSure = false; // okay, definitely a boolean

• void類型

// void類型像是與any類型相反，它表示沒有任何類型。 當一個函數沒有返回值時，你一般會見到其返回值類型是 void
function warnUser(): void {
    console.log("This is my warning message");
}
// 聲明一個void類型的變量沒有什麼大用，由於你只能爲它賦予undefined和null：
let unusable: void = undefined;

• 其它一些比較少用的類型

// Null 和 Undefined 同void相似，它們自己的類型用處不是很大
// 默認狀況下null和undefined是全部類型的子類型。 就是說你能夠把 null和undefined賦值給number類型的變量 但在建議指定--strictNullChecks的狀況下，可使用聯合類型
// Never never類型表示的是那些永不存在的值的類型 (不是特別理解)
// Object 表示非原始類型，也就是除number，string，boolean，symbol，null或undefined以外的類型
declare function create(o: object | null): void
create({ prop: 0 }); // OK
create(null); // OK
create(42); // Error
//類型斷言 一般這會發生在你清楚地知道一個實體具備比它現有類型更確切的類型。
// 類型斷言有兩種形式。 其一是「尖括號」語法：
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
// 另外一個爲as語法：
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

TypeScript+Vue

而後是本身動手時間，TypeScript+Vue實戰
具體的教程能夠看https://segmentfault.com/a/11...
一些配置解析能夠看https://www.jianshu.com/p/7ed...
裝飾器配置出錯請看https://blog.csdn.net/lydia_l...
git上的裝飾器文檔請看https://github.com/kaorun343/...
關於Mixins比較好的解決方式https://www.jianshu.com/p/7ed...
按照這個搭建環境的時候遇到一些問題，提醒我要更新webpack的版本到4以上...以及各類webpack-dev-server...各類不兼容，後來看了下是由於經過vue-cli初始化的項目彷佛對默認安裝的ts-loader版本不兼容，這邊須要指定安裝3.xx的版本，這裏安裝的是3.3.1的版本（劃重點！！！）
最終安裝相關的版本如圖：

另外會提示一些報錯，這裏從新拷貝了一份tslint.json的配置相關

{
  "defaultSeverity": "warning",
  "extends": [
    "tslint-config-standard"
  ],
  "linterOptions": {
    "exclude": [
      "node_modules/**"
    ]
  },
  "rules": {
    "quotemark": [true, "single"],
    "indent": [true, "spaces", 2],
    "interface-name": false,
    "ordered-imports": false,
    "object-literal-sort-keys": false,
    "no-consecutive-blank-lines": false
  }
}