Introduction to TS course materials

1. TS introduction
2. Install the typescript package
3. TS hello World, type checking
4. Introduction to learning Materials

TypeScript is a strongly typed version of JavaScript. Then, at compile time, the types and specific syntax are stripped away, producing pure JavaScript code.

TypeScript is a superset of JavaScript, which means it supports all JavaScript syntax.

The strength of strongly typed languages lies in static type checking.

TypeScript is a language developed by Microsoft.

Vue3.0 is developed using TS.

Github open source project: github.com/Microsoft/T…

Born in October 2012.

Vscode is written in ts: github.com/Microsoft/v…

Syntax format:

function greeter(name:string) {
  return `hello, world!${name}`
}

console.log(greeter('xu'))
document.body.innerHTML = greeter('xu')
Copy the code

Sometimes you’ll find that you know more about a value than TypeScript does. Usually this happens when you clearly know that an entity has a more exact type than its existing type.

Type assertions are a way of telling the compiler, “Trust me, I know what I’m doing.” Type assertion is like conversion in other languages, but without special data checking and deconstruction. It has no run-time impact, only at compile time. TypeScript assumes that you, the programmer, have done the necessary checks.

Type Assertion can be used to manually specify the Type of a value

Grammar:

< type > valueCopy the code

or

valueastypeCopy the code

Example:

(window as any).username = 'admin'
console.log((this as any).username)
Copy the code

Basic types: zhongsp. Gitbook. IO/typescript -… The meaning of type check: www.jianshu.com/p/d2d15111f…

1. Practice type checking in TS 2. Use type assertions 3. Preview variable declarations

1. What is an interface
2. Take a chestnut
3. Optional attribute
4. Read-only property
5. Function types

An interface simply specifies something. In the back, an interface refers to the API specified by both parties. In TS, an interface generally refers to what the variable owns. One of TypeScript’s core tenets is type-checking of the structure a value has. It is sometimes called “duck type discrimination” or “structural typing”. In TypeScript, interfaces name these types and define contracts for your code or third-party code. An interface is usually used to define a set of specifications. For example, usb interface is a specification for computer peripherals. No matter mouse, keyboard or USB disk, any peripherals that meet this specification can be inserted into this interface. Using a USB port reduces the coupling between peripherals such as a mouse and keyboard and a laptop.

Not all attributes in the interface are required. Some exist only under certain conditions, or not at all.

// Add a question mark to make it optional
interface Person {
  name: string, age? : number }// The Person interface is used just like a normal type
function greeter(person: Person) {
  return `hello world!${person.name}`
}

// The xu object may not contain the age attribute
let xu:Person = {
  name: 'xu'
}

document.body.innerHTML = greeter(xu)
Copy the code

Interfaces can describe the various shapes that objects in JavaScript can have. In addition to describing ordinary objects with attributes, interfaces can also describe function types. To use the interface to represent function types, we need to define a call signature for the interface. It is like a function definition with only the argument list and return value types. Each parameter in the parameter list needs a name and type. Since functions are also objects, we can also “specify” functions through interfaces.

// Function type
interface Greeter {
  (name:string): string
}

let greeter: Greeter

// The Person interface is used just like a normal type
greeter = function (name:string) {
  return `hello world!${name}`
}

document.body.innerHTML = greeter('xu')
Copy the code

// Define a class
class Greeter {
  // Define class attributes
  name: string

  // constructor
  constructor(name: string) {
    this.name = name
  }

  // Define the method of the class
  greet() {
    // Use this when accessing the program inside
    document.body.innerHTML = `hello world!The ${this.name}`}}// Construct an instance of the Greeter class using new. It calls the previously defined constructor, creates a new object of Greeter type, and initializes it by executing the constructor.
let greeter = new Greeter('xu')

// This object has the behavior of greeting
greeter.greet()
Copy the code

// Define a class
class Person {
  name: string
  constructor(name: string) {
    this.name = name
  }
  say() {
    console.log(`The ${this.name}:hello! Everybody is good! `)}}The Teacher class inherits the Person class with the name attribute and the say method
class Teacher extends Person {
  // Add your own course property
  course: string
  constructor(name:string, course:string) {
    super(name)
    this.course = course
  }
  // Add your own teach method
  teach() {
    // Call the inherited method
    this.say()
    // Access inherited properties
    console.log(`The ${this.name}: The course I'm going to talk about isThe ${this.course}! `)}}let teacher = new Teacher('Xu Tongbao'.'Vue')
teacher.teach()
Copy the code

Study the meaning of class 2. Write class code 3. Study the meaning of inheritance 4

1. concept
2. public
3. private
4. protected
5. Why do I have to learn this

There are three types of Access Modifiers available in TypeScript: public, private, and protected. By default, all properties and methods are public. Private properties or methods are private. Properties or methods that are protected cannot be accessed outside the class in which they are declared are protected. It is similar to private, except that it is also accessible in subclasses. Protected properties and access cannot be invoked on class instances

// Define a class
class Person {
  private name: string
  constructor(name: string) {
    this.name = name
  }
  private say() {
    console.log(`The ${this.name}:hello! Everybody is good! `)}}let person = new Person('xu')
// An error occurs when accessing private attributes
console.log(person.name)
// An error occurs when accessing a private method
person.say()
Copy the code

Note: Derived classes also do not have access to the parent's private properties and methods!Copy the code

Encapsulation is hidden object’s properties and implementation details, only made public interface, control the attributes of the program to read and modify the access level, the abstract data and behavior (or function), the combination of form an organic whole, namely the data and operation data of the source code for organic union, form a “class”, including data and function is a member of the class.

The purpose of encapsulation is to enhance security and simplify programming, so that consumers do not have to know the implementation details, but simply use the members of a class with specific access rights through an external interface. For example, the recorder is encapsulated chestnut, the internal structure is private, the user can not access, the play key, the fast forward key is common, the user can access.

Inheritance is the ability to take all the functionality of an existing class and extend it without having to rewrite the original class.

Without Protect, the properties and methods of the parent class would be public and private, and would be helpless if they were inherited but not exposed.

// The architect defines an interface that tells the programmer to develop a class according to the specification
interface PersonI {
  name: string,
  say():void
}

// A programmer spent three days developing a Teacher class, which is quite complex
class Teacher implements PersonI {
  name: string
  constructor(name: string) {
    this.name = name
  }
  say() {
    console.log(`hello! Everybody is good! I am aThe ${this.name}Teacher, today let's talk about TS! `)}}// Another programmer spent five days developing a Student class with more complex functionality
class Student implements PersonI {
  name: string
  constructor(name: string) {
    this.name = name
  }
  say() {
    console.log('Good teacher! I am aThe ${this.name}I wrote a code error, you help me look at it! `)}}// The Teacher and Student classes are part of the larger online education program
// Since both classes follow the same interface, they are easy to use
let teacher = new Teacher('xu')
teacher.say()

let student = new Student('Han Meimei')
student.say()
Copy the code

Interface inheritance interface has practical implications: https://www.zhihu.com/question/48503724 inherited interface:  https://zhongsp.gitbook.io/typescript-handbook/handbook/interfaces#ji-cheng-jie-kouCopy the code

1. Define class interface 2. Write the code of interface inheritance interface 3. Preview abstract classes

1. The difference between abstract classes and interfaces
2. Abstract class instance
3. polymorphism
4. Introduction to learning Materials

Abstract class abstract methods must be decorated with the abstract keyword. If a class contains abstract methods, the class is called abstract, and the abstract class must be preceded by the abstract keyword. Abstract classes exist for inheritance. If a class inherits from an abstract class, the subclass must implement the parent class’s abstract methods. If a subclass does not implement the abstract methods of its parent class, it must also be defined as an abstract class.

The difference between abstract class and interface: abstract class can have method implementation, but the interface is completely abstract, there is no method implementation; Subclasses can inherit only one abstract class, and interfaces can be implemented by multiple implementations; Abstract methods can be public, protected, but interfaces can only be public, default; Abstract classes can have constructors, but interfaces cannot. Abstract classes are inherited as parent classes. The constructor of a derived class of an abstract class must call super(). Interfaces can be subclassed from other classes.

Neither an abstract class nor an interface can be instantiated. A class-type interface is actually an abstract type.

In my opinion, when using an interface of a class type, the interface of a class type is actually a subset of an abstract class. In addition to being defined and not implemented, as interfaces are, abstract classes can be partially implemented, and they can also use type modifiers.

An interface for a class type is used more as an abstract data type, usually an instance type of a class. An interface cannot contain a concrete implementation, and an abstract class can contain any function other than an abstract function. Abstract methods in abstract classes must be implemented in subclasses, and non-options in interfaces must be implemented when the interface is called. Abstract methods can be treated as instance methods of a class, adding access modifiers; But interfaces do not. An abstract class can have no abstract methods in it. However, classes with abstract methods must be declared as abstract classes.

A few considerations for abstract classes:

1. Abstract classes use the abstract modifier

2. Abstract methods can only be in abstract classes

3. Abstract classes cannot be instantiated

4. Abstract methods have no method body

5. Abstract classes cannot be static or sealed

6. A subclass must override all the abstract methods of its parent unless the subclass is also abstract

7. Abstract classes can have ordinary methods

8. An abstract class can have constructors

9. Abstract methods in abstract classes are intended to constrain the method form of subclasses.

Interviewer: What is polymorphism? Pig teammate: various forms, gas, liquid, solid ~ interviewer: go out! now!

In simplest terms, a reference to a parent type refers to an object of a child type. To use a more common phrase: the same operation on different objects can produce different effects. That’s polymorphism. Multiple forms, in which different objects respond differently to the same operation. Polymorphism is the ability to have many different manifestations or forms of the same behavior. Polymorphism is the same interface, using different instances to perform different operations. The final manifestation of polymorphism is that a parent reference variable can point to a subclass object. The premise of polymorphism is that there must be a child parent class relationship or class implementation interface relationship, otherwise the polymorphism cannot be completed. When a method is called using a polymorphic parent reference variable, the method overridden by the subclass is called. Polymorphic: The same operation on different objects can be interpreted differently, resulting in different execution results. At run time, methods that implement derived classes can be called with Pointers to the base class.

The parent class type variable name = new subclass type (); Variable name. Method name ();

let teacher: Person = new Teacher('Xu Tongbao')
teacher.job()
Copy the code

Person Person = new Student; But what does this polymorphism do? And why are we so polymorphic?

First, encapsulation and inheritance: Encapsulation is surrounded by the process and data access to data only through defined interfaces, he hide implementation details of a picture, such as you to achieve a class in Java, this class provides some function method, you just need to know what you need to pass parameters, can achieve what kind of effect, implementation details defined in the class. This makes code modular; Inheritance extends existing code modules with the goal of code reuse.

So polymorphisms can be decoupled in addition to code reuse. But why decouple? Coupling is module between modules, the correlation between code, through the analysis of the system is decomposed into him a a child module, module provides stable interface, achieve the purpose of reduce coupling system, try to use module interface between module module access, rather than random reference other module member variables.

What are the benefits of polymorphism?

There are two benefits:

1. Instead of writing function calls for every derived class, the application just needs to process the abstract base class. Greatly improve program reusability. / / inheritance
2. Functions of derived classes can be called by methods or reference variables of the base class. This is called backward compatibility, which improves scalability and maintainability. // The true function of polymorphism,

interface IEcho<T> {
  (arg: T): T
}

function echo<T> (arg: T) {
  return arg
}

let myEcho: IEcho<number> = echo
let myEcho2: IEcho<string> = echo

console.log(myEcho(1))
console.log(myEcho2('a'))
Copy the code

Liao Xuefeng what is generic: www.liaoxuefeng.com/wiki/125259…

For an in-depth understanding of Java generics: www.sohu.com/a/245549100…

1. Define generic classes 2. Learn how generics are used 3. Preview decorators

1. The meaning of decorators
2. Class decorator
3. Vue-property-decorator decorator pseudocode
4. Introduction to learning Materials

The Decorator proposal has been extensively revised and is not yet finalized, so I wonder if the syntax will change again.

A Decorator is a class-related syntax for annotating or modifying classes and class methods. Many object-oriented languages have this capability, and there is currently a proposal to introduce it into ECMAScript.

A decorator is a function named @ +. It can precede the definition of classes and class methods.

They not only increase the readability of the code and express the intent clearly, but also provide a convenient means to add or modify the functionality of the class.

Decorator is a new syntax in ES7, currently in phase 2 proposal. As it is called “Decorator,” it can wrap objects by adding the @ method name and then return a wrapped object. Decorators include classes, properties, methods, etc.

The addition of definitions and operations on class objects (such as class and extends) in ES6 makes it less elegant to share or extend methods or behaviors across multiple classes. That’s when we need a more elegant way to get things done.

Note that the decorator changes the behavior of the class at compile time, not run time. This means that the decorator can run the code at compile time. That is, decorators are essentially functions that are executed at compile time.

Write the pseudo-code for the decorator provided by the VUe-property-decorator package: Componetn, Prop, Emit

// Class decorator that takes an object parameter, which can contain a component property
// The value of the components property expresses the component to be used
const Component = (obj: IComponent) = > (target: any) = > {
  Object.assign(target.prototype, obj)
}

// A decorator for a class property that can be set to default values
const Prop = (obj: IProp) = > (target: any, key: string) = > {
  target[key] = obj.default
}

// Class method decorator. When a class method fires, it calls the method passed by the parent component with the return value of the class method
const Emit = (method: string) = > (target: any, key: string, descriptor: any) = > {
  let oldValue = descriptor.value

  descriptor.value = function() {
    
    let result = oldValue.apply(this.arguments)
    console.log('trigger the method passed by the parent component:${method}(The ${JSON.stringify(result)}) `) } } interface IComponent { components? : object } interface IProp {default: any
}

@Component({
  components: {
    Header: 'components'}})class Home {
  @Prop({ default: 'zhanwei'}) name! : string @Emit('onClick')
  handleClick(id: number) {
    console.log('Click event'.this.name)
    return { id }
  }
}

let home = new Home()

//@ts-ignore
console.log(home.components)

console.log(home.name)

home.handleClick(1)
Copy the code

Vue-class-component is a typescript support library for VUE from Rain Creek. Vue-class-component is the official vUE library that writes components as classes. Vue-class-component highlights several uses: Methods can be declared directly as a class member method. Computed properties can be declared as a class attribute accessor. Data data can be declared as a class attribute. Avoid using these reserved names when declaring custom methods.

Vue-class-component official website (without Chinese version) : class-component.vuejs.org/

Basic usage: www.jianshu.com/p/2f65e9dea…

1. Build the project through scaffolding 2. Make addition, subtraction and 3

1. Vue – property – the decorator is what
2. Vue-property-decorator passes values to parent components
3. Introduction to learning Materials

Vue-property-decorator community; Vue-class-component official product. Vue-property-decorator relies heavily on vue-class-Component to extend operators such as @prop, @emit, etc. Vue-property-decorator is written by kaorun343 (Japan).

Decorator decorator decorator decorator decorator decorator decorator decorator decorator decorator decorator

1. Use vue-property-decorator to pass parent-child component values 2. 3. Preview vuex-class

1. Vuex – what is the class
2. Vuex-class Synchronizes the modification repository
3. Vuex-class Asynchronous modify repository
4. Introduction to learning Materials

Vuex-class wraps the way vuex is written, simplifying code. Vuex-class makes it easier to combine vuex with vuE-class-Component. The author of Vuex-Class is KTSN (Singapore).Copy the code

@Action
Copy the code

Get data:

<template>
  <div class="m-main m-home">
    <Sidebar></Sidebar>
    <List></List>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { Action } from 'vuex-class'
import Sidebar from '.. /components/Sidebar.vue'
import List from '.. /components/List.vue'

@Component({
  components: {
    Sidebar,
    List
  }
})
export default class Home extends Vue {
  @Action('list') list:any
  
  mounted() {
    this.list()
  }
}
</script>

<style>

</style>
Copy the code

Submit the action with the payload:

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import { State, Action } from 'vuex-class'

@Component
export default class MyBookItem extends Vue { @Prop() book! :any @State(state= >state.myBooks) myBooks! : any[] @Action('myBooksAction') myBooksAction! :Function

  handleAdd(id:number) {
    this.myBooksAction({ data: { id, operation: 'add' }, method: 'patch'})}handleSub(id:number) {  
    this.myBooksAction({ data: { id, operation: 'sub' }, method: 'patch'})}handleInput(id:number, e:any) {
    let myBooks = this.myBooks
    let count = e.target.value.replace(/[^\d]/g.' ') - 0
    if (count === 0) {
      count = 1
    }
    this.myBooksAction({ data: { id, operation: 'inputCount', count }, method: 'patch'})}handleChecked(id:number, e:any) {
    this.myBooksAction({ data: { id, operation: 'checked'.checked: e.target.checked }, method: 'patch'})}handleDelete(id:number) {
    this.myBooksAction({ data: { ids: [id] }, method: 'delete' })
  }    
}
</script>
Copy the code