可定義的型別
以下所寫的并不代表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}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/167836.html
標籤：JavaScript