一：工程准備：
1.全局安裝typescript
npm i typescript -g
// 或
yarn global add typescript
- 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編輯器里報錯...噢多凱?