This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money. In the

preface

  • Vue3 has been around for a while, still using Vue + JS. Let’s learn TS grammar today
  • This article starts with an environment installation and starts with TS

Environmental installation

  • Install node.js
  • Install typescript NPM i-g typescript globally
  • Create a TS file
  • Compile ts files using TSC (go to the ts file directory and execute TSC filenames. Ts)

Ts Basic Type

  • Type declaration:
    • Type declarations are a very important feature of TS
    • Type declarations allow you to specify the types of variables (parameters, parameters) in TS
    • After specifying a type, when assigning a value to a variable, TS automatically checks whether the value matches the type declaration. If yes, the value is assigned; otherwise, an error is reported
    • When a type declaration sets a variable’s type, the variable can only store the value of the current type
    // Declare variable A of type number
    let a: number;
    // Assign the number 1 to variable A
    a = 1
    // 'hello' is a string
    a = 'hello'
Copy the code

    // Declare the type of the b variable to Boolean and assign it to true
    // let b: boolean = true
    // Ts automatically detects the type of a variable during assignment
    let b = true
    Boolean cannot be assigned to type number
    b = 123
Copy the code
  • Function parameter types
    // Automatic check a,b type is number
    function sum(a, b) {
        return a + b
    }
    sum(123.456)
    
    // The function argument is given a type
    function sum(a:number, b:number) {
        return a + b
    }
    // The argument must be of type number or an error will be reported
    sum(123.456)
    // The number of parameters is strictly limited. The syntax error occurs when three parameters are passed
    sum(123.456 ,789)
Copy the code
  • Function return value type
    // Add the return value type to the end of the function
    function sum(a, b) :number {
        // The syntax error cannot be given to string
        return a + '456'
    }
    sum(123.456)
Copy the code

  • Ts type
type example describe
number 1, – 33,2.5 Any Numbers
string ‘hello’,”hello” Arbitrary string
boolean true,false Boolean value
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 A null value (undefined) No value or undefined
never There is no value It can’t be any value
object {name:’vike’} Arbitrary JS object
array [1, 2, 3] Arbitrary JS array
tuple (4, 5) Tuple TS added a fixed length array of type
enum enum{A,B} Enumeration ts new type
  • Literal type declaration
    // a is declared to be 10 and cannot be changed
    let a:10
    // This code fails to assign a value of 11
    a = 11
    
    // Literal types declare basic usage
    / / b statement for man or woman can use | to connect multiple types
    let b : "man" | "woman"
    b = "man"
    b = "woman"
    // This code is reporting an error that is not a defined literal type
    b = "vike"
Copy the code
  • Multiple type declarations
    • Using | to connect multiple types
    • The joint type
    let a: boolean | string
    a = true
    a = 'hello'
Copy the code
  • Any type
    • Any means any type
    • If the type of a variable is set to any, type detection for ts is disabled
    • You are not advised to use any for ts
    • Declare a variable without specifying a type, and the TS parser automatically determines that the variable type is any
    • A variable of type any can be assigned to any variable
    // Display any type
    let b : any
    b = 123
    b = 'hello'
    b = true
    
    // Implicit any type
    let b
Copy the code
  • Unknown type
    • Represents a value of unknown type
    let b : unknown
    b = 123
    b = 'hello'
    b = true
Copy the code
  • The difference between unknown and any
    • Any can be assigned to other variables that pollute the environment
    • Unknown affects only yourself
    • Unknown is actually a type-safe any
    • Variables of type unknown cannot be assigned to other variables
    let b : any
    b = 123
    b = 'hello'
    b = true

    let s : string
    // The assignment succeeds in contaminating variable s
    s = b

    let c : unknown
    c = '123'
    // Assignment failed s or string code error
    s = c
Copy the code
  • Assignment of the unknown type
      1. If checks whether the types are the same
      1. A type assertion tells the parser the actual type of a variable
    let s : string
    let c : unknown
    c = '123'
    / / if judgment
    if (c === 'string') {
        s = c
    }
    // Assert method 1
    s = c as string
    // Assert method 2
    s = <string> c
Copy the code
  • Void type
    • The example used to represent an empty function is that it has no return value
    function fn() :void {
        // There is an error
        return 123
        // The code works fine here
        return null
        return undefined
    }
Copy the code
  • Never type
    • Indicates that the result is never returned
    • Often used to report an error, cannot return any null or undefined
    function fn1() : never {
        throw new Error('Error message')}Copy the code
  • The object type
    • Object represents an object of JS
    • Write as many arguments as there are in the object
    • If the parameters are not uniform, follow the parameters, right? Indicates an uncertain parameter
    let d: { name: string.age: number }
    d = { name: 'vike'.age: 18 }
    
    // If no error is reported in special notation, the attribute is optional
    let d: { name: string.age: number, sex? :string}
    d = { name: 'vike'.age: 18 }
    
    PropName is a custom propName. Any is an attribute value
    let e: { name: string, [propName: string] :any }
    e = { name: 'vike'.age: 18.sex: 'man' }

Copy the code
  • Sets the type declaration for the function structure
    • Syntax: (parameter: type, parameter: type…) = > the return value
    let f : (a:number,b:number) = >number
    f = function(a, b) :number {
        return 10
    }
Copy the code
  • Array type
    • Arrays can be declared in two ways
    • Type []
    • Array < type >
    // How to create a string array
    let h : string[]
    h = ['1'.'2'.'3']
    // How to create a numeric array
    // let g : number[]
    let g : Array<number>
    g = [1.2.3]
Copy the code
  • The tuple type
    • A tuple is an array of fixed length
    • Syntax: [type, type, type]
    let j : [string.number]
    j = ['123'.123]
Copy the code
  • Enum type
    • Enumerated type
    • Gender
    enum Gender {
        Male = 0,
        Female = 1
    }

    let i: { name: string.gender: Gender }
    i = { name: 'vike'.gender: Gender.Male }
Copy the code
  • Special symbols
    • & means at the same time
    let x: { name: string } | { age: number }
    x = { name: 'vike'.age: 18 }
Copy the code
  • Alias of a type
    • Give a simple alias to a custom type
    type MyType = 1 | 2 | 3 | 4 | 5
    let k : MyType
    let l : MyType
Copy the code

conclusion

  • Today’s typescript basics and types get~