A brief taste of Type Script at Byte Youth Training Camp

Type Script

TS is actually a superset of js. It is used to solve some problems of js. It is an enhancement of the js language provided by Microsoft.

TypeScript	JavaScript
As an enhancement to JS solving code complexity for large projects	Scripting language for creating dynamic web pages and writing some scripts
Strong typing, supports static and dynamic typing	dynamic weakly typed language
Errors can be found and corrected during compilation	Errors can only be found at runtime
Changing the data type of a variable is not allowed	Variables can be copied into different types

What did ts bring to us?

TS base type

• boolean ， number ，stirng
• enum
• any， unknown ，void
• never
• []
• tuple

var value : [数据类型]
enum f{
    
    }

TS function type

• Definition: TS definition function requires input parameter type and output type
• Input parameters: Parameters support optional parameters and default parameters
• Output parameters: The output can be automatically inferred and defaults to void when there is no return value.
• Function overloading: The name is the same but the parameters are different. Multiple types can be supported through overloading.

function add(x:number[]) : number
function add(x：string[]): number

TS interface

• Definition: Interface is used to define object types
• Features
  • You can select attributes:?
  • Read-only attribute: readonly
  • Can describe function types
  • Can describe custom properties
• Interfaces can be very flexible
• If necessary, you can also use key string to set attributes.

interface Person{
    
    
    name : string
    age: number
}
const p1 : Person{
    
    
    name: 'lin',
    age:18
}

p1.name 
p1.age

// key string
interface RandomKey{
    
    
    [propName:string]:string
}
cosnt obj : RandomKey{
    
    
    a:"hello",
    b:"world"
}

TS Class

• TS supports es6's class keyword writing method which is similar to that of js
• Features:
  • Added modifier public private (private) protected (can only be used by subclasses)
  • Abstract class:
    • Can only be inherited and cannot be instantiated
    • As a base class, abstract methods must be implemented by subclasses
  • The interface constraint class uses the implements keyword

class a {
    
    
    public name  : string
}
class b extends a{
    
    }

TS advanced advanced type

1. Union type | can have multiple attributes
2. Intersection types & can mix properties into objects
3. Type assertions can eliminate the need for related type inference
4. The difference between type alias type and interface is
   1. Interface is the object defined by js
   2. type is convenient and practical for defining aliases
   3. type can define basic types but will not mix them
   4. Type and interface have similar functions and may be confused
   5. Generally speaking, interface is used when it comes to classes and mixed attributes. For functions and others, you can follow your habits.

let num number|string
num = 8
num = "eight"

interface p {
    
    
    name:string
}

type stu = P &(grade:number)
const student :stu
student.name
student.grade

function getlist(arg:number|string): number{
    
    
    const str = arg as string
}

TS generic

The definition of generics needs to consider flexibility and reusability

1. The syntax of generics is <>. Writing type parameters is generally represented by T.
2. There are two designated types when used:
   1. Define the type to use
   2. Determine the automatic derivation type through ts
3. The role of generics is temporary, deduced through the passed type

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

Generic tool type

• typeof: Get the type
• keyof: Get the used key
• in: Traverse enumeration types
• T[k]: Index distribution is stable
• extends generic constraints

interface p{
    
    
    name:string
    age:number
}

type k1 = keyof p //'name'|'age'

TS actual combat

1. declare third-party library requires type declaration file
2. .TS file definition
3. @types third-party library type package
4. tsconfig.json defines the configuration of TS

Backend interface type constraints

import axios from 'axios'

interface API{
    
    
    'book/detail':{
    
    
        id:number
    },
    '/book/comment':{
    
    
        id:number,
        comment:string
    }
}

function request<T extends keyof API >(url:T,obj:API[T]){
    
    
    return axios.post(url,obj)
}

request( '/book/comment',{
    
    
    id:1,
    comment:"good!"
})