TypeScript學習筆記(一)環境搭建和數據類型


一、學習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監視 即可

image-20210808200216277

這樣我們每次保存 ts 代碼時,它就會被自動編譯成 js 代碼了。

編譯出的 js 代碼:

"use strict";
var str = "你好ts";
var str1 = "你好str1";

當然,除此之外我們也可以使用以下指令手動編譯 ts 文件:

tsc xxx.ts

三、TypeScript中的數據類型

  • 布爾類型 boolean
  • 數字類型 number
  • 字符串類型 string
  • 數組類型 array
  • 元祖類型 tuple
  • 枚舉類型 enum
  • 任意類型 any
  • nullundefined
  • void 類型
  • never 類型

tips: 在TypeScript中定義變量時必須為變量表明變量的類型

1. 簡單變量的定義和初始化

這里以 booleannumber 為例:

var flag: boolean = true
var a: number = 123

而當我們試圖把一個其他類型賦值給一個數字類型的變量時會報錯,例如:

image-20210808201506357

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);

運行結果:

image-20210808203931856

3. 其他變量類型

任意類型

任意類型和es5中沒有指定類型相似,即一個變量可以使用任意的類型進行賦值。

語法:

let 變量名: any = 任意類型值;

示例:

let foo: any = 123;
foo = "hello world";
foo = false;

undefined類型

當一個變量聲明而沒有初始化賦值時,它的類型為undefined

我們可以使用一個多類型運算符 | 來表示一個變量可以有多個類型:

let num: number|undefined;
console.log("num=",num);
image-20210808205056074

void類型

一般用於標明方法沒有返回值,用法同 Javac++ 等的 void

function run(): void {
    console.log("hello world");
}

下一部分:TypeScript學習筆記(二)函數和類【面向對象】


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM