This is the third day of my participation in Gwen Challenge

1. Object oriented

Process oriented is a very important idea in the program. The interview object is actually very simple. In short, all operations in the program need to be completed through the object.

Everything is done through objects, which is called object orientation.

A class can be understood as a model of an object, which can be declared with many methods,

(1) Define object methods

 // Add? , indicating that the attribute is optional
let o1: {name: string, age? :number};
    o1 = {name: 'zlm'}
ProName: string [proName: string]: any indicates a variable of any type
let o2: {name: string, [proName: string] :any}
    o2 = {name: 'zlm'.age: 18.gender: 'male'}   
Copy the code

(2) The method of defining functions

// Define the function
let f: (a:number, b: number) = > number;    
    f = function(n1:number, n2:number) :number {
        return n1 + n2;
    }
Copy the code

(3) Define enumeration

// Define enumeration
enum Gender {
    male = 0,
    female = 1
}
let o3 : {name: string.gender: Gender}
   o3 = {
       name: 'zlm'.gender: Gender.male
   }
Copy the code

(4) at the same time

let j: {name: string} and {age: number}

Copy the code

The above basically introduces all the complex types of TS. In the actual combat process, it may be more complicated than these, but all changes are the same.

2. Type annotations

The display tells the program that the STR variable is a string, which is called a type annotation

let str: string;
    str = 'zlm'
Copy the code

3. Type inference

You define a variable, and it doesn’t tell the program what type it is, but if you move the mouse over the variable, you’ll see that TS automatically tells you what type of variable it is, and that’s type inference, right

let countInterence = Awesome!;
Copy the code

4. Interface and type differences

Type aliases can be given directly to types, and interfaces must represent objects

// Alias of the type
type myType = 1|2|3|4|5;
let k: myType;
let l: myType
/ / can also
type Grad = string;
Copy the code
/ / interface
interface Grad {
    name: string;
    age: number;
    sex: boolean
}
const getStudent = (student: Grad) = > {
    student.age < 30 && student.sex === false && console.log('through')
    student.age >33 && student.sex === true && console.log('failure')}const student = {
    name: 'zlm'.age: 24.sex: false
}

getStudent(student);
Copy the code

The interface allows optional parameters and can add any value

interface Grad {
    name: string;
    age: number;
    sex: boolean; bust? :number;
    [proName: string] :any;
}
Copy the code

ProName: string] :any Indicates that the name of the attribute is a string and the value of the attribute can be of any type

Interfaces have methods as well as variables

interface Grad { name: string; age: number; sex: boolean; bust? : number; [proName: string]: any; hello():string; }Copy the code

5. Class attributes

Public: public. The default value is public

Private: Only calls are allowed inside a class, not outside

Protected: Only allowed in classes and inherited subclasses

Constructor: a method that is automatically executed when a class is initialized. We use this method to perform many initialization operations.

class Person {
    public name: string;
    constructor(name: string) {
       this.name = name
    }
}
const person = new Person('zlm')
// Define a name and assign it to the constructor
Copy the code

To use a constructor in a subclass, you must use super() to call the parent class’s constructor. If you need to pass a value, you must also pass a value. Even if the parent class does not have a constructor, the subclass must use super() to call, otherwise an error will be reported.

class Student extends Person {
    constructor(public age: number) {
        super('zlm')}}const stu = new Student(18)
Copy the code

In actual development, ts files are compiled by configuration

6. Compile options

The above.ts files are compiled by TSC to produce.js files, but this is not the case in real development, we need it to automatically compile

TSC index.ts but it needs to be compiled every time, we need to set it to complete TSC index.ts -w automatically// But it only monitors index.tsIn real development, we need to listen to all the files1, first configure tsconfig.json2, directly execute TSC// Compile all filesRun: tSC-w// Monitor and compile all ts files in real time

"include": specifies where ts files need to be compiled: ** for any directory * for any file"exclude": directory where files do not need to be compiled Default value: ["node_modules"."bower_components"."jspm_packages"], so it is generally not set"extends": inherits the contents of other configuration files,"files": Specifies the file to compile,"target": Specifies the ES version of TS to be compiled with 'ES3 ',' ES5 ', 'ES6 ',' ES2015 ', 'ES2016 ',' ES2017 ', 'ES2018 ',' ES2019 ', 'ES2020 ',' ESNext '."module": 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'esnext'
"lib": Specifies that the code to run is the included class library, that is, the host environment, usually in the browser, can be annotated lib tsconfig.json configuration file description {"include": [
        "./src/**/*"]."exclude": [
        "./src/hello/**/*"]."compilerOptions": {
        "target": "ES5".// target specifies the ES version to which ts is compiled
        "module": "commonjs".// Modular specification
        "lib": [].// lib is used to specify the libraries to be used in the project, generally annotated
        "outDir": './dist', // Specifies the directory where the compiled file resides
        "outFile": "./dist/app.js".// Merge code into a file, usually not, with the packaging tool
        "allowJs": false.// Whether to compile JS. The default is false
        "checkJs": false.// Whether to check the JS syntax
        "removeComments": true.// Whether to remove comments
        "noEmit": true.// Do not produce compiled files
        "noEmitOnError": true.// The compiled file is not generated when there are errors
        "alwaysStrict": true.// Set strict mode for compiled files. Default is false
        "noImplicitAny": true.// An implicit any type is not allowed
        "noImplicitThis": true.// Untyped this is not allowed
        "strictNullChecks": true.// Check strictly for null values
        "strict": true.// Total development for all strict checks}}// WebPack configuration stepsNPM init -y Generates package.json file NPM I -d webpack webpack-cli typescript ts-loader NPM I -d html-webpack-plugin NPM I D NPM i-d clean-webpack-plugin ## resolve: {extensions: ['.ts', '.js'] }// Help us solve browser compatibility issues

npm i -D @babel/core @babel/preset-env babel-loader core-js
Copy the code

7, Webpack actual combat configuration

Here is the configuration of the tsconfig.json file for the record

{
  "include": [
    "./src/**/*"]."exclude": [
      "./src/xx/**/*"]."compilerOptions": {
    // "incremental": true, 
    // target specifies the ES version to which ts is compiled
    "target": "es5".// Modular specification
    "module": "commonjs".// "lib": [],   
    // Whether to compile JS files. The default is false
    "allowJs": false.// Check whether the JS code is syntactic
    "checkJs": true."outDir": "./dist".// No compiled files are generated
    "noEmit": false.// The compiled file is not generated when there are errors
    "noEmitOnError": true./* Strict Type-Checking Options */
    // All strictly checked master switches
    "strict": true."noImplicitAny": true."strictNullChecks": true.// Untyped this is not allowed
    // Set strict mode for compiled files. Default is false
    "alwaysStrict": true."esModuleInterop": true."forceConsistentCasingInFileNames": true}}Copy the code