TypeScript
何為TypeScript
一、編程語言類型
- 動態類型語言(Dynamically Typed Language)
- 類型的檢查是在運行時才做
- 例子---JavaScript、Ruby、Python
- 靜態類型語言(Statically Typed Language)
- 類型檢查是在運行前的編譯階段
- 例子---Java、c、c++
TypeScript提前了類型檢查的時機，它是靜態弱類型語言
二、TypeScript特性
TypeScript(簡稱ts)是一種由微軟開發的自由和開源的編程語言。它是 Javascript 的一個超集，擴展了JavaScript的語法. 其本質上是向Javascript語言添加了可選的靜態類型和基於類的面向對象編程
- JavaScript that scales
- 靜態類型風格的類型系統
- 從es6到es10以至於exnext的語法支持
- 兼容各種瀏覽器、系統、服務器的開源語言
三、為什么使用TypeScript
當使用一個語言庫的時候我們是要有這個需求的時候才用，就像一個組件的狀態管理不復雜你就沒必要用redux和vuex一樣，而TypeScript正是能夠解決我們開發過程中的一些痛點：
- 程序更容易理解
- 能夠知道函數或者方法輸入輸出的參數類型，外部條件
- 不用等運行的時候才能知道數據的類型
- 更容易理解別人的代碼不用詢問
- 效率更高
- 在不同的代碼塊和定義中進行跳轉
- 代碼自動補全
- 更少的錯誤
- 編譯期間能發現大量錯誤
- 杜絕常見的錯誤(...undefined)
- 非常好的包容性
- 完全兼容JavaScript
- 第三方庫可以直接編寫ts文件
TypeScript的實踐
一、安裝
使用npm管理
npm install -g typescript
安裝完之后可執行tsc <文件名>.ts命令生產.js的文件，在執行過程中即使因為語法不對導致編譯過程報錯，但還是會生成.js文件
二、數據類型
Javascript 類型分類：
① 原始數據類型 - primitive values：
- Boolean
- Null
- Undefined
- Number
- BigInt
- String
- Symbol
② Object
undefined與null在==下是相等的，但在全等===條件下是不等的，Null類型，代表“空值”，代表一個空對象指針；Undefined類型，當一個聲明了一個變量未初始化時，得到的就是undefined。
其中null表示"沒有對象"，即該處不應該有值，典型用法是：
- 作為函數的參數，表示該函數的參數不是對象
- 作為對象原型鏈的終點
而undefined表示"缺少值"，就是此處應該有一個值，但是還沒有定義。典型用法是：
- 變量被聲明了，但沒有賦值時，就等於undefined
- 調用函數時，應該提供的參數沒有提供，該參數等於undefined
- 對象沒有賦值的屬性，該屬性的值為undefined
- 函數沒有返回值時，默認返回undefined
基於Javascript的數據類型，我們在寫TypeScript的時候就會嚴格按照其類型定義數據，這樣才有便於我們代碼的維護與規范
1、原始數據類型：
let isType: boolean = true
let count: number = 123
let userName: string = 'chenchenchen'
let u: undefined = undefined
let n: null = null
let notSure: any = 1 //可為任何類型
notSure = "rewq"
notSure = false
2、Object類型：
a、數組：
let arrOfNumber: number[] = [1,2,3] //數字數組
arrOfNumber.push(4)
function test() {
console.log(arguments) //類數組
console.log(arguments.length) //長度
arguments.forEach(item => {}) //報錯
let arr: any[] = arguments //報錯，不能把類數組賦值給數組
}
b、元組：
let user: [string,number] = ["chen",66] //元組
const arr: (number | string)[] = [1,"2",3] //數組
元組相比於數組來說是明確的知道有幾個子元素也就是長度固定，而且每個子元素是什么類型，一般元組的運用場景在導入csv的數據格式的時候有大用
const memberList: [string,string,number][] = [
["abb","bcc",12],
["cvv","asd",24]
]
c、interface接口：
let interface Animal {
readonly id: number; //只讀不寫,與const類似
name: string;
age?: number; //該屬性不是必須
[propName: string]: any; //還可以有其他的屬性，類型是string，值是任意值
say(): string; //還可以加方法
}
let dog: Animal = {
name: "duoduo",
age: 6
}
dog.id = 9527 //報錯，只讀不寫
//interface一般可以做到類型別名的作用
interface Point {x: number, y: number} //與類型別名是一樣的效果
type Point {x: number, y: number} //類型別名
function Pythagorean(data: Point) { //類型別名，一眼看出參數的構造
return Math.sqrt(data.x **2 + data.y **2)
}
Pythagorean（{ x : 4, y : 5}）
類型別名和接口的區別是有的，接口只能是對象類型，而類型別名還可以是其他類型
d、Function函數
//解構寫法
function add({first , second} : {first : number; second : number}):number {
return first + second
}
const add = (x:number,y:number,z?:number):number
{ //約定輸入輸出都為數字的函數,z為可選參數
if(typeof(z) == number) {
return x+y+z
}else {
return x+y
}
}
let add2:string = add //false，函數類型不能賦值給字符串類型
let add3:(x:number,y:number,z?:number) => number = add //true，一模一樣的函數類型可以賦值
function operate(): void { //不進行return的函數
console.log("sadasd")
}
接口類型還可以描述函數類型
interface Itest{
(x:number,y:number,z?:number): number
}
let add4:Itest = add //true
e、聯合類型union types
let numberorstring:number | string
numberorstring = "abc"
numberorstring = 123
類型斷言用於處理類型不確定的情況(編譯器無法判斷類型)，強行讓編譯器按照你規定的類型處理
function getlength(input:string | number):number {
const str = input as string
if(str.length) {
return str.length
}else {
const number = input as number
return number.toString().length
}
}
TypeScript也提供了Type Guard這種機制來確認具體類型
f、類Class
類(Class)：定義了一切事物的抽象特點，類似於藍圖(比如汽車的一張設計圖)
對象(Object)：類的實例(造出來的具體的汽車)
class Car { //定義類
color: string
constructor(color) { //在類實例化的時候才會被執行
this.color = color
}
public start() { //開放的方法
console.log(`this car is ${this.color}`)
}
}
const benz = new Car("black")
class eCar extends Car { //繼承類
run() {
console.log(`this running car is ${this.color}`)
}
}
const tesla = new eCar("white")
class aCar extends Car { //繼承類，重寫方法
static hight = "100" //靜態屬性
constructor(color) {
super(color) //子類的構造函數必須得調用父類的構造函數
console.log(this.color)
}
start() {
console.log(`this aCar is ${this.color}`)
}
}
const bmw = new aCar("blue")
console.log(benz.start()) //this car is black
console.log(tesla.start()) //this car is white
console.log(tesla.run()) //this running car is white
console.log(bmw.start()) //blue , this aCar is blue
console.loh(aCar.hight) //100
class Person {
constructor(private _name: string) { //定義了一個私有屬性name
}
get name() { //可以讓外部訪問私有屬性
return this._name + ' 加密'
}
set name() { //可以在外部賦值，但一般保護類的私有屬性
const realName = name.split(' ')[0] // chen
this._name = realName //私有屬性_name還是"chen"
}
}
const person = new Person("chen")
console.log(person.name); //chen 加密
person.name = 'chen 加密'
console.log(person.name) //chen 加密
一般我們通過類型注解和類型推斷來確認數據的類型，例如
//類型注解
let count: number;
count = 123
//類型推斷
let countInference = 123
一般當ts無法自動分析變量類型的話，我們就需要類型注解來進行標注