自己搞一個ts文件
里面寫代碼如下,試一下就行了
/* 1、vscode配置自動編譯 1.第一步 tsc --inti 生成tsconfig.json 改 "outDir": "./js", 2、第二步 任務 - 運行任務 監視tsconfig.json 2、typeScript中的數據類型 typescript中為了使編寫的代碼更規范,更有利於維護,增加了類型校驗,在typescript中主要給我們提供了以下數據類型 布爾類型(boolean) 數字類型(number) 字符串類型(string) 數組類型(array) 元組類型(tuple) 枚舉類型(enum) 任意類型(any) null 和 undefined void類型 never類型 3、typeScript中的函數 3.1、函數的定義 3.2、可選參數 3.3、默認參數 3.4、剩余參數 3.5、函數重載 3.6、箭頭函數 es6 4、typeScript中的類 4.1 類的定義 4.2 繼承 4.3 類里面的修飾符 4.4 靜態屬性 靜態方法 4.5 抽象類 繼承 多態 */ //1、ts中類的定義 /* es5: function Person(name){ this.name=name; this.run=function(){ console.log(this.name) } } var p=new Person('張三'); p.run() */ /* ts中定義類: class Person{ name:string; //屬性 前面省略了public關鍵詞 constructor(n:string){ //構造函數 實例化類的時候觸發的方法 this.name=n; } run():void{ alert(this.name); } } var p=new Person('張三'); p.run() */ /* class Person{ name:string; constructor(name:string){ //構造函數 實例化類的時候觸發的方法 this.name=name; } getName():string{ return this.name; } setName(name:string):void{ this.name=name; } } var p=new Person('張三'); alert(p.getName()); p.setName('李四'); alert(p.getName()); */ //2、ts中實現繼承 extends、 super // class Person{ // name:string; // constructor(name:string){ // this.name=name; // } // run():string{ // return `${this.name}在運動` // } // } // // var p=new Person('王五'); // // alert(p.run()) // class Web extends Person{ // constructor(name:string){ // super(name); /*初始化父類的構造函數*/ // } // } // var w=new Web('李四'); // alert(w.run()); //ts中繼承的探討 父類的方法和子類的方法一致 // class Person{ // name:string; // constructor(name:string){ // this.name=name; // } // run():string{ // return `${this.name}在運動` // } // } // // var p=new Person('王五'); // // alert(p.run()) // class Web extends Person{ // constructor(name:string){ // super(name); /*初始化父類的構造函數*/ // } // run():string{ // return `${this.name}在運動-子類` // } // work(){ // alert(`${this.name}在工作`) // } // } // var w=new Web('李四'); // // alert(w.run()); // // w.work(); // alert(w.run()); // 3 類里面的修飾符 typescript里面定義屬性的時候給我們提供了 三種修飾符 /* public :公有 在當前類里面、 子類 、類外面都可以訪問 protected:保護類型 在當前類里面、子類里面可以訪問 ,在類外部沒法訪問 private :私有 在當前類里面可以訪問,子類、類外部都沒法訪問 屬性如果不加修飾符 默認就是 公有 (public) */ //public :公有 在類里面、 子類 、類外面都可以訪問 // class Person{ // public name:string; /*公有屬性*/ // constructor(name:string){ // this.name=name; // } // run():string{ // return `${this.name}在運動` // } // } // // var p=new Person('王五'); // // alert(p.run()) // class Web extends Person{ // constructor(name:string){ // super(name); /*初始化父類的構造函數*/ // } // run():string{ // return `${this.name}在運動-子類` // } // work(){ // alert(`${this.name}在工作`) // } // } // var w=new Web('李四'); // w.work(); //類外部訪問公有屬性 // class Person{ // public name:string; /*公有屬性*/ // constructor(name:string){ // this.name=name; // } // run():string{ // return `${this.name}在運動` // } // } // var p=new Person('哈哈哈'); // alert(p.name); //protected:保護類型 在類里面、子類里面可以訪問 ,在類外部沒法訪問 // class Person{ // protected name:string; /*公有屬性*/ // constructor(name:string){ // this.name=name; // } // run():string{ // return `${this.name}在運動` // } // } // var p=new Person('王五'); // alert(p.run()) // class Web extends Person{ // constructor(name:string){ // super(name); /*初始化父類的構造函數*/ // } // work(){ // alert(`${this.name}在工作`) // } // } // var w=new Web('李四11'); // w.work(); // alert( w.run()); //類外外部沒法訪問保護類型的屬性 // class Person{ // protected name:string; /*保護類型*/ // constructor(name:string){ // this.name=name; // } // run():string{ // return `${this.name}在運動` // } // } // var p=new Person('哈哈哈'); // alert(p.name); // private :私有 在類里面可以訪問,子類、類外部都沒法訪問 // class Person{ // private name:string; /*私有*/ // constructor(name:string){ // this.name=name; // } // run():string{ // return `${this.name}在運動` // } // } // class Web extends Person{ // constructor(name:string){ // super(name) // } // work(){ // console.log(`${this.name}在工作`) // } // } class Person{ private name:string; /*私有*/ constructor(name:string){ this.name=name; } run():string{ return `${this.name}在運動` } } var p=new Person('哈哈哈'); alert(p.run());
