A while ago, I saw a lot of ts syntax on the vue3 and elementPlus official websites. In order to migrate to vue3, I learned the combined syntax of ts, pinia, and vue3 together. I can use it in future projects.
Ts watched the tutorials from Silicon Valley.
Episode 2: Declaration syntax, let a:number followed by basic types. (number, string, boolean,) or let c:boolean=true//Declare a variable and specify its type as number. If you open js and ts at the same time, an error will be reported. Just turn off one. Let c=false will automatically change c to bool type. If variable assignment and declaration are performed at the same time, ts will automatically detect the variable. More application scenarios of Ts are for functions. For example, if Function sum(a,b){return a+b} calls sum(123, "456") in js, do not add a: and b:, that is the prompt of webstorm. Solution: function sum(a:number,b:number){return a+b}. Any can be used or not.
The type of function return value function sum(a:number,b:number): number{return a}.
Episode 3: Types in ts (extended js types), you can use literals for type declaration, let a:10, a=11 will report an error. The general usage of literals: let b: "male" | "female" or let c: boolean | string;
any (any type). Setting the type of a variable to any is equivalent to turning off ts type detection for the variable. Not recommended when using ts. If no type is specified, the default is any.
Unknown (unknown type), let e: unknown, any type of value can be assigned to others, let s: string; let d; s=d; d=2.
Unknown is different, let e:unknown;e='hello',let s:string;s=e (an error will be reported), unknown is a type-safe any, variables of unknown type cannot be directly assigned to other variables. Solution: if(typeof e===”string”){ S=e;}. Type assertion: s=e as string or s=a void is used for the type return of the function (null value undefine). Never means the result will never be returned. For example, function fn2():never{ throw new Error('Error reported')} Episode 4: Type Object, such as let b:{name:string}, the object must only contain the name attribute and the value is of type string, optional parameters let b:{name:string,age?:number} any attribute let c{name:string,[propName:string]:any} requires the name attribute in the object, and any other attributes are fine. Define the function attribute let d:(a:number,b:number)=>number,d=function(n1:number,n2:number):number{return n1+n2} Array:let e:number [];e is A numeric array or let g:Array, any type let g:Array Turple: tuple, a fixed-length array. Let h:[string,string],h=['hello','abc']
Enum: enumeration, enum Gender{Male=0,Female=1},let i:{name:string,gender:Gender};i={name:'swk',gender:Gender.Male}console.log(i .gender===Gender.Male),
& operator, let j:{name:string}&{age:number}
type alias: let k:1|2|3|4|5;type myType=1|2 |3|4|5;let m:myType;
Episode 5: Use vscode to first execute tsc –init to make it a ts managed package, then you can use the tsc command. Tsconfig.json is the configuration file of the ts compiler. Include, ** any directory, * any file, include included files, exclude excluded files. Extend inherits configuration files. Files. Limits the files to be compiled. Use only when compiling a small number of files. compilerOptions: compiler options, target: "ES6", "ESNext" the latest es version. The Module module specifies the modular specification to be used, which defaults to ES6. Lib represents the library, which is used to specify the library to be used in the project. When the code is run in nodejs, dom and outDir are used to specify the directory where the compiled js is located. outFile combines code into a single file. In practice, packaging tools are rarely used.
Episode 6: allowJs:true whether to compile js files in the directory. checkJs:false checks whether the js code conforms to the grammar specification (whether it conforms to the ts grammar specification). These two are a set. removeComments:false whether to remove comments. noEmit:true does not generate compiled files. noEmitOnError: Do not generate compiled files when there is an error. alwaysStrict:false. Add "use strict" to the first line of the js file to enable strict mode. noImplicitAny: true disallows the use of implicit any classes. noImplicitThis: true, does not allow ambiguous types of this.strictNullChecks: true to strictly check the empty string: "strict": false The master switch for all strict checks.
I skipped using webpack to package it. When the time comes to use vite to package it, I can just check the information online.
Episode 13: class Person{ readonly name:string=“Monkey King” static age:number=18 sayHello(){ console.log(“hello”) } } const per=new Person() console.log(per) console Basic usage and static properties and read-only properties of the .log(Person.age) class. Static and read-only can be used together. Episode 14: Basic usage of class constructor: class Dog{ name:string age:number
constructor(name:string,age:number){ this.name=name this.age=age } bark(){ alert('bark woof woof') } } const dog=new Dog('小黑',4) const dog2 =new Dog('小白',8) Episode 15: Inheritance: (function(){ class Animal{ name:string age:number constructor(name:string,age:number){ this.name=name; this .age=age; } sayHello(){ console.log('The animal is barking') } } class Dog extends Animal{ sayHello(){ console.log('The dog is barking') } } class Cat extends Animal{
}
})
Episode 16: The usage of super keyword is no different from that of python and java. Just know the syntax. Inheritance syntax uses all methods and variables of the parent class by default, and then overwrites it with the resources of the subclass. super represents the parent class or parent class instance, but cannot be printed. It is mostly used for super to use the parent class constructor.
(function(){ class Animal{ name:string constructor(name:string){ this.name=name; } sayHello(){ console.log('The animal is barking') } } class Dog extends Animal{ age:number constructor (name:string,age:number){ super(name) this.age=age } sayHello(){ console.log(this.age+"year-old"+this.name+"barking") } } const dog=new Dog("dog",18) dog.sayHello() })()
Episode 17: Add abstract in front of an abstract class, which can only be used for inheritance and not for creating instances. The method name in an abstract class preceded by abstract is an abstract method, and subclasses must implement it.
Episode 18: Interfaces are used to define the structure of a class and declare the variables and methods it should contain. Interfaces can be defined repeatedly and will be added. Basic usage of the interface. All properties in the interface cannot have actual values. Interfaces are somewhat similar to abstract classes, but the difference is that the methods in interfaces are abstract methods, while abstract classes can have actual methods. Use implements to call.
These concepts are only available in ts.
Episode 19: Encapsulation of attributes, by adding methods to the class so that the attributes can be accessed externally.
class Person{ private _name:string private _age:number constructor(name:string,age:number){ this._name=name this._age=age } //Define method to get the name attribute getName(){ return this._name } setName (value:string){ this._name=value } setAge(age:number){ if(age>=0){ this._age=age } } }
const per=new Person('Sun Wukong',18)
attribute accessor
get name(){ return this._name } set name(name:string){ this._name=name } } const per=new Person('Sun Wukong' ,18) console.log(per.name) protected protected attributes can only be used in the current class and its subclasses. Episode 20: Generics, some very troublesome writing methods, let’s talk about them later when they are used.