建站
咨詢
售后
建站咨詢
新聞中心
typescript這個(gè)東西說(shuō)實(shí)在的，真的是容易忘記，一段時(shí)間不用就感覺(jué)特別陌生，但是回過(guò)頭來(lái)看看，又有一種熟悉的感覺(jué),有句話這么說(shuō)的ts越用越香,它確實(shí)能夠規(guī)范我們的書寫的格式，語(yǔ)法校驗(yàn)和類型校驗(yàn)等。之前寫過(guò)react+ts的一個(gè)demo，但是時(shí)間久了就忘記了，現(xiàn)在也是趁著熱度再回顧一下ts的內(nèi)容，以及一些高階語(yǔ)法，現(xiàn)在我們回顧一下ts中常見(jiàn)的類和接口，如果喜歡的可以點(diǎn)贊,評(píng)論,關(guān)注公眾號(hào)讓更多的人看到。如果有問(wèn)題也可以評(píng)論留言，我們一起相互學(xué)習(xí)，一起進(jìn)步。
泊頭網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、響應(yīng)式網(wǎng)站開(kāi)發(fā)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。成都創(chuàng)新互聯(lián)公司公司2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。
class
首頁(yè)我們要清楚的一點(diǎn)是typescript中類和javascript中ES6語(yǔ)法類的區(qū)別,千萬(wàn)不要混淆。ts中相比于js添加了聲明屬性的類型和參數(shù)的類型以及返回結(jié)果類型。這個(gè)地方一看就會(huì)一寫就不對(duì)，如果不聲明ts會(huì)報(bào)錯(cuò)。
- 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的時(shí)候默認(rèn)是es3編譯，vscode編輯器會(huì)報(bào)錯(cuò)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;
- }());
這里有幾個(gè)思考問(wèn)題,答案見(jiàn)文末:
- 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,只能被繼承,抽象類一般是用來(lái)封裝一些公共的，提供給子類使用的方法和屬性的
- 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' }
這里順便說(shuō)一下訪問(wèn)修飾符 public protected private
public 里里外外都能訪問(wèn),包括自己、自己的子類、其他類都能
protected 自己和子類能訪問(wèn)但是其他地方不能訪問(wèn)
private 私有的(只有自己能訪問(wèn),子類的其他都不能訪問(wèn)）
接口表示對(duì)象的屬性
- 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() { }
- }
接口用來(lái)描述抽象的行為
- interface AnimalLink {
- eat(): void;
- move(): void
- }
接口可以實(shí)現(xiàn)繼承
- interface PersonLike extends AnimalLink {
- speak(): void
- }
- class Person2 implements PersonLike {
- speak() { };
- eat() { };
- move() { }
- }
通過(guò)接口約束變量類型
- interface Person3 {
- readonly id: number;
- name: string;
- [PropName: string]: any
- }
- let p1: Person3 = {
- id: 1,
- name: "sss"
- }
通過(guò)接口約束(規(guī)范)函數(shù)
- interface DiscountInterface{
- (price:number):number
- }
- let discount:DiscountInterface = function (price: number): number {
- return price * .8
- }
通過(guò)索引約束數(shù)組和對(duì)象
- interface UserInterface{
- [index:number]:string
- }
- let arr:UserInterface = ['aa','bb']
- interface UserInterface2{
- [index:string]:string
- }
- let obj:UserInterface2 = {name:"sss"}
通過(guò)接口約束構(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://m.5511xx.com/article/dheiiid.html
