TypeScript
官方地址
1. 下載
npm install -g typescript
查看是否安裝成功
tsc -v Version 3.9.7
基本使用
helloworld.ts
console.log("ts hello world");
編譯ts->js
tsc helloworld.ts 即可生成helloworld.js
配置自動(dòng)編譯
初始化tsconfig.json
tsc --init
找到tsconfig的outdir打開注釋改成outDir:./js
然后終端--> 運(yùn)行任務(wù)-->typescript-->tsc 監(jiān)視
2. 基礎(chǔ)類型
在編寫ts的時(shí)候變量如果聲明了是什么類型的，是允許修改的！盡管編譯是通過(guò)的，但是不建議這么操作
2.1 布爾boolean
let isFlag:boolean = false;
console.log(isFlag)
2.2 數(shù)字類型number
let count:number = 0;
count++;
for(let i:number=0;i<10;i++){
console.log(i)
}
2.3 字符串類型
let str:string = '123';
str = 'bob'
console.log(str)
2.4 數(shù)組類型
在聲明數(shù)組的時(shí)候就已經(jīng)限定好數(shù)組里面的每一個(gè)項(xiàng)的類型了，所以在進(jìn)行數(shù)組的CRUD的時(shí)候，都必須要是相同的類型
定義數(shù)組的兩種方式
let arr:number[] = [123,456]
let arr1:Array<string> = ['aaa','111']
let arr:number[] = [123,456]
let arr1:Array<string> = ['aaa','111']
arr.push(1111)
- 這種是不允許的
arr.push('a')
arr[0] = 45444;
console.log(arr,arr1)
2.5 元組類型
元組就是指定義數(shù)組的時(shí)候可以指定多種類型，但是指定的類型必須要和數(shù)組中的元素一一對(duì)應(yīng)，不允許超出或者缺少
// 允許
let anyArray:[string,number,boolean] = ['1',1,false]
// 不允許
let anyArray:[string,number,boolean] = ['1',1,false,'aaaa']
// 不允許
let anyArray:[string,number,boolean] = ['1',1]
2.6 枚舉類型
枚舉就是定義一些常量供自己使用 待定
enum Status {
success = 200,
serverError = 500,
noAuth = 403
}
let requestStatus:Status = Status.success;
console.log(requestStatus) // 200
2.7 any類型
定義一個(gè)變量為任意類型，你可以重新給他賦任意類型的值
也可以給一個(gè)變量指定多種類型
let num:string|boolean|undefined|null;
let a:any ;
a=123;
a=[123]
console.log(a)
let arr4:Array<any> = [1233,'aaa']
let arr5:any[] = ['aaaa',1]
console.log(arr4,arr5)
2.8 void類型
void一般用于函數(shù) 標(biāo)識(shí)函數(shù)沒(méi)有返回值
function foo():void{
console.log('foo')
// return 123;
}
// 標(biāo)識(shí)函數(shù)的返回值是數(shù)字類型
function foo():number{
console.log('foo')
// return 123;
}
foo();
2.9 null和undefined
定義一個(gè)變量類型為null和undefined 其用處并不是很大
let u: undefined = undefined;
let n: null = null;
2.10 never
用來(lái)告知編譯器某處代碼永遠(yuǎn)不會(huì)執(zhí)行,從而獲得編譯器提示, 以避免程序員在一個(gè)永遠(yuǎn)不會(huì)(或不應(yīng)該)執(zhí)行的地方編寫代碼.
function listen() : never{
while(true){
let conn = server.accept()
}
}
listen()
console.log("!!!") //Error: Unreachable code detected.ts(7027)
// 這里聲明為never函數(shù)表示這個(gè)函數(shù)調(diào)用之后下面的代碼不會(huì)執(zhí)行 避免別人在下面繼續(xù)寫代碼
function throwError(msg: string ) :never {
throw new Error(msg)
}
throwError("some error")
// 程序報(bào)錯(cuò) 代碼不會(huì)執(zhí)行到著 所以在這里打印是沒(méi)有用的
console.log("從這開始代碼是不會(huì)執(zhí)行的") //Error: Unreachable code detected.ts(7027)
2.11 object
定義obj類型可能是用來(lái)限定函數(shù)傳入的參數(shù) 待驗(yàn)真
let obj:Object ={a:123};
// obj.a = 456; // error
obj = {a:456}
console.log(obj)
declare function create(o: object | null): void;
create({ prop: 0 }); // OK
create(null); // OK
create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error
3. 函數(shù)
3.1函數(shù)的兩種定義方式
ts中的函數(shù)注意以下兩點(diǎn)
- 函數(shù)的返回值類型
- 形參的數(shù)據(jù)類型
function foo1(a:string,b:number):string{
return 'aaa'
}
const bar2 = function(bar:string):void{
console.log(bar)
}
函數(shù)也可以返回一個(gè)Promise對(duì)象
async getList(payload?: any):Promise<object>{
const res = await get_List()
this.updateList(res)
return Promise.resolve({a:123})
}
3.2 可選參數(shù)和默認(rèn)參數(shù)
可選參數(shù)一定要在必須參數(shù)的后面
const bar3 = function(bar:string,age?:number=15):void{
if(age){
console.log(age)
}
console.log(bar)
}
3.3 剩余參數(shù)
const bar4 = function(...rest:number[]):void{
console.log(rest)
}
const bar5 = function(...rest:any[]):void{
console.log(rest)
}
bar5(12,'aaa') // [12, "aaa"]
3.4 函數(shù)重載
同一個(gè)函數(shù)名，傳入不同類型的函數(shù)
function hello(name: string): string;
function hello(age: number): number;
function hello(str: any): any {
if (typeof str == 'string') {
return str + 'str'
} else {
return str + 'number'
}
}
hello(123)
snabbdom的列子
export declare function h(sel: string): VNode;
export declare function h(sel: string, data: VNodeData | null): VNode;
export declare function h(sel: string, children: VNodeChildren): VNode;
export declare function h(sel: string, data: VNodeData | null, children: VNodeChildren): VNode;
3.5 箭頭函數(shù)
和普通函數(shù)是一樣的
setTimeout(():void => {
console.log('箭頭函數(shù)')
}, 1000);
4. 類
ts中的類和ES6的類很相似
class Person {
public name: string;
public age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
work() {
console.log(`${this.name}正在學(xué)習(xí)ts`)
}
}
const per = new Person('liuxuan', 24)
console.log(per)
per.work(); // liuxuan正在學(xué)習(xí)ts
4.1 繼承
class Person {
public name: string;
public age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
work() {
console.log(`${this.name}正在學(xué)習(xí)ts`)
}
}
class Son extends Person {
public gender: number;
constructor(name: string, age: number, gender: number) {
super(name, age)
this.gender = gender;
}
Console():void {
if (this.gender == 0) {
console.log('男')
} else {
console.log('女')
}
}
}
let son = new Son('劉德華', 15, 0)
son.work(); // 劉德華正在學(xué)習(xí)ts
son.Console(); // 男
4.2 修飾符
- public 子類 類內(nèi)部 類外部都可以訪問(wèn)
- private 類內(nèi)部可以訪問(wèn)
- protected 子類和類內(nèi)部可以訪問(wèn)
private
class Person {
private name: string;
public age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
work() {
console.log(`${this.name}正在學(xué)習(xí)ts`)
}
}
let son = new Son('劉德華', 15, 0)
子類和類外部無(wú)法訪問(wèn)
let p = new Person('liuxuan',24)
console.log(p.name)// 屬性“name”為私有屬性，只能在類“Person”中訪問(wèn)。
let son = new Son('劉德華', 15, 0)
console.log(son.name) // 屬性“name”為私有屬性，只能在類“Person”中訪問(wèn)。
protected
/*
* @Description:
* @Author: 劉宣
* @email: 1395380336@qq.com
* @Date: 2021-05-11 23:17:18
* @LastEditTime: 2021-05-11 23:41:39
*/
class Person {
protected name: string;
public age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
work():void{
console.log(`{this.name}正在學(xué)習(xí)ts`)
}
}
class Son extends Person {
public gender: number;
static address:string = '安徽省';
constructor(name: string, age: number, gender: number) {
super(name, age)
this.gender = gender;
}
Console():void{
if (this.gender == 0) {
console.log('男')
} else {
console.log('女')
}
}
static yourAddr(){
console.log(Son.address)
}
work():void{
console.log(`{this.name}正在學(xué)習(xí)ts`)
}
}
let p = new Person('liuxuan',24)
p.work()
let son = new Son('劉德華', 15, 0)
son.work() // 劉德華正在學(xué)習(xí)ts
在類的外部是無(wú)法訪問(wèn)的。
console.log(p.name)// 屬性“name”受保護(hù)，只能在類“Person”及其子類中訪問(wèn)
console.log(s.name)// 屬性“name”受保護(hù)，只能在類“Person”及其子類中訪問(wèn)
4.3 靜態(tài)屬性和方法
類的靜態(tài)屬性和靜態(tài)方法都是通過(guò)類名來(lái)調(diào)用的，也就是說(shuō)有些方法我們不想實(shí)例化之后再調(diào)用，我們希望直接調(diào)用
class Son extends Person {
public gender: number;
static address:string = '安徽省';
constructor(name: string, age: number, gender: number) {
super(name, age)
this.gender = gender;、
}
Console() {
if (this.gender == 0) {
console.log('男')
} else {
console.log('女')
}
}
static yourAddr(){
console.log(Son.address)
}
}
Son.yourAddr(); // 安徽省
4.4 多態(tài)
就是指 父親定義一個(gè)方法 子類都有這個(gè)方法 只是每個(gè)子類的表現(xiàn)（實(shí)現(xiàn)）不一樣 這就是多態(tài)
例如 動(dòng)物都有吃這個(gè)功能 但是狗喜歡吃骨頭 貓喜歡吃老鼠 這就是多態(tài)
class Animal{
name:string ;
constructor(name:string){
this.name = name
}
eat(){
}
}
class Dog extends Animal{
constructor(name:string){
super(name)
}
eat():void{
console.log(this.name+'吃肉')
}
}
var dog = new Dog('金毛')
dog.eat();
4.5 抽象類
ts中的抽象類：它是提供其他類型繼承的基類，不能被實(shí)例化
用abstract關(guān)鍵字定義抽象類和抽象方法，抽象類中的抽象方法不包含具體實(shí)現(xiàn)并且必須在派生類中的實(shí)現(xiàn)
抽象方法只能出現(xiàn)在抽象類中
抽象類和抽象方法用來(lái)定義標(biāo)準(zhǔn) 標(biāo)準(zhǔn)：Animal這個(gè)類要求它的子類必須包含eat方法 （也就是說(shuō)抽象類的抽象方法必須在子類中進(jìn)行重寫）
// 定義一個(gè)Animal1抽象類
abstract class Animal1{
abstract foo():any;
}
// Dog1繼承Animal1抽象類 并重寫Animal1的抽象方法eat
// 不重寫父類方法ts就會(huì)編譯報(bào)錯(cuò)
class Dog1 extends Animal1{
constructor(){
super();
}
foo():number{
console.log('抽象方法的抽象類必須要被重寫')
return 123;
}
}
console.log(new Dog1().foo())
5.接口 interface
接口：主要就是用來(lái)對(duì)行為和屬性的規(guī)范 以及對(duì)批量方法的約束
使用：函數(shù)的參數(shù)(key:interface)
屬性和行為的規(guī)范
接口的寫法與類的寫法不同 接口是{}
接口與類的關(guān)系：類實(shí)現(xiàn)這個(gè)接口
不使用接口進(jìn)行約束實(shí)現(xiàn),是無(wú)法實(shí)現(xiàn)對(duì)批量方法進(jìn)行約束的
// printLabel 函數(shù)規(guī)定傳入一個(gè)對(duì)象 對(duì)象上必須有一個(gè)label屬性且必須是字符串類型
function printLabel(labelledObj: { label: string }) {
console.log(labelledObj.label);
}
// 我們傳入的對(duì)象參數(shù)實(shí)際上會(huì)包含很多屬性，但是編譯器只會(huì)檢查那些必需的屬性是否存在，并且其類型是否匹配
let myObj = { size: 10, label: "Size 10 Object" };
printLabel(myObj);
// 并且同時(shí)是無(wú)法實(shí)現(xiàn)批量方法的約束
// printLabel2 和 printLabel對(duì)形參的約束是一樣的 但是我們需要重新寫一下
function printLabel2(labelledObj: { label: string }) {
console.log(labelledObj.label);
}
換成interface
interface Print{
label:string;
}
printLabel3/printLabel4都是被Print接口約束的
function printLabel3(labelledObj: Print) {
console.log(labelledObj.label);
}
printLabel3(myObj)
function printLabel4(labelledObj: Print) {
console.log(labelledObj.label);
}
printLabel4(myObj)
5.1 可選參數(shù)?/只讀參數(shù) readonly
// 可選參數(shù)/只讀屬性
// 和函數(shù)的可選一樣 在名字的后面加上?
interface Print2{
label:string;
age?:number;
readonly gender:number;
}
function printLabel5(labelledObj: Print2) {
console.log(labelledObj)
labelledObj.gender = 45; // 無(wú)法分配到 "gender" ，因?yàn)樗侵蛔x屬性
}
printLabel5({label:'111',gender:123,age:24}) // {label: "111", gender: 123}
printLabel5({label:'111',gender:123,age:24}) // {label: "111", gender: 123,age:24}
5.2 接口小案例
/*
* @Description:
* @Author: 劉宣
* @email: 1395380336@qq.com
* @Date: 2021-05-12 11:27:18
* @LastEditTime: 2021-05-12 13:53:30
*/
interface AjaxConfig {
type: string;
url: string;
data?: any;
dataType: string;
header?: object
}
function Ajax(obj: AjaxConfig) {
var xhr:any = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest()
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open(obj.type,obj.url)
xhr.send(obj.data)
xhr.onreadystatechange = ():void=>{
if(xhr.readyState!=4)return;
console.log(xhr.responseText
)
}
}
Ajax({
type:"GET",
url:"AAA",
dataType:"1111"
})
5.3 對(duì)函數(shù)進(jìn)行限制
對(duì)函數(shù)進(jìn)行限定 可實(shí)現(xiàn)對(duì)函數(shù)的批量限定,規(guī)定被限定的函數(shù)必須符合我的接口規(guī)范
限定函數(shù)的name屬性為string類型，age為number類型 返回值為空
interface Func {
(name: string, age: number): void;
}
// 批量對(duì)func和func1進(jìn)行限定
var func: Func = function (name: string, age: number): void {
console.log(name + "==" + age)
}
func(12,22) // Error
func('12',22) // Success
var func1: Func = function (name: string, age: number): void {
console.log(name + "==" + age)
}
func1(12,22) // Error
func1('12',22) // Success
5.4 對(duì)類類型進(jìn)行限定
對(duì)類的類型進(jìn)行限定。類和類之間叫實(shí)現(xiàn) implements
規(guī)定：凡是實(shí)現(xiàn)我這個(gè)類的 必須存在存在name為string 和eat方法 且這兩個(gè)方法的類型必須要和我接口保持一致
interface Animal {
name: string;
eat(name: string): number;
}
class Dog3 implements Animal {
name: string;
constructor(name: string) {
this.name = name;
}
eat() {
console.log(name + "===吃")
return 123;
}
}
let d = new Dog3('金毛');
d.eat();
5.5 可索引接口
指的是對(duì)對(duì)象和數(shù)組進(jìn)行限定
索引為number類型就是對(duì)數(shù)組的限定，索引為字符串類型就是對(duì)對(duì)象進(jìn)行限定
數(shù)組：
interface Arrays {
// 限定數(shù)組的索引為number 且數(shù)組項(xiàng)為數(shù)字
[index: number]: number
}
let newArr: Arrays = [123, 'aa'] // 不能將類型“string”分配給類型“number”
let newArr1: Arrays = [123]
對(duì)象
interface Objects {
// 限定對(duì)象的索引為string 對(duì)象的key限定為string
[index: string]: string
}
let obj1: Objects = {
'name': 'zs',
age: 18, // 這里的key應(yīng)該為字符串
}
5.5 接口的擴(kuò)展（接口繼承接口）
接口繼承接口 并且實(shí)現(xiàn)了類
City類必須要同時(shí)符合Area和Province接口規(guī)范，
interface Area {
area: string;
}
// 接口繼承接口
interface Province extends Area {
province: string;
}
class China {
country: string;
constructor(country: string) {
this.country = country;
}
}
// City類繼承China類并實(shí)現(xiàn)了Province接口
class City extends China implements Province {
province: string;
area: string;
constructor(province: string, area: string, country: string) {
super(country)
this.province = province
this.area = area
}
hello(){
console.log(this.province,this.area,this.country)
}
}
let C = new City("安徽省", "華東", "china")
C.hello(); // 安徽省 華東 china
6 泛型
泛型:可以支持不特定的數(shù)據(jù)類型 要求：傳入的參數(shù)和返回的參數(shù)是一致的
具體的類型 T由傳入時(shí)候的數(shù)據(jù)類型來(lái)決定
泛型就是解決類 接口 方法 的復(fù)用性 以及對(duì)不特定數(shù)據(jù)類型的支持
回顧之前 我們?cè)诙x函數(shù)或者類或者接口的時(shí)候 我們都是直接把它們的數(shù)據(jù)類型寫死了 ，這導(dǎo)致他們無(wú)法進(jìn)行一個(gè)復(fù)用，使用泛型可以有效的解決這類問(wèn)題
6.1 泛型函數(shù)
// 不使用泛型
function foo(name: string): string {
console.log(name)
return name;
}
foo('123')
// 如果我們想傳入數(shù)字怎么辦（可以設(shè)置為any類型，但是這樣就失去了類型校驗(yàn)的價(jià)值）? 再寫一份
function foo1(name: number): number {
console.log(name)
return name;
}
foo1(123)
// 到此發(fā)現(xiàn) 這顯然是很冗余的
// 使用泛型
function foo4<T>(name: T): T {
console.log(name)
return name;
}
foo4('123')
foo4(456)
// 使用泛型之后 foo4函數(shù)被重用了
6.2 泛型類
// 普通類
class Foo7 {
name: string;
constructor(name: string) {
this.name = name;
}
printName() {
console.log(this.name)
}
}
let foo7 = new Foo7('liuxuan');
foo7.printName(); // liuxuan
let foo8 = new Foo7(123); // 類型“number”的參數(shù)不能賦給類型“string”的參數(shù)。
// 到此發(fā)現(xiàn)這個(gè)類也是存在局限的 因?yàn)槲覀冊(cè)诔跏蓟臅r(shí)候 只能傳入string類型的
泛型類
// 泛型類
class Foo8<T>{
name: T;
constructor(name: T) {
this.name = name;
}
printName(): void {
console.log(this.name, 'printName')
}
}
let foo9 = new Foo8('foo8')
let foo10 = new Foo8(10)
foo9.printName()
foo10.printName()
// 使用泛型類之后，這個(gè)Foo8類 顯然可以支持更多的類型了 減少了代碼的冗余
6.3 泛型接口
// 泛型接口
// 普通接口
interface Bar1 {
name: string;
eat(name: string, food: string): void;
}
class Bar2 implements Bar1 {
name: string;
constructor(name: string) {
this.name = name;
}
eat(): void {
console.log(this.name) // 楊訓(xùn)鵬
}
}
let bar10 = new Bar2('楊訓(xùn)鵬')
bar10.eat();
// 這個(gè)接口也是存在局限性的，因?yàn)檫@個(gè)接口只支持string類型的
new Bar2(10) // 類型“number”的參數(shù)不能賦給類型“string”的參數(shù)。
泛型接口
// 使用泛型接口對(duì)函數(shù)和屬性進(jìn)行泛型限定
interface Bar99<T> {
name: T;
eat(name: T, food: T): void;
}
class Bar999<T> implements Bar99<T> {
name: T;
constructor(name: T) {
this.name = name;
}
eat(name: T, food: T): void {
console.log(name,food,"name-food")
}
}
new Bar999<string>('helloWorld').eat('name','food') // helloWorld
new Bar999<number>(123).eat(1,2) // 123
6.4 把類當(dāng)作泛型
用來(lái)限定傳入的類型是我類的實(shí)例
案例:封裝一個(gè)數(shù)據(jù)庫(kù)操作類
數(shù)據(jù)庫(kù)DBI接口
interface DBI<T> {
add(info: T): boolean;
update(info: T, id: number): boolean;
delete(id: number): boolean;
get(id: number): any[];
}
定義MSsql類
實(shí)現(xiàn)泛型接口的類也必須是一個(gè)泛型類
class MSSQL<T> implements DBI<T>{
add(info: T): boolean {
console.log(info) // User {username: "wgy", password: 91129}
throw new Error("Method not implemented.");
}
update(info: T, id: number): boolean {
throw new Error("Method not implemented.");
}
delete(id: number): boolean {
throw new Error("Method not implemented.");
}
get(id: number): any[] {
throw new Error("Method not implemented.");
}
}
定義一個(gè)MYSQL類
class MYSQL<T> implements DBI<T>{
add(info: T): boolean {
console.log(info) // User {username: "wgy", password: 91129}
throw new Error("Method not implemented.");
}
update(info: T, id: number): boolean {
throw new Error("Method not implemented.");
}
delete(id: number): boolean {
throw new Error("Method not implemented.");
}
get(id: number): any[] {
throw new Error("Method not implemented.");
}
}
我們要向數(shù)據(jù)庫(kù)添加用戶 所以要限定傳入的數(shù)據(jù)必須要限定為User類的實(shí)例
class User{
username:string;
password:any;
constructor(username:string,password:any){
this.username = username;
this.password = password;
}
}
操作
// 像數(shù)據(jù)庫(kù)中插入用戶信息
let user = new User('wgy',91129);
// 使用類泛型 來(lái)限定傳入我數(shù)據(jù)的數(shù)據(jù)必須是User的實(shí)例
let ms = new MSSQL<User>();
ms.add(user)
// ms.add(123) // 類型“number”的參數(shù)不能賦給類型“User”的參數(shù)。
7.模塊
ts中的模塊封裝遵循的是ES6的 export/import語(yǔ)法
對(duì)上面的DB案例進(jìn)行封裝
新建DB-interface.ts用來(lái)保存接口
interface DBI<T> {
add(info: T): boolean;
update(info: T, id: number): boolean;
delete(id: number): boolean;
get(id: number): any[];
}
export default DBI;
新建MYSQL類 操作mysql
import DBI from "./DB-interface"
export default class MYSQL<T> implements DBI<T>{
add(info: T): boolean {
console.log(info) // User {username: "wgy", password: 91129}
throw new Error("Method not implemented.");
}
update(info: T, id: number): boolean {
throw new Error("Method not implemented.");
}
delete(id: number): boolean {
throw new Error("Method not implemented.");
}
get(id: number): any[] {
throw new Error("Method not implemented.");
}
}
新建MSSQL類 操作微軟的sql
import DBI from "./DB-interface"
export default class MSSQL<T> implements DBI<T>{
add(info: T): boolean {
console.log(info) // User {username: "wgy", password: 91129}
throw new Error("Method not implemented.");
}
update(info: T, id: number): boolean {
throw new Error("Method not implemented.");
}
delete(id: number): boolean {
throw new Error("Method not implemented.");
}
get(id: number): any[] {
throw new Error("Method not implemented.");
}
}
新建User類 操作用戶信息
export default class User{
username:string;
password:any;
constructor(username:string,password:any){
this.username = username;
this.password = password;
}
}
demo.ts中使用
導(dǎo)入
import MSSQL from "./modules/MSSQL-DB";
import MYSQL from "./modules/MYSQL-DB";
import User from "./modules/User";
使用
// 像數(shù)據(jù)庫(kù)中插入用戶信息
let user = new User('wgy',91129);
// 使用類泛型 來(lái)限定傳入我數(shù)據(jù)的數(shù)據(jù)必須是User的實(shí)例
let ms = new MSSQL<User>();
ms.add(user)
// ms.add(123) // 類型“number”的參數(shù)不能賦給類型“User”的參數(shù)。
到此就完成了模塊話
----demo.ts
----modules
------DB-interface.ts
------MYSQL-DB.TS
------MSSQL-DB.TS
------User.ts
8.命名空間
9.裝飾器
9.1 類裝飾器
9.2 屬性裝飾器
10.ts在vue中的使用
前言：在寫法上 只有js的部分寫法變了 ,主要是以下兩個(gè)包(裝飾器)
vue-property-decorator
vuex-module-decorators
首先先創(chuàng)建一個(gè)ts的項(xiàng)目，然后裝包(一個(gè)是vue的一個(gè)是)
cnpm i vue-property-decorator vuex-module-decorators -S
10.1與Vue 寫法上的區(qū)別
注意：下面的寫法都是在export default class About extends Vue {}寫的
首先最基本的我們需要引入兩個(gè)函數(shù)吧
import { Component, Vue} from "vue-property-decorator";
@Component聲明組件
https://segmentfault.com/a/1190000019906321
@Component 裝飾器可以接收一個(gè)對(duì)象作為參數(shù)，可以在對(duì)象中聲明 components ，filters，directives等未提供裝飾器的選項(xiàng)，也可以聲明computed，watch等 ,目前我還沒(méi)用到，用到了寫
@Component({
name: "About",
components: {
User
}
})
以前的寫法
name:"About",
components:{
User
}
10.1.1.vue文件的寫法區(qū)別
react
class Test extends React.Component{}
ts-vue
export default class About extends Vue {}
js-vue
export default {}
10.1.2.data
// 定義一個(gè)User接口 用來(lái)約束UserList的數(shù)據(jù)類型
interface IUser {
name: string;
age: number;
sex?: number;
id: number;
}
private firstName: string = "liu";
private lastName: string = "xuan";
private CPC: any = "v-model自定義組件";
private obj: any = {
names: "zs",
age: 20,
sex: 1,
id: 123
};
userList: IUser[] = [
{
name: "zs",
age: 20,
sex: 1,
id: 123
},
{
name: "wu",
// age: '18', // 受到interface接口的約束
age: 15,
sex: 0,
id: 456
}
];
vue
data(){
return {
firstName:"liu",
lastName:xuan
},
10.1.3 computed
private get fullName():string{
return this.firstName + this.lastName;
}
computed:{
fullName(){
return this.firstName+this.lastName
}
},
10.1.4 watch
import {Watch} from "vue-property-decorator"
@Watch("firstName",{immediate:true,deep:true})
// 這里的名字是隨便寫的 不固定的
private firstNameChange(newVal: any, oldVal: any): void {
console.log(newVal, oldVal, "我相當(dāng)于Vue的Watch監(jiān)聽");
}
watch(){
firstName:{
handler:(newval,oldval){
},
deep:true,
immediate:true
}
}
10.1.5 生命周期函數(shù)
生命周期函數(shù)的寫法還是和之前是一樣的
public created() {
this.lastName = "wgy";
this.getList();
console.log("我是聲明周期函數(shù) 我的寫法還是和之前是一樣的");
}
public mounted() {
console.log("我是聲明周期函數(shù) 我的寫法還是和之前是一樣的");
}
10.1.6 普通函數(shù)
寫法也是和之前一樣的 真要說(shuō)區(qū)別的話 多了一些方法的修飾符
private addCount()：void {
AboutStore.updateCount(11);
}
private getList():void{
AboutStore.getList().then(res=>{
console.log(res) // {a:123}
})
}
子組件
<User
v-for="(userItem, index) in userList"
:sex="userItem.sex"
:age="userItem.age"
:id="userItem.id"
:name="userItem.name"
:key="index"
:userItem="userItem"
v-model="CPC"
></User>
10.1.7 prop
import { Prop } from "vue-property-decorator";
@Prop(Number) private id!: number; // id后面加上! 表示屬性斷言 表示這個(gè)屬性在ts里面一定會(huì)有的
@Prop({ type: Number, required:true }) private age!: number;
@Prop({ type: String }) private name!: string;
@Prop({ type: Number }) private sex!: number;
prop:{
age:{
type:Number,
required:true
}
}
10.1.8 emit
@Emit("changeCPCtocpc")
clickHandle(): string {
//這里return得會(huì)作為參數(shù)傳遞給父組件
return "cpc-vue1";
}
clickHandleJs(): void {
this.$emit('changeCPCtocpc','cpc-vue1')
}
10.1.9 model
@Model("changeCPCtocpc", { type: String }) private vmodel!: any;
model:{
event:"changeCPCtocpc",
prop: vmodel
}
