01 typescript environment installation and running

Node and NPM will need to be installed

NPM install -g typescript

Check: TSC-V

TSC is responsible for converting TS code into JAVASCRIPT code that browsers and Nodes recognize

Create the TS file and compile js

Tsc. /01test.ts generates a 01test.js file

Set up vscode to compile automatically

  1. Run TSC –init to create the tsconfig.json file

  2. Json file :’ outDir’:’./js/’

  3. Set the CScode monitoring task

02 typescript Variables and data types

Syntax for variables:

Js: let variable name = value;

Ts: let variable name: variable type = value;

In TS, if a variable is typed, it can only be set to a value of the same type

let dName:string = 'Ruikey';
dName = 520;
Type '520' is not assginable to Type 'string'
Copy the code
The data type
Common data types
// String '' '"
let aName:string = 'the sable cicada';

/ / values
let dAge:number = 18;
dAge = 18.13;

// Boolean true/false cannot use 0 or 1
let isSingleDog = true;
isSingleDog = false;

/ / undefined and unll
let undef:undefined = undefined;
let nul:null = null;

// The element type is fixed but the length is unlimited
1 / / way
let arrHeros:string[] = ['Anchira'.'the line'.'blind monk']
2 / / way
let arrAge:Array<number> = [18.19.20]

// Tuples specify the number of elements and an array of each element type
let tup1:[string,number,boolean] = ['the line'.18.false];
// The purpose of tuples: the stereotype type of arrays in TS must be consistent. If different elements are needed, tuples should be used. Tuples must be declared with the number and type specified

// Enumerates a list of identifiers
// create a gender enumeration
enum Gender{
  Boy = 1,
  Girl = 2,
  UnKnown = 3
}
console.log(Gender.Boy) / / 1
console.log(Gender.Girl)   / / 2
console.log(Gender.Unknown)  / / 3

enum Gender2{
  Boy,
  Gril,
  unKnown
}
console.log(Gender2.Boy)  / / 0
console.log(Gender2.Gril)  / / 1
console.log(Gender2.unKnown)  / / 2

// Use gender enumeration
let userSex:Gender = Gender.Boy
if(userSex == Gender.Boy){
   console.log('It's a boy')}else if(userSex == Gender.gril){
   console.log('It's a girl')}else{
  console.log('I don't know)}Copy the code
any

Any stands for any type. This is used when retrieving the DOM, or when receiving user input or a third-party code base and not sure what type of value to return

 let textName : any = document.getElementById('txtN')
Copy the code
void

Indicates that there is no type, usually used when a function has no return value

function sayHi() :string{
  return  'hi, how are you';
}
let re1 = sayHi()

function sayHi2() :void{
   console.log("I don't need a return value.")}Copy the code
never

Represents a nonexistent value, often used as a function return type to throw an error or wireless loop

The never type is the bottom type in TS, and all types are superclasses of never, so values of never can be assigned to variables of any type

// Wireless loop
function test() :never{
   while(true) {}}// Throw an error
function test2() :never{
    throw new Error("Error occurred")}// Can be assigned to any type of variable
let x:never = test2()
let y:string = test2()
Copy the code
Type judgment

Concept: If a variable is declared and initialized on the same line, you can omit the declaration of the variable type

letVariable name: Variable type = value;// Can also be written as
letVariable name = value;Copy the code

Validation: let age = 18 the type of variable age is inferred to be number

Age = ‘jack’ because the variable age is of type number

The joint type

Concept: The representation value can be one of many types

letVariable name: Variable type1| variable type2= value;Copy the code

The return value from the prompt () function is either user input or NULL

let dName:string | null = prompt("Please enter user name");console.log('hello' + dName);
Copy the code

function

Function return value type
function sayHi() :string{
  return  'hi~~~'
}
let resl:string = sayHi()
Copy the code
Function parameter type
function jumpSan(cityName:string) :void{
  console.log(` parachute jump${cityName} `)}Copy the code

Arguments and parameters in TS must be of the same type

The number of arguments and parameters in ts must be the same

Function optional argument
functionThe function name (Parameter? Type:): Return value type{
   / / the question mark? The argument can be passed or not
}

/ / callThe function name ()// No arguments are passedFunction name (argument)// Pass the argument
Copy the code
Function defaults
functionThe function name (parameter1: Type = Default1The parameter2: Type = Default2): Return value type{}/ / callThe function name ()// Do not pass the compiled function name (default 1, default 2)Function name (argument1)// Pass an argument to the compiled function name (argument 1, default 2)Function name (argument1That argument2)// Pass two arguments to the compiled function name (argument 1, argument 2)The function name (undefinedThat argument2)// Pass only the function name of the second argument (default 1, argument 2)
Copy the code
Function residual parameter
function add(a : number , b : number) :void{
   coaole.log(a+b)
   // If the number of parameters is not determined
}

funciton add(a:number , b:number , ... c:number[]):void{
  let resNum:number = x + y
  for(let el of c){
    resNum += el
  }
  console.log(resNum)
}

add(1.2)    / / 3
add(1.2.3.4.5.6)   / / 21
Copy the code

class

Class member variables, constructors, member methods

class City{
   cName:string;
   cLevel:number;
   constructor(name:string , level:number){
     this.cName = name;
     this.cLevel = level
   }
   about(){
    console.log('Welcome toThe ${this.cName}The danger factor here isThe ${this.level}`)}}Copy the code