Before writing projects in typescript, you need a basic knowledge of JS [ES6]. In the process of learning TS, the difference of JS is simulated and the basic combination is achieved. Development to remove js error parts, most will be subject to TS semantic restrictions.

Basic typescript content

1. Variable declaration

When declaring variables, it is the same as js but not the same. The variable declaration symbol is the same, but the type qualification is required. If you are a strongly typed language developer

// declaration of js
var name;
let age;
const eat;
function play(bool){}
Copy the code
// Ts statement
var name:string;
let age:number;
const eat:Function; // Function is a type. Function is used to declare Function variables
function run(bool:string) :void { 
    /* The type of the function to pass is the same as that of the function. The return value of the function must be qualified */ after the parameter list
}
Copy the code

When a type is declared, there is a generic type, any, which means that the variable can accept any type of value, and the parser ignores the case where the current parameter is null/undefined. Suggestion: Do not use any as the parameter type except in special cases. Otherwise, unnecessary errors may occur during later modification.

1.1 Other Circumstances

// Most of the time, we declare this to be the case
// We can't assign the push value.
var classes:[];
// In fact, the above one is equivalent to
var classes:Array<never>;
// Or equivalent
var classes:never[];
Copy the code

Modifier type unique to never ts, indicating that there is currently nothing. Unlike undefined/null, ts only has a declaration of never, not a value of never.

/ / when using
var a:never;
var b = a;
// a is syntactically indicated to use a before assignment. Therefore, a needs to be initialized before it can be used, but since there is no value called never, a is an invalid declaration type.

// Do we have to use it?
// Use arrays
var a:never[] = [];
var b:never = a[0];

// What if you declare never in an object?
var a = { b:never /*Error: "never" denotes the type only, but is used here as a value. * / }

Copy the code

Class An object-oriented class

  • Js alone is no different from TS and does not support multiple inheritance
class A {  }
class B extends A { }

// When a subclass uses a constructor, it needs to call the parent constructor effectively
class Animal { 
    name:string;
    constructor(name:string) {this.name = name; }}class Dog extends Animal {
    constructor(name:string) {super(name)
    } 
}
Copy the code
  • Js nointerface, but there is support for multiple implementation interfaces under TS
interface A {  }
interface B extends A { }
class C implements A,B { }
Copy the code

Can interfaces be used for type qualification? The answer is yes. For TS, a type qualification is only a match between an attribute’s type and name, and has nothing to do with the type or name


interface A { name: string; age: number }
interface B { name: string; age: number }
classC { name! :string; age! :number }
var a: A = new C;
var b: B = new C;
var c: C;
// When a non-null type is used, the value must be initialized before it can be used
// Otherwise an Error is reported: the variable "c" was used before the assignment.
a = b = c;
Copy the code

3. Declare the type immutable

Js supports var repeat declaration, ts has < conditional > support repeat declaration

/* Subsequent variable declarations must be of the same type. The variable "a" must be of type "string", but here it is of type "number" */
var a:string;
var a:number;

// A type is only associated with attributes, not names
interface A { name: string; age: number }
interface B { name: string; age: number }
classC { name! :string; age! :number }
var a: A;
var a: B;
var a: C;
Copy the code

4.! : 与 ? :

When we write code, we often encounter! 😕 These two combined symbols, how are they different from:?

! : must exist,? : indicates that there may not be either of these two syntactically called assignment assertions

Therefore:

 /* : you can use */ whenever you want
 var a:number;
 
 // Can not be used when declaring variables
 vara! :number;
 vara? :number;
 
 / /? : cannot be used for literal assignments
 vara = { name? :"Pluto" }
Copy the code

About assignment assertions: you usually see them in class

class a { sad! : string; // Affirmative assertion cannot assign initial value sad! : string ='so sad'; // When you negate an assertion, age? : number = 2;bg= { age! 16}} :Copy the code

The most common positive assertion in Vue is that prop and store have been introduced, because we are sure they already exist

@Component
export default class MyComponent extends Vue {
    @Prop({ default : ""}) myName ! : string; @State mystate ! : boolean; }Copy the code

The most common negative assertions in Vue are function arguments and type definitions

Interface A {name:string /* age is not mandatory, so can not use */ age? :number } var a:A = { name:"16" } function getSome(some? : string) {/ * usually function we use give it an initial value in the form of a function parameter rather than using this form * / return some | | ""} function getSome (some: string =" ") {return some}Copy the code

5. Assign the initial value attribute

Ts attributes defined by class do not exist after compilation if they are not initialized

class A { name! :string; } new A() .hasOwnProperty("name") / /false
Copy the code

More content online TS compilation results comparison

Previous chapter how to Write pages using VUE + typescript (VUE lifecycle Functions)