可定義的類型
以下所寫的並不代表typescript的數據類型，而是在使用過程中可以用作定義的類型。這里只列舉一些常見的，不代表只有以下這些
- number : 數值類型；
- string : 字符串類型；
- boolean : 布爾類型；
- Array : 數組類型；
- Date : 日期；
- RegExp : 正則；
- Error : 錯誤類型；
- any : 任意類型；
- undefined : undefined；
- null ：空類型；
- Function : 函數；
- Promise : Promise；
- object : 對象類型；
為一個變量定義object類型時，意味着變量的值可以為數組、函數、Date等，就像js所定義的object。當需要實現一個對象時，可以使用接口來定義。
- interface : 接口；
該類型需要通過interface關鍵詞來實現
- enum ：枚舉類型；
該類型需要通過enum關鍵詞來實現
- void ：空類型；
該類型規定函數返回值，代表無返回值
類型聲明
1.單類型
let str:string = 'hello'
2.聯合類型
以下值類型可以為string或number
let money:string|number = '100'
3.數組
//第一種
let arr:number[] = [1,2,3]
//第二種 個人比較喜歡這種，Array關鍵詞能夠第一眼就知道是數組
let arr:Array<string|number> = [1,'1']
Readonly關鍵字 數組只讀
let arr:ReadonlyArray<string> = ['1']
//arr[0] = '2' error
//arr.push('2') error
//arr.length = 10 error
//let arr1 = arr error
//arr = ['2'] ok
4.自定義類型
當一些復雜類型需要多次使用，可以通過type來自定義類型，便於復用
type GetMoney = ()=>string|number
let getMoney:GetMoney = function(){
return '1000'
}
枚舉
使用枚舉我們可以定義一些帶名字的常量，當枚舉作為類型時，表示該屬性只能為枚舉中的某一個成員
1.字符串枚舉
enum SEX{
man = '男',
woman = '女',
unknown = '未知'
}
let arr:Array<SEX> = [SEX.man,SEX.woman]
2.數字枚舉
//不使用初始化器
enum Direction {
Up, //0
Down, //1
Left, //2
Right, //3
}
//使用初始化器
enum Direction {
Up = 1, //1
Down, //2
Left, //3
Right, //4
}
3.聯合枚舉
枚舉類型本身變成了每個枚舉成員的聯合，它可以知道枚舉里的值的集合
enum Direction {
Up,
Down,
Left,
Right
}
let direction:Direction;
direction = Direction.Up // ok
direction = Direction.Down // ok
把direction聲明為Direction類型，可以看成聲明了一個聯合類型 Direction.Up|Direction.Down|Direction.Left|Direction.Right
4.反向映射
正向映射（ name -> value） 反向映射（ value -> name）
數字枚舉成員還具有反向映射， 要注意的是不會為字符串枚舉成員生成反向映射
enum Enum {
A
}
let a = Enum.A;
let nameOfA = Enum[a]; // "A"
TypeScript可能會將這段代碼編譯為下面的JavaScript：
var Enum;
(function (Enum) {
Enum[Enum["A"] = 0] = "A";
})(Enum || (Enum = {}));
var a = Enum.A;
var nameOfA = Enum[a]; // "A"
簡單說下以上JavaScript代碼發生了什么：
- 自執行函數為Enum添加屬性，
- Enum["A"] = 0賦值后返回0作為索引，
- 發生第二次賦值Enum[0] = 'A'
- 此時的Enum內部為 {"A":0, 0:"A"}
函數
1.默認參數 可選參數
//返回值為字符串數組
function foo(msg:string, msg1:string='world'):Array<string> {
return [msg,msg1]
}
say('hello')
2.剩余參數
function foo1(...arr:Array<string>):void {
arr.forEach(item=>console.log(item))
}
say1('1','2')
3.回調函數
function foo3(cb:()=>void) {
cb()
}
4.表達式函數
let foo4:(num:string)=>void = function(){}
5.Promise
//第一種 為resolve定義類型
function asyncFn():Promise<string>{
let p = new Promise((resolve:(val:string)=>void)=>{
resolve('result')
})
return p
}
//第二種 聲明返回值的泛型
function asyncFn():Promise<string>{
let p = new Promise<string>((resolve)=>{
resolve('result')
})
return p
}
接口(interface)
接口的作用是對值所具有的結構進行類型檢查，為這些結構定義規定，讓你的代碼按照規定去執行。
1.對象
interface People{
readonly name: string;
height: number;
like?: string;
}
let worker:People = {name:'Joe',height:180}
?: 可選屬性
readonly 屬性只讀
2.索引簽名
添加任意數量的額外屬性
interface People{
readonly name: string;
height: number;
[propName: string]: any;
}
let worker:People = {
name:'Joe',
height:180,
sex:'man',
eat:function(){}
}
3.繼承
接口和類一樣，可以使用繼承，這樣可以分割更多的模塊，便於我們靈活的組合使用
interface People{
say(msg:string):string
}
interface Man extends People{
readonly name:string
}
let coder:Man = {
name:'Wahfung',
say(msg){
return 'say:'msg
}
}
多繼承
interface Man extends People,SuperMan{
readonly name:string
}
4.定義函數
interface SayHandler {
(people:string,msg:string):string
}
//參數名無需與接口的一致，甚至無需為參數規定類型，接口會自動進行判斷
let sayMsg:SayHandler = function(p, m) {
let result = p+':'+m
return result
}
sayMsg('Joe','hello')
5.為函數規定參數
interface Car {
color: string;
brand?: string;
}
function CreateCar(config:Car):object{
let price = 1000
if(config.brand==='BMW'){
price = 2000
}
return {color:config.color,price}
}
CreateCar({color:'red'})
使用es6解構參數重寫👇
function CreateCar({color,brand}:Car):object{
let price = 1000
if(brand==='BMW'){
price = 2000
}
return {color,price}
}