typescript
定義
- type類型+ES6
- javascript 的超級
包含ES6 - 靜態(tài)類型語言
類型檢查贼邓,接口绰姻,oop非常完善 - 可以編譯成JavaScript 在瀏覽器運行
安裝
npm i typescript -g
tsc常用命令
tsc --init //初始化項目
tsc ./src/xxx.ts //編譯某個文件
tsc -w //檢測變化并編譯
tsconfig.json
{"complierOptions":{
"outDir": "./dist", //輸出文件夾
"rootDir": "./src", //源文件夾
}}
ts 常見類型
- boolean布爾
let b:boolean = true;
- number 數(shù)字
let num:number = 18;
- string 字符串
let str:string = "I love you";
- 數(shù)組
let arr:number[]=[1,3,5,7,9];
let arr2:Array<string> = ["I","love","typescript"];
let arr3:any[] = ["123","456",789];
- 對象 Object
let obj:Object = {name:"yy",age:18}
- 任意 any
let notSure:any = "yapan";
- 沒有返回 void
function fun():void{ }
- null 類型只能是null
let n:null = null;
- undefined 沒有定義
let u:undefined = undefined;
面向?qū)ο驩OP
- 封裝
- 繼承
- 多態(tài)
- 接口
接口
接口
- 定義
interface Person{
name:string,
age:number
}
- 實現(xiàn)接口
let user:Person = {
name:"yaya",
age:18,
}
- 使用
function fun(p:Person){
console.log(p);
}
fun(user)
可選接口
interface SquareConfig{
color?:string,
width?:number
}
只讀接口
interface Point {
readonly x:number,
readonly y:number,
}
函數(shù)
函數(shù)返回值
無返回值
function warnUser ():void{}
返回字符串類型
function fun():string{}
一旦定義了返回類型恩脂,在函數(shù)內(nèi)部必須也要返回該類型
參數(shù)
參數(shù)指定類型
function add(x:number,y:number): number{}
參數(shù)可選
function add(x:number,y?:number): number{ }
參數(shù)默認(rèn)
function add(x:number,y:number=20): number{ }
箭頭函數(shù)
let add = (x:number,y:number):number =>x+y;
類
和ES6一致的
訪問修飾符
修飾符既可以修飾屬性龄砰,也可以修飾方法
class Animal{
name:string;
constructor(name:string){
this.name =name;
}}
簡寫
class Animal{
constructor(publicname:string){this.name =name; }
private sayHi(){}
}
public:默認(rèn)修飾符畸颅,代表公開的
- class內(nèi)部可以訪問
- 子類可以訪問
- 實例也可以訪問
private:私有的
- class內(nèi)部可以訪問
- 子類會繼承担巩,可以訪問
- 實例不能訪問
protected:保護(hù)的
- class內(nèi)部可以訪問
- 子類會繼承,可以訪問
- 實例不能訪問
存儲器
在設(shè)置或者訪問對象某個屬性時可以做一些額外操作實現(xiàn)的封裝没炒,私有變量的隱藏
步驟
- 01 定義私有變量 private_age:number;
- 02 設(shè)置set
set age(val:number){
this._age=age;
//可以寫其他邏輯
}
//當(dāng)去實例.age=xxx 時候會被調(diào)用這個方法
- 03 設(shè)置get
get age():number{
return this._age;
//...
}
//當(dāng)執(zhí)行 實例.age 時候被調(diào)用
- 實例化訪問設(shè)置屬性
let c = new Cat("花花",2);
c.age(); //get age 方法被調(diào)用
c.age=18; //set 方法被調(diào)用