初識Typescript及vscode環境配置

什么是typescript？為什么要用它？

typescript簡稱ts，是js語法的一個超級，由微軟團隊維護的

 

js特點（不足）

 

弱類型：js中的數據變量沒有確定的類型，可以存儲對象，可以存儲數字，可以存儲字符串等等

 

動態的：我定義的變量，到底是什么類型的，需要多少存儲空間，我們定義時不知道，只有在執行的時候臨時分配

因此開發者希望js像強類型語言那樣，可以在運行前將內存空間分配出來，所以ts就是基於這種思想設計出來的，是一個強類型的語言

在大型項目中，代碼可維護性可延展性等等尤為很重要，因此面向對象開發顯得尤為重要，但是js沒有class，extends，interface，implements，public，static等等概念，因此js中的類、繼承等都是模擬的，這樣就要增加一些額外的開銷，這些開銷在大型項目中是不可忽視的。因此ts實現了這些功能

 

 

ts實現了太多的功能，但是沒有被瀏覽器支持，所以我們要編譯

一、下載安裝node環境，這個就不用多介紹了。

1、新建一個練習目錄，在該目錄下的終端（cmd ）直接輸入 tsc --init 它會給我們創建一個tsconfig.json的文件，相當於初始化一個項目目錄。

2、在終端輸入 npm typescript -g 他就會在全局下安裝ts需要的環境。

3、好了，我們開始寫以 xxx.ts后綴的文件，並執行 tsc xxx.ts,或者 tsc xxx.ts --watch 這時他就會制動編譯成一個與之同名的xxx.js文件 這樣一來瀏覽器就可以識別了，我們就可以盡情地練習Ts的語法了。

4、當我們每次修改時都要編譯，很麻煩 vscode可以做以下配置即可：

在tsconfig.json 中做一下修改："outDir": "./js",然后選擇vscode 任務-運行任務-監視tsconfig.json

二、變量的數據類型

let a:string = 'bbb';
let num:number = 123;
let bol:boolean = true;
let color: any = 'red';

var other:number[] = [1,2,3];
let y:[number,string] =  [1,'hello'];//元組
console.log(bol)

三、定義函數

// 定義函數
// 如果一個參數，返回num1+10，如果兩個參數，返回兩個參數之和
function add(num1, num2) {
    if (typeof num2 === 'undefined') {
        return num1 + 10;
    }
    else {
        return num1 + num2;
    }
}
console.log(add(10));
console.log(add(10, 20));