1. Typescript is a superset of JavaScript
  2. It extends JS, introduces the concept of types, and adds many new features
  3. TS is fully JS compatible; in other words, any JS code can be used as TS
  4. TS code needs to be turned into JS by the compiler, and then handed over to the JS parser for execution
  5. Compared with JS, TS have static type, more strict syntax, more powerful, TS can be done before the code execution to examine the code, reduce the probability of a runtime error, TS code can be compiled to any version of JS code, can effectively solve the amount of different JS runtime compatibility, The same function TS code is larger than JS, but later easier to maintain.

TypeScript basic types

  • Type declaration

    • Type declarations are an important feature of TS
    • The type life allows you to specify the type of a variable (parameter, parameter) in TS
    • When assigning a value to a variable after specifying the type, the TS compiler automatically checks whether the variable conforms to the type declaration. If yes, the value is assigned. If no, an error is reported
    • In short, a type declaration sets the type of a variable so that it can only store a value of a certain type
    • Grammar: 
      • letVariable: type;letVariable: type = value;function fn(Parameter: type, parameter: typeType) :{... }Copy the code

  • Automatic type judgment

    • TS has an automatic type determination mechanism
    • The TS compiler automatically determines the type of a variable when both life and assignment are performed
    • So if your variable’s life and assignment happen at the same time. You can omit the type declaration

  • Type:

    type example describe
    number 1, 33, 2.5 Any Numbers
    string ‘hi’, “hi”, hi Arbitrary string
    boolean True, false, Boolean value true or false
    literal In its own right The value of the constraint variable is the value of the literal
    any * Any type
    unknown * Type safe any
    void Null value (undefined) No value (or undefined)
    never There is no value It can’t be any value
    object {name:’ Sun Wukong ‘} Any JS object
    array [1, 2, 3] Arbitrary JS array
    tuple (4, 5) Element, TS new type, fixed length array
    enum enum{A, B} Enumeration, new type in TS

  • number

    • let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
let big: bigint = 100n;
Copy the code

  • boolean

    • let isDone: boolean = false;
Copy the code

  • string

    • let color: string = "blue";
color = 'red';

let fullName: string = `Bob Bobbington`;
let age: number = 37;
let sentence: string = `Hello, my name is ${fullName}.

I'll be ${age + 1} years old next month.`;

Copy the code

  • literal

    • A literal can also be used to specify the type of a variable. A literal can be used to determine the value range of a variable

    • let color: 'red' | 'blue' | 'black';
let num: 1 | 2 | 3 | 4 | 5;
Copy the code

  • any

    • let d: any = 4;
d = 'hello';
d = true;
Copy the code

  • unknown

    • let notSure: unknown = 4;
notSure = 'hello';
Copy the code

  • void

    • let unusable: void = undefined;
Copy the code

  • never

    • function error(message: string) :never {
  throw new Error(message);
}
Copy the code

  • No object.

    • let obj: object = {};
Copy the code

  • array

    • let list: number[] = [1.2.3];
let list: Array<number> = [1.2.3];
Copy the code

  • tuple

    • let x: [string.number];
x = ["hello".10]; 
Copy the code

  • enum

    • enum Color {
  Red,
  Green,
  Blue,
}
let c: Color = Color.Green;

enum Color {
  Red = 1,
  Green,
  Blue,
}
let c: Color = Color.Green;

enum Color {
  Red = 1,
  Green = 2,
  Blue = 4,}let c: Color = Color.Green;
Copy the code

  • Types of assertions

    • In some cases, the type of a variable is clear to us, but not to the TS compiler. In this case, we can tell the compiler what type the variable is using a type assertion, which can take two forms:

    • The first kind of

      • let someValue: unknow = "this is a string".let strLength :number = (somevalue as string).length
Copy the code

    • The second,

      •  let someValue: unknown = "this is a string";
 let strLength: number = (<string>somevalue).length;
 
 
Copy the code

3. Compile options

  • Auto-compile file

    • When compiling a file, using the -w command, the TS compiler automatically monitors the file for changes and recompiles the file if it changes.

    • Example:

      • tsc xxx.ts -w
Copy the code

  • Automatically compile the entire project

    • If you use the TSC directive directly, you can automatically compile all ts files under the current project into JS files.

    • To use the TSC command directly, you must create a tsconfig.json configuration file in the root directory of the project

    • Tsconfig. json is a JSON file. After adding the configuration file, you only need TSC command to complete the compilation of the entire project

    • Configuration options:

      • include

        • Defines the directory where you want the files to be compiled

        • Default value: [“**/*”]

        • Example:

          • "include": ["src/**/*"."tests/**/*"]
Copy the code

          • In the example above, all files in the SRC directory and tests directory are compiled

      • exclude

        • Define the directories that need to be excluded

        • Default: [“node_modules”, “boWER_components “,” jSPM_packages “] default: [“node_modules”, “bower_components”, “jSPM_packages “]

        • Example:

          • "exclude": ["./src/hello/**/*"]
Copy the code

          • In the example above, files in the hello directory under SRC are not compiled

      • extends

        • Define inherited configuration files

        • Example:

          • "extends": "./configs/base"
Copy the code

          • In the previous example, the current configuration file automatically contains all the configuration information in the base.json directory in the config directory

      • files

        • Specifies a list of files to compile, used only when there are fewer files to compile

        • Example:

          • "files": [
    "core.ts"."sys.ts"."types.ts"."scanner.ts"."parser.ts"."utilities.ts"."binder.ts"."checker.ts"."tsc.ts"
  ]
Copy the code

          • The files in the list are compiled by the TS compiler

        • compilerOptions

          • Compile options are important and complex configuration options in configuration files

          • Contains suboptions to configure compilerOptions

            • Project options

              • target

                • Sets the target version for ts code compilation

                • Optional value:

                  • ES3 (default), ES5, ES6/ES2015, ES7/ES2016, ES2017, ES2018, ES2019, ES2020, ESNext

                • Example:

                  • "compilerOptions": {
    "target": "ES6"
}
Copy the code

                  • As set up above, the TS code we wrote will compile to the ES6 version of JS code

              • lib

                • Specify the libraries (host environment) that the code runtime contains

                • Optional value:

                  • ES5, ES6/ES2015, ES7/ES2016, ES2017, ES2018, ES2019, ES2020, ESNext, DOM, WebWorker, ScriptHost……

                • Example:

                  • "compilerOptions": {
    "target": "ES6"."lib": ["ES6"."DOM"]."outDir": "dist"."outFile": "dist/aa.js"
}
Copy the code

              • module

                • Sets up the modular system used by compiled code

                • Optional value:

                  • CommonJS, UMD, AMD, System, ES2020, ESNext, None

                • Example:

                  • "compilerOptions": {
    "module": "CommonJS"
}
Copy the code

              • outDir

                • The directory where the compiled file resides

                • By default, compiled JS files are located in the same directory as ts files. Setting outDir can change the location of compiled files

                • Example:

                  • "compilerOptions": {
    "outDir": "dist"
}
Copy the code

                  • The compiled JS file will be generated in the dist directory

              • outFile

                • Compile all files into a JS file

                • By default, all code written in the global scope is merged into a JS file, and modules are merged together if the Module specifies None, System, or AMD

                • Example:

                  • "compilerOptions": {
    "outFile": "dist/app.js"
}
Copy the code

              • rootDir

                • Specify the root directory for your code. By default, the compiled file’s directory structure takes the longest public directory as the root directory. You can specify the root directory manually using rootDir

                • Example:

                  • "compilerOptions": {
    "rootDir": "./src"
}
Copy the code

              • allowJs

                • Whether to compile js files

              • checkJs

                • Whether to check the JS file

                • Example:

                  • "compilerOptions": {
    "allowJs": true."checkJs": true
}
Copy the code

              • removeComments

                • Delete comments
                • Default value: false

              • noEmit

                • The code is not compiled
                • Default value: false

              • sourceMap

                • Whether sourceMap is generated

                • Default value: false

            • Strict inspection

              • strict
                • Enable all strict checks. The default value is true, which means all strict checks are enabled
              • alwaysStrict
                • Always compile your code in strict mode
              • noImplicitAny
                • The implicit any type is disallowed
              • noImplicitThis
                • Disallow this with undefined type
              • strictBindCallApply
                • Strictly check the parameter lists for bind, call, and apply
              • strictFunctionTypes
                • Strictly check the type of the function
              • strictNullChecks
                • Strict null-checking
              • strictPropertyInitialization
                • Strictly check that the property is initialized

            • Additional inspection

              • noFallthroughCasesInSwitch
                • Check that the switch statement contains the correct break
              • noImplicitReturns
                • Check that the function has no implicit return value
              • noUnusedLocals
                • Check for unused local variables
              • noUnusedParameters
                • Check for unused parameters

            • senior

              • allowUnreachableCode
                • Check for unreachable code
                • Optional value:
                  • True, ignore unreachable code
                  • False, unreachable code will cause an error
              • noEmitOnError
                • Do not compile if there are errors
                • Default value: false

——- the notes refer to li Lichao’s lecture