一、學習TypeScript的緣由
當前編寫前端的邏輯的主流語言仍是JavaScript
,但這個語言由於其弱類型的特性使得它在很多的方面給程序員帶來了許多的困擾,例如在使用IDE
時,IDE
往往難以推斷出變量的類型,無法提供代碼補全和錯誤提示,此外JavaScript
對面向對象的支持也比較弱,算是一種比較非常勉強的實現方式,這也導致使用JavaScript
編寫項目時到后期變得難以維護等等。因此學習TypeScript
是非常有必要,也是符合未來前端的發展趨勢的。
tips: 我學習TypeScript主要是通過以下b站的視頻來學習的,各位也可以參考:https://www.bilibili.com/video/BV1yt411e7xV
二、學習環境的搭建
1. TypeScript的編譯環境
使用以下指令進行安裝(需要有node.js環境):
npm install -g typescript
然后輸入下面的指令可查看當前的版本:
> tsc -v
Version 4.3.5
2. vscode自動編譯的配置
我使用的學習環境是 vscode
,先創建一個項目文件夾,然后輸入(先cd到該文件夾中):
tsc --init
然后系統會給我們生成一個 tsconfig.json
的文件。
然后我們只需要將它的 outDir
的值設置為 "./js"
即可:

然后我們先新建一個index.ts
的文件,先編寫一小段ts
代碼:
let str: string = "你好ts"
let str1: string = "你好str1"
然后點擊:終端 》 運行任務 》typescript 》tsc監視 即可

這樣我們每次保存 ts
代碼時,它就會被自動編譯成 js
代碼了。
編譯出的 js
代碼:
"use strict";
var str = "你好ts";
var str1 = "你好str1";
當然,除此之外我們也可以使用以下指令手動編譯 ts
文件:
tsc xxx.ts
三、TypeScript中的數據類型
- 布爾類型
boolean
- 數字類型
number
- 字符串類型
string
- 數組類型
array
- 元祖類型
tuple
- 枚舉類型
enum
- 任意類型
any
null
和undefined
void
類型never
類型
tips: 在TypeScript中定義變量時必須為變量表明變量的類型
1. 簡單變量的定義和初始化
這里以 boolean
和 number
為例:
var flag: boolean = true
var a: number = 123
而當我們試圖把一個其他類型賦值給一個數字類型的變量時會報錯,例如:

2. 復雜變量的定義和初始化
數組類型
寫法一:
let 數組變量名: 元素變量類型[] = [xxx, ...]
例如:
let arr: number[] = [1,2,3]
這種方式和Java
的寫法非常類似。
寫法二:
let 數組變量名: Array<> = [xxx, ...]
例如:
let arr2: Array<string> = ["123","haha"];
寫法三:
let 數組變量名: any[] = [xxx, ...]
這樣數組就退化為了 js
中的可以裝載任意類型元素的數組了。
元組類型
在TypeScript
中元組類型屬於數組的一種,可以指定每個元素的類型:
let 元組變量名:[類型一, 類型二, 類型三...]=[類型一變量, 類型二變量, 類型三變量...]
具體例子:
let oneTuple:[string, number, boolean] = ["ts",15.2,false];
枚舉類型
語法:
enum 枚舉類型名 {
變量1 [=xxx],
變量2 [=xxx]...
}
例如:
enum Flag {
SUCCESS = 1,
ERROR = -1
}
若不為枚舉變量賦值,則它的默認值為索引值(從1開始)
enum Color {
RED, BLUE, GREEN
}
let computerColor: Color = Color.BLUE
console.log(computerColor);
運行結果:

3. 其他變量類型
任意類型
任意類型和es5
中沒有指定類型相似,即一個變量可以使用任意的類型進行賦值。
語法:
let 變量名: any = 任意類型值;
示例:
let foo: any = 123;
foo = "hello world";
foo = false;
undefined類型
當一個變量聲明而沒有初始化賦值時,它的類型為undefined
。
我們可以使用一個多類型運算符 |
來表示一個變量可以有多個類型:
let num: number|undefined;
console.log("num=",num);

void類型
一般用於標明方法沒有返回值,用法同 Java
和 c++
等的 void
:
function run(): void {
console.log("hello world");
}