This is the 15th day of my participation in the August Text Challenge.More challenges in August

🎉 preface

  • Although we’ve learned that beforeTypeScriptBut it is still used for businessJavaScriptTo develop leads gradually toTypeScriptOut of practice.
  • Take this opportunity to study together againTypeScriptKnowledge bar.
  • In the previous article weTypeScriptThe basic knowledge of a time, is not found that it is not very difficult.
  • This article isTypeScriptAdvanced article of the fifth, should also be the entry into the last article, about the foundation can see the article I shared before oh ~
  • This article about1400 +Words, reading may take six minutes ~ 🥂

🌱 declaration statement

  • We are inJavaScriptSound globals might be onevarTo declare, while inTypeScriptWe will use it indeclare.declareThat translates to a statement.
    • declare varDeclare global variables
    • declare functionDeclare global methods
    • declare classDeclaring a global class
    • declare enumDeclare a global enumeration type
    • declare namespaceDeclaring a namespace

🍃 Declare global variables

declare var id:string;
declare let book:string;
declare const people:string;
Copy the code
  • withJavaScriptIt’s just like adding one more in frontdeclareIn fact,declare varwithdeclare letIt doesn’t make any difference. What’s remarkabledeclare constI’m defining a constant, and I’m not allowed to change that, but in fact, we’re always going to define constants globally so I’m going to usedeclare constMore.
  • If a variable is declared globally in one place, it cannot be redeclared elsewhere.

  • You can see that we’ve stated it elsewherepeople, then it will report an error.

🌸 declare global methods

declare function addIce(x:number):string
Copy the code
  • We can declare a global method like this, but it’s worth noting that we use declarationsdeclareYou can’t implement it, you can only declare it, as shown below.

🌷 declare the global class

declare class People{
  name: string;
  constructor(name: string);
  sleep(): string;
}
Copy the code
  • We can declare a global class like this, and again we use declarationsdeclareCannot implement its method, as shown in the figure below.

🌼 Declares a global enumeration type

declare enum fruit {
  apple,
  banana,
  mango
}
let sthFruit=[fruit.apple,fruit.banana,fruit.mango]
Copy the code
  • We can declare a global enumerated type like this.

🌻 Declare the namespace

  • namespaceAs the name implies, we can give a separate space.
Declare namespace doSthing {function sleep(x:string):string} dothing. sleep(' I am sleeping ')Copy the code

🌺 Declaration file

  • We usually put these declaration statements in a declaration file, declaration file to.d.tsFor the suffix
declare var book:string
declare const id:number=1314520
declare function addIce(x:number):string
declare class People{
  name: string;
  constructor(name: string);
  sleep(): string;
}
Copy the code
  • We can do it attsFile directly used.

  • For more information about the declaration file in this article, the link is sent out for you to learn by yourself

🌈 Declaration merge

  • inTypeScriptWe use declaration merge to merge two independent declarations with the same name into a single declaration

🐣 merge function

  • We shared earlier that when we name the same function, it overloads.
function add(x: number): number; function add(x: string): string; function add(x: number | string): Number | string | void {the if (typeof x = = = 'number') 23} {return else if (typeof x = = = 'string') {return '23'}}Copy the code
  • Above we defined the first two function types, and the last one is defined and implementedaddThe function,addYou can receivenumberThe type andstringTypes are processed differently.

🐛 Merge interface

interface People { name: string; sex: string; } interface People { age: number; } let xm: People = {name: 'xiaoming ', sex:' male ', age: 23};Copy the code
  • Above we simply merged an interface, leaving the finalxmNeed to conform to ownname sex ageProperty shape.

👋 is at the end

  • This article is also for the recordTypeScriptThe study of usTypeScriptThis is the end of the tutorial, you can review the learning together.
  • Once you get through the door, basicallyTypeScriptIt’s enough for business, and you can look at some of them nextTypeScriptPackage tool type ah good source code to in-depth study.
  • Actually, if you’re not used to it at firstTypeScriptAnd do not blindly follow,JavaScriptIt’s still powerful, especially in the old daysvue2.xUsed in projectsJavaScriptIt’s okay to use it. It’s not necessaryTypeScriptJust watch and do your best.TypeScriptAt least get a sense of it, get in the door before somebody else writes code that doesn’t understand it.
  • Okay, aboutTypeScriptI will share the introduction here, if you think this article is helpful to your words might as well🍉 follow + like + Favorite + comment + forward 🍉Support yo ~~😛

🌅 past wonderful

Getting started with TypeScript 🎯– Installation and basic data types

Getting started with TypeScript (2)🎯– Associating types and interfaces

🎯– Array types and function types

TypeScript basics 🎯– Type assertion

✈️– Type aliases, string literals, and tuples

Getting started with TypeScript ✈️– Classes

Getting started with TypeScript ✈️– Classes and interfaces

Getting started with TypeScript ✈️– Generics