蘇州seo網(wǎng)絡(luò)優(yōu)化公司歐美seo查詢
typescript的定義
- 以JavaScript為基礎(chǔ)構(gòu)建的語言
- 是js的超集
- 可以在任何支持js的平臺執(zhí)行
- ts 拓展了js并增加了類型
- Ts不能被js解析器直接執(zhí)行。
TS=> 編譯為js 執(zhí)行的還是js.
js 不易于維護,而ts易于維護。
可提高項目的可維護性。
類似less、sass 完善的語法寫 樣式,最終轉(zhuǎn)為css . 所有瀏覽器都能渲染
ts 都需要轉(zhuǎn)為js ,編譯ts ,比js 多一道工序
可以完全按照js來寫。
TS增加了什么?
- 類型(有js的類型number、string 、boolean等, 也有新增:給變量設(shè)置類型、 元祖 枚舉、 抽象類)
- 支持ES的新特性
- 添加ES不具備的新特性 (抽象類 接口 工具 裝飾器等)
- 豐富的配置選項(嚴格 松散 ts可編譯為任意版本 解決瀏覽器兼容性問題,比如ie老版本的瀏覽器也可兼容,將ts編譯為ES3)
- 強大的開發(fā)工具(編輯器的提示)
基本類型
- 類型聲明: let 變量:類型=值 ; let fn(參數(shù):類型,參數(shù):類型):類型{}
- 自動類型判斷 當(dāng)對變量的聲明和賦值是同時進行時,ts編譯器會自動判斷變量的類型,所以可以省略掉類型聲明
- 類型:number、string、boolean、使用字面量進行類型聲明、any、unknown、void、never、object、array、tuple元祖、enum枚舉
//聲明一個變量a,同時指定類型為number
let a :number;
// a 的類型設(shè)置為number,在以后的使用過程中a的值只能是數(shù)字
a = 10;
//a='hi' // 是會報錯的,因為變量a的類型是number,不能賦值字符串
// 在寫上述代碼過程中,雖然有錯誤,但通過tsc 1.ts 還是會繼續(xù)編譯
//不會阻止編譯,后續(xù)可以通過編輯器的配置,設(shè)置為書寫錯誤就不編譯ts
let b:string;
b = 'hello';
//聲明完變量就直接賦值
//let c:boolean = true;
//如果變量的聲明和賦值是同時進行時,ts編譯器會自動判斷變量的類型
let c = false
c=true//JS中的函數(shù)是不考慮參數(shù)的類型和個數(shù)的
//function sum(a,b){
// return a+b
//}
//console.log(sum(a:123,b:456)) // 579
console.log(sum(a:123,b:'456')) // '123456'//TS 寫法 可以給參數(shù) 和返回值指定類型 都是小寫
function sum(a:number,b:number):number{return a+b
}
sum(123,456) // 579
//sum(123,'456') // 會報錯// 使用字面量聲明變量
let a1:10;
a1 = 10;
//a1 = 11 // 會報錯 ,指定了a1為10
// 可以使用|連接多個類型(聯(lián)合類型)
let b1 : 'male' | 'female';
b1 = 'male'
b1 = 'female'
//b1 = 'hello' // 這里會報錯
let c1 : boolean|string;
c1 = true;
c1 = 'hi'
// any 表示任意類型 ,一個變量設(shè)置類型為any后,相當(dāng)于對該變量關(guān)閉了TS的類型檢測
// 使用TS時不建議使用any類型
//let d:any;
// 聲明變量如果不指定類型,則TS解析器會自動判斷變量的類型為any(隱式的any)
let d;
d=true;
d = 'zifuchuan'
d=21
//unknown 表示未知類型的值 只霍霍自己,不會改變其他的變量
let e: unknown;
e = 12
e = true
e = 'hello'let s :string;
//d的類型是any,他可以賦值給任意變量;(不止是自己修改了,還會改其他的變量)
//s = d;
//unknown 是一個類型安全的any
//unknown類型的變量,不能直接賦值給其他變量
e = 'hello2'
//s = e // 會報錯 不能把unknown類型的值賦值給其他類型的值
//可使用以下方式
if(typeof e === 'string'){s = e
}// 可使用類型斷言 ,用來告訴解析器變量的實際類型
/*
* 語法:
* 變量 as 類型
* <類型>變量
*/
//盡管解析器不知道是什么類型,確定是string類型
s = e as string;
s = <string>e;// void 表示空,以函數(shù)為例,表示沒有返回值的函數(shù),單純的console。alert
function fn1():void{}// never 表示永遠不會返回結(jié)果
function fn2():never{throw new Error('報錯啦')
}// object 表示js的對象
let o :object;
o = {};
o = function (){}
// {} 用來指定對象中可以包含哪些屬性
//語法:{屬性名:屬性值,屬性名:屬性值}
// 在屬性名后加?表示屬性是可選的
let o1:{name:string,age?:number};
o1 = {name:'七公主',age:23};// [propName:string]:any 表示任意類型的屬性 定義對象的屬性
// 例子 :o2對象里有一個name屬性,其他屬性不管
let o2 :{name:string,[propName:string]:any}
o2 = {name:'七公主',age:23,set:'2'}// 對象中,要同時滿足兩個類型 &表示同時
let o3:{name:string} &{age:number}
o3 = {name:'八戒',age:23}/*
* 設(shè)置函數(shù)結(jié)構(gòu)的類型聲明
* 語法:(形參:類型,形參:類型,形參:類型...)=> 返回值
*/
let func:(a:number,b:number)=> number
func = function(n1:number,n2:number):number{return n1+n2
}// array 數(shù)組
/*
* 數(shù)組的類型聲明:
* 類型[]
* Array<類型>
*/
// string[] 表示字符串?dāng)?shù)組
let stringArr:string[];
stringArr=['aa','b','cc']
// number[] 表示數(shù)值的數(shù)組
let numArr:number[];
numArr=[1,2,3]
// number[] 等同于Array<number>
let numArr2:Array<number>;
numArr2 = [2,3,4];// 元祖:固定長度的數(shù)組 語法:[類型,類型]
let h:[string,number];
h = ['hello',21];//enum 枚舉
/*
* enum 枚舉
*/
enum Gender{Male=0,FeMale=1
}
let i:{name:string,gender:Gender};
i = {name:'孫悟空',gender:Gender.Male // 'male'
};
console.log(i.gender===Gender.Male) // true//類型的別名 可以簡化類型的使用
type Mytype = 1|2|3|4|5;
let k:Mytype;
let m:Mytype;
let n:Mytype;
k = 2
====over