Typeescript is a superset of js, and TypeScript extends it JavaScript So any existing JavaScript program can work under TypeScript unchanged. TypeScript is designed for the development of large applications, and it generates JavaScript at compile time to ensure compatibility. This language adds class-based object-oriented programming to help us better understand what object-oriented programming is!
This article simply explains the extension method of ts, without expansors, clipping functions, etc. The grammatical basis that es6 already supports.
Type annotations and classes
class Person { //protected name; protected Can be invoked internally and subclasses //public name; public It can be invoked both internally and externally.,Default is public //private name; private Class internal access only constructor(public name:string){ //constructor Is a constructor, only by new When called, it is called only once. // public name:string This is to make an agreement. new This instance must be passed in name Can only;Not write public as Employee Chinese writing is also acceptable. //Write or not in constructors public There are two concepts. public Below this.name Only then can it be worthwhile. } eat(){ console.log(this.name); } }
* name:string is a type annotation, which can be written or not. For the basic type, the annotations are number, bool and string. The structure of weak or dynamic type is any type. If there is no type annotation, the default is any type.
Inheritance
// extends For inheritance, the following statement Employee Inherited Person class // super To call the method of the parent class class Employee extends Person{ //super The constructor of the parent class constructor(name:string,code:string){ super(name);//The constructor of the parent class must be invoked without error correction console.log("xixi"); this.code=code; } code:string; work(){ super.eat(); this.doWork(); } private doWork(){ console.log('im working'); } }
* Note that if there is a constructor declaration in a subclass, the constructor of the parent class must be invoked, and if not, an error will be reported.
The call can be adjusted with this super. As above code super(name);
Why must calls be misaligned to report errors? Personally, subclasses inherit the attributes and methods of the parent class. Constructors refer to the fact that the instance of new must comply with this Convention before it can be used. So, subclasses inherit the parent class. So when making a convention, they must also follow the Convention of the parent class. So we must call the constructor of this parent class. I don't know how I explain you like this. You can see No.
Summarize super: There are two ways to call, one is to call the constructor of the parent class, the other is to call the method of the parent class, such as super.eat();
var e1 = new Employee("name","1"); e1.eat(); //output name
In this code, a new subclass Employee passes in two values (because the constructor agrees that two values must be passed and no error is reported) and the parent eat function can be called directly.
Generics
var workers:Array<Person> = []; //Generics, specifying that an array can only contain elements of one type, but not others workers[0] = new Person("zhangsan"); workers[1] = new Employee("lala","3"); workers[2] = 2; //Report errors
If the above code specifies that workers are Person-type arrays, then workers can only put person-type, then partners will ask, why can Employee-type also be placed? Because the Employee type inherits the properties and methods of the person type, Employee is a subclass of the person, so Employee can also be placed.
Interface
interface IPerson{ name:string; age:number; } class Person2{ constructor(public config:IPerson){//When an interface is used as a constructive declaration of a class, the newperson When invoked, the properties of the interface are checked for compliance. } } var p10 = new Person2({ name:"zhangsan", age:18, })
Interface is an interface that declares an Iperson, meaning that the constructor in person2 says that you must follow this interface! That is to say, when I am new, I must follow IPerson's name, whether it's type, number or key. Otherwise, you will make a mistake.
The second interface declares a function.
interface Animal { eat(); } class Sheep implements Animal{//implements Keyword implements the interface on behalf of this class, which must define methods in the interface eat(){ console.log("i eat grass"); } } class Tiger implements Animal{ eat(){ console.log("i eat meat"); } }
The interface declares that there is an eat function in Animal, so the implements keyword represents the class to implement the interface. This class must define the method in the interface, that is to say, which class uses this interface must declare this eat function to me, otherwise it will not be able to comply with it.
It is also self-willed, that is, to force everyone to comply with this agreement to develop.
5. Destructive Expressions
function getName(){ return { id:"13", borth:"1994", aaa:{ a1:"lala", a2:"fafa" } } } var {id:ids,aaa:{a2},aaa:{a1:as}}=getName(); console.log(ids);//13 console.log(a2);//fafa console.log(as);//lala
This is the destructive expression! In this way, we can get the corresponding value directly, if we want to declare another name: xx.
Another question is whether the ts file will search for duplicate classes. If the two files use the same class name, they will be wrong.
If there is something wrong, please correct the gods, exchange growth experience with each other, thank you, bloggers are not afraid to criticize and learn from each other.