建站
咨詢
售后
建站咨詢
新聞中心
typescript這個東西說實(shí)在的，真的是容易忘記，一段時間不用就感覺特別陌生，但是回過頭來看看，又有一種熟悉的感覺,有句話這么說的ts越用越香,它確實(shí)能夠規(guī)范我們的書寫的格式，語法校驗和類型校驗等。之前寫過react+ts的一個demo，但是時間久了就忘記了，現(xiàn)在也是趁著熱度再回顧一下ts的內(nèi)容，以及一些高階語法，現(xiàn)在我們回顧一下ts中常見的類和接口，如果喜歡的可以點(diǎn)贊,評論,關(guān)注公眾號讓更多的人看到。如果有問題也可以評論留言，我們一起相互學(xué)習(xí)，一起進(jìn)步。
泊頭網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站開發(fā)等網(wǎng)站項目制作，到程序開發(fā)，運(yùn)營維護(hù)。成都創(chuàng)新互聯(lián)公司公司2013年成立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運(yùn)維經(jīng)驗，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。
class
首頁我們要清楚的一點(diǎn)是typescript中類和javascript中ES6語法類的區(qū)別,千萬不要混淆。ts中相比于js添加了聲明屬性的類型和參數(shù)的類型以及返回結(jié)果類型。這個地方一看就會一寫就不對，如果不聲明ts會報錯。
- class Person{
- name:string;
- constructor(name:string){
- this.name = name;
- }
- getName():void{
- console.log(this.name);
- }
- }
- class Person{
- constructor(name){
- this.name = name;
- }
- getName(){
- console.log(this.name);
- }
- }
ES5編輯后的結(jié)果
- var Person = /** @class */ (function () {
- function Person(name) {
- this.name = name;
- }
- Person.prototype.getName = function () {
- console.log(this.name);
- };
- return Person;
- }());
類的get和set
ts在編譯get和set的時候默認(rèn)是es3編譯，vscode編輯器會報錯error TS1056: Accessors are only available when targeting ECMAScript 5 and higher需要編譯到版本ES5或以上,解決辦法:$ tsc xxx.ts -t es5。
- class User{
- myname:string;
- constructor(myname:string){
- this.myname = myname
- }
- get name(){
- return this.myname
- }
- set name(newName:string){
- this.myname = newName
- }
- }
ES5編譯后的結(jié)果
- var User = /** @class */ (function () {
- function User(myname) {
- this.myname = myname;
- }
- Object.defineProperty(User.prototype, "name", {
- get: function () {
- return this.myname;
- },
- set: function (newName) {
- this.myname = newName;
- },
- enumerable: false,
- configurable: true
- });
- return User;
- }());
這里有幾個思考問題,答案見文末:
- var u = new User("a");
- console.log(u);
- console.log(u.myname);
- u.myname = 'b';
- console.log(u.myname);
- console.log(u.hasOwnProperty("name"));
- console.log(Object.getPrototypeOf(u));
- console.log(Object.getPrototypeOf(u).hasOwnProperty("name"));
抽象類
abstract關(guān)鍵字表示抽象類，抽象類是不能被實(shí)例化即new,只能被繼承,抽象類一般是用來封裝一些公共的，提供給子類使用的方法和屬性的
- abstract class Animal{
- public readonly name:string;
- protected age:number = 38;
- private money:number = 10;
- constructor(name:string){
- this.name = name
- }
- }
- class Dog extends Animal{
- static className = 'Dog'
- static getClassName(){
- console.log(this.className)
- }
- getName(){
- console.log(this.name)
- }
- getAge(){
- console.log(this.age)
- }
- }
- let a = new Animal("ss");
這里打印看一下繼承的結(jié)果:
- console.log(a); //Dog { age: 38, money: 10, name: 'ss' }
這里順便說一下訪問修飾符 public protected private
public 里里外外都能訪問,包括自己、自己的子類、其他類都能
protected 自己和子類能訪問但是其他地方不能訪問
private 私有的(只有自己能訪問,子類的其他都不能訪問）
接口表示對象的屬性
- interface Rectangle {
- width: number;
- height: number
- }
- let r: Rectangle = {
- width: 100, height: 10
- }
- interface Speakable {
- speak(): void;
- name?: string
- }
- let speaker: Speakable = {
- //name:"bdt",
- speak() { }
- }
接口用來描述抽象的行為
- interface AnimalLink {
- eat(): void;
- move(): void
- }
接口可以實(shí)現(xiàn)繼承
- interface PersonLike extends AnimalLink {
- speak(): void
- }
- class Person2 implements PersonLike {
- speak() { };
- eat() { };
- move() { }
- }
通過接口約束變量類型
- interface Person3 {
- readonly id: number;
- name: string;
- [PropName: string]: any
- }
- let p1: Person3 = {
- id: 1,
- name: "sss"
- }
通過接口約束(規(guī)范)函數(shù)
- interface DiscountInterface{
- (price:number):number
- }
- let discount:DiscountInterface = function (price: number): number {
- return price * .8
- }
通過索引約束數(shù)組和對象
- interface UserInterface{
- [index:number]:string
- }
- let arr:UserInterface = ['aa','bb']
- interface UserInterface2{
- [index:string]:string
- }
- let obj:UserInterface2 = {name:"sss"}
通過接口約束構(gòu)造函數(shù)
- class Animal3{
- constructor(public name:string){}
- }
- interface WithClassName{
- new (name:string):Animal3
- }
- function createClass(clazz:WithClassName,name:string){
- return new clazz(name)
- }
- let a3 = createClass(Animal3,"別抖腿");
- console.log(a3)
class和interface的區(qū)別
class 類聲明并實(shí)現(xiàn)方法
interface 接口聲明，但是不能實(shí)現(xiàn)方法
- abstract class Animal{
- name:string="111";
- abstract speak():void; //抽象類和方法不包含具體實(shí)現(xiàn) 必須在子類中實(shí)現(xiàn)
- }
- //接口里的方法都是抽象的
- interface Flying{
- fly():void
- }
- interface Eating{
- eat():void
- }
- class Dog extends Animal{
- speak(){
- console.log("汪汪汪") //重寫:子類重寫繼承自父類中的方法
- }
- }
- class Cat extends Animal implements Flying,Eating{
- speak(){ //繼承抽象類的方法必須實(shí)現(xiàn)
- console.log("喵喵喵")
- }
- fly(){
- console.log("我是一只飛貨")
- }
- eat(){
- console.log("我是一只吃貨")
- }
- }
寫在最后
文中答案
- User { myname: 'a' }
- a
- b
- false
- User { name: [Getter/Setter] }
- true
網(wǎng)站名稱：typescript中的class和interface
文章起源：http://www.dlmjj.cn/article/dheiiid.html
