typescript精簡版1：用ts表示常見數據類型

一：工程準備：

1.全局安裝typescript

npm i typescript -g 
// 或
yarn global add typescript

1. vscode 配置
   在命令行執行 tsc --init 來生成配置文件，而後在目錄下看到生成了一個 tsconfig.json 文件
   
   其中：

target 指編譯到什麼語法

module 是模塊類型

outDir 是輸出目錄

緊接着，在菜單欄中依次：

終端--> 運行 --->  tsc: 監視 - tsconfig.json

這樣，準備工做就作好了。vscode能夠實時監視你的ts文件並把它編譯成js文件了。

二：常見數據類型用ts怎麼寫？

/**
 * 1.1 ts 如何聲明一個boolean, number, string類型的值
 */
// 在js中，定義 isFlag 爲true, 可是後面還能夠從新給它賦值爲字符串，而ts中就不行，同理，聲明number, string 也同樣
let bool: boolean = true;
// 會報錯：不能將類型「"str"」分配給類型「boolean」。
// isFlag = "str"
let str: string = "a";
// 會報錯：不能將類型「1」分配給類型「string」。
// str = 1
let num: number = 1;
// 會報錯：不能將類型「"a"」分配給類型「number」。
// num = "a"
/**
 *
 *
 *
 * 1.2 ts 如何聲明一個 undefined, null 類型的值
 */
let u: undefined = undefined;
let n: null = null;
/**
 *
 *
 *
 * 1.3 ts 如何聲明一個數組
 */
// 方式一：聲明一個每一項只能是string類型的數組。在元素類型後面接上[]，表示由此類型元素組成一個數組
let arr1: string[] = ["a", "b"];
// 方式二：使用數組泛型，Array<元素類型>
let arr2: Array<string> = ["a", "b"];
// 方式三：利用接口: ts的核心原則是對值所具備的結構進行類型檢查，接口的做用就是爲這些類型命名和爲你的代碼或第三方代碼定義契約
interface NumberArray {
  // 這個接口表示：只要索引的類型是number，那麼值的類型必須是number
  [index: number]: number;
}
let arr3: NumberArray = [1, 2, 3];
// 數組裏想放對象？
let arr4: Array<object> = [{ a: "1" }, { b: "2" }];
// 數組裏想放多種數據類型？ 用 | 隔開就好
let arr5: Array<string | number> = ["a", 1];
// 數組裏想聽任意類型？
let arr6: Array<any> = ["a", 1, true, { a: 1 }, [1, 2]];
/**
 *
 *
 *
 * 1.4 ts 如何聲明一個對象
 */
// 利用接口
interface OA {
  name: string; // 表示對象要有name屬性, 值是string類型
  age?: number; // ? 表示age屬性能夠有也能夠沒有, 值是number類型
  readonly id: number; // readonly 表示 id 屬性只可讀，不可修改
}
let obj1: OA = { name: "obj1", id: 1 };
let obj2: OA = { name: "obj2", age: 18, id: 2 };
// 這種狀況下name 和 id 屬性必需要，age屬性可要可不要，可是除了這三種屬性外，其它的屬性都不許出現
// let obj3:OA = {a: 1} // 會報錯
// 有時候仍是但願一個對象容許有任意的屬性怎麼辦？
interface OB {
  name: string;
  age?: number;
  [propName: string]: any;
}
let obj4: OB = { name: "a" };
let obj5: OB = { name: "a", age: 1 };
let obj6: OB = { name: "a", age: 1, other1: 2, other2: "2", other3: { a: 1 } };
/**
 *
 *
 *
 * 1.5 ts 如何聲明一個函數
 */
// 一： :void 表示函數沒有返回值
function fn2(x: number): void {
  console.log(x);
}
// 二： 這裏表示sum 函數接收兩個參數(多了少了都不行), 參數類型是 number, 返回值也是number
function fn1(x: number, y: number): number {
  return x + y;
}
// 三： 一樣也能夠用?來表示可選參數，可是可選參數只能放到最後面
function fn3(x: number, y?: number): number {
  if (y) {
    return x + y;
  }
  return x;
}
// 四：ts 怎麼表示默認參數
function fn41(x: number, y: number = 1): number {
  return x + y;
}
// 傳值的時候，默認參數能夠不傳
fn41(1);
fn41(1, 2);
// 默認參數不像可選參數必須放後面，它也能夠放前面, 可是仍是推薦放後面去
function fn42(x: number = 1, y: number): number {
  return x + y;
}
// 傳值的時候，默認參數能夠不傳，可是若是默認參數不放後面，這樣傳值感受很怪
fn42(undefined, 2);
// 五：ts表示剩餘參數。利用擴展運算符
function fn52(array: any[], ...items: any[]) {
  items.forEach(item => {
    array.push(item)
  })
}
// 六：箭頭函數
// es6 箭頭函數：沒有參數的時候
// let fn61 = () => {}

// es6 箭頭函數：一個參數的時候，能夠不用圓括號
// let fn62 = arg => {
//   console.log(arg)
// }

// es6 箭頭函數：多個參數的時候，若是致謝一行的話，不用大括號和return
// let fn63 = (arg1, arg2) => arg1 + arg2;

// es6 箭頭函數：多個參數而且換行的時候，須要寫大括號和return
// let fn64 = (arg1, arg2) => {
//   return arg1 + arg2
// }

// es6 箭頭函數：返回一個對象，必須在對象外面加上圓括號
// let fn65 = (arg1, arg2) => ({a: arg1, b:arg2})

// es6 上例中通常會不更名字，同名能夠縮寫成這樣
// let fn66 = (arg1, arg2) => ({
//   arg1,
//   arg2
// })

// 很奇怪ts中是不能再用縮寫形式的箭頭函數了嗎？上面的代碼在在線編譯中不會報錯，可是在vscode編輯器裏報錯...噢多凱?

看看上面的代碼被編譯成了ES5是怎樣的。

"use strict";
/**
 * 1.1 ts 如何聲明一個boolean, number, string類型的值
 */
// 在js中，定義 isFlag 爲true, 可是後面還能夠從新給它賦值爲字符串，而ts中就不行，同理，聲明number, string 也同樣
var bool = true;
// 會報錯：不能將類型「"str"」分配給類型「boolean」。
// isFlag = "str"
var str = "a";
// 會報錯：不能將類型「1」分配給類型「string」。
// str = 1
var num = 1;
// 會報錯：不能將類型「"a"」分配給類型「number」。
// num = "a"
/**
 *
 *
 *
 * 1.2 ts 如何聲明一個 undefined, null 類型的值
 */
var u = undefined;
var n = null;
/**
 *
 *
 *
 * 1.3 ts 如何聲明一個數組
 */
// 方式一：聲明一個每一項只能是string類型的數組。在元素類型後面接上[]，表示由此類型元素組成一個數組
var arr1 = ["a", "b"];
// 方式二：使用數組泛型，Array<元素類型>
var arr2 = ["a", "b"];
var arr3 = [1, 2, 3];
// 數組裏想放對象？
var arr4 = [{ a: "1" }, { b: "2" }];
// 數組裏想放多種數據類型？ 用 | 隔開就好
var arr5 = ["a", 1];
// 數組裏想聽任意類型？
var arr6 = ["a", 1, true, { a: 1 }, [1, 2]];
var obj1 = { name: "obj1", id: 1 };
var obj2 = { name: "obj2", age: 18, id: 2 };
var obj4 = { name: "a" };
var obj5 = { name: "a", age: 1 };
var obj6 = { name: "a", age: 1, other1: 2, other2: "2", other3: { a: 1 } };
/**
 *
 *
 *
 * 1.5 ts 如何聲明一個函數
 */
// 一： :void 表示函數沒有返回值
function fn2(x) {
    console.log(x);
}
// 二： 這裏表示sum 函數接收兩個參數(多了少了都不行), 參數類型是 number, 返回值也是number
function fn1(x, y) {
    return x + y;
}
// 三： 一樣也能夠用?來表示可選參數，可是可選參數只能放到最後面
function fn3(x, y) {
    if (y) {
        return x + y;
    }
    return x;
}
// 四：ts 怎麼表示默認參數
function fn41(x, y) {
    if (y === void 0) { y = 1; }
    return x + y;
}
// 傳值的時候，默認參數能夠不傳
fn41(1);
fn41(1, 2);
// 默認參數不像可選參數必須放後面，它也能夠放前面, 可是仍是推薦放後面去
function fn42(x, y) {
    if (x === void 0) { x = 1; }
    return x + y;
}
// 傳值的時候，默認參數能夠不傳，可是若是默認參數不放後面，這樣傳值感受很怪
fn42(undefined, 2);
// 五：ts表示剩餘參數。利用擴展運算符
function fn52(array) {
    var items = [];
    for (var _i = 1; _i < arguments.length; _i++) {
        items[_i - 1] = arguments[_i];
    }
    items.forEach(function (item) {
        array.push(item);
    });
}
// 六：箭頭函數
// es6 箭頭函數：沒有參數的時候
// let fn61 = () => {}
// es6 箭頭函數：一個參數的時候，能夠不用圓括號
// let fn62 = arg => {
//   console.log(arg)
// }
// es6 箭頭函數：多個參數的時候，若是致謝一行的話，不用大括號和return
// let fn63 = (arg1, arg2) => arg1 + arg2;
// es6 箭頭函數：多個參數而且換行的時候，須要寫大括號和return
// let fn64 = (arg1, arg2) => {
//   return arg1 + arg2
// }
// es6 箭頭函數：返回一個對象，必須在對象外面加上圓括號
// let fn65 = (arg1, arg2) => ({a: arg1, b:arg2})
// es6 上例中通常會不更名字，同名能夠縮寫成這樣
// let fn66 = (arg1, arg2) => ({
//   arg1,
//   arg2
// })
// 上面的代碼在在線編譯中不會報錯，可是在vscode編輯器裏報錯...噢多凱?