Getting started with typescript

Limit variable types

Basic data type

//  Define basic data 
let num: number = 3;
let str: string = 'aaa';
let bool: boolean = true;
let count = 2;

The basic data types will not be repeated , When a variable with a specified data type is assigned a value other than the data type, a type error will be prompted ;

Array

//  Define an array 
let arr: number[];
arr = [1, 2, 3]; //  correct 
arr = ['a', 2, 3]; //  error 
let arrOfArr: number[][]; //  Define a two-dimensional array 
arrOfArr = [
	[1, 2, 3],
	[4, 5, 6]
]

Tuples

It is very similar to the definition of array , Only tuples restrict element types , It also limits the number ;

//  Define a tuple 
let nums: [number, number, number];
nums = [1, 2, 3]; //  It's very similar to arrays , Just limit the type and number of elements ;
//  If you want one of them to omit the key , Just add a after the type ?, Then the data can have 3 individual , There can be 2 individual 
let counts: [number, number, number?];
counts = [4, 5];

Joint type

//  Joint type 
//  When you want a variable to be one of several arbitrary types ：
let color:number | string; // color  It can be either number , It can also be  string
color = 'red';
color = 111111;
color = true; //  Compiler error 
//  Use union types to implement enumeration 
let gender: 'male' | 'female'
let n: 1 | 2 | 3 | 4;
gender = 'male'; //  correct 
gender = 'aaa'; //  error 
n = 3; //  correct 
n = 54; //  error 

Summary

need Be careful Yes. ： For ordinary variables that are assigned initial values when defining variables , We don't really need to specify the type , Because the compiler can automatically do according to the initial value Type derivation , As in the code count.

 
 

Restrict the data type of the object

Use interface, If some fields are optional , Use when defining interfaces ? Just mark it .

interface User {
    
	id: number;
	name: string;
	roles?: string[];
}
//  If the object defined with this interface is missing or has more attributes , Compiler error 
let userInfo: User = {
    
	name: 'zhangsan',
	age: 12, //  Report errors 
}

//  If you want some fields of the object to be optional , You can use ?  Mark this field , Such as roles Field ,userInfo2 There is a lack of roles Field , But the compiler does not report an error .
let userInfo2: User = {
     //  correct 
	id: 202206010001,
	name: 'zhangsan',
}

 
 

Type the alias

• Type the alias ： Use type keyword , The advantage of this definition is , If we use the same type elsewhere , You can reuse code directly by using aliases .

type Id = number | string;

function getName(id: Id) {
    
	// ......
}

 
 

Function typescript

• Check the data type of function parameters ：

function multiply(a: number, b: string) {
    
	console.log(a, b)
}
multiply(1, 'a') //  Parameters can only be passed in numbers 、 character string , And the two parameters must 
multiply(1, 2) //  Prompt parameters 2 Wrong type of 
multiply('a', 'b') //  Prompt parameters 1 Wrong type of 
multiply(1) //  Prompt missing parameters 

and By default No, if the data type of the variable is not specified when defining the parameter , The default parameter is any type , In other words typescript This parameter will not be type checked ;

• You want a parameter of the function to be optional ：

//  Suppose you want to  b  Parameters are optional , Can pass but not pass , Just add a ? that will do 
function multiply(a: number, b?: string) {
    
	console.log(a, b)
}
multiply(1, 'a') //  correct 
multiply(1) //  correct 

• Check the data type of the return value of the function ：

function multiply(a: number, b: number): number {
    
	console.log(a, b)
	return a + b;
}
let sumNum = multiply(1, 2);

//  Or if a function has no return value , Designated as  void The type is enough 
function hello(): void {
    
	alert('hello world!!!');
}

• Signature of function ： The key point is that the function parameters are When calling back a function

function getName(callBack: (data: string) => void) {
    
	//  This method limits callBack  The parameters of the callback function are  string  type , And no value is returned 
}
//  correct 
getName((data) => {
    
	alert(data);
})
//  error 
getName((data) => {
    
	alert(data * 2);
})

 
 
If there is any deficiency , I hope you can give me some advice ！ thank you ！