Learning about TS

Posted by arcanechaos on Fri, 18 Feb 2022 11:00:09 +0100

First of all, TS mainly solves the main problem of unclear js type, so we should write its type when defining variables

Basic data type code

let b : number // At this time, the variable of b must be number, or an error will be reported 

let isDone: boolean = false;

b = 1  // Of course, you will say whether there are other types. Of course, js has some types and ts does not have them

// It's too troublesome to write like this

let a : number = 1 // Is this good, but it's still too troublesome. It's better to write ts in js. Of course, it supports

let c = '1'  // When the first assignment is a string, the second assignment must be a string 
c = 2        // It will be wrong at this time 
 
// Reference types can be used in both ways  
let list: number[] = [1, 2, 3];  // String of numeric type
let list: Array<string> = ['1', '2', '3'];  // Array of string types

let  p : string | number // Indicates that you can select one of the two types 

OK, there are still objects and functions, but before I say them, I want to say any and unknown

The official website says any: sometimes we want to specify a type for variables whose type is not clear at the programming stage. These values may come from dynamic content, such as user input or third-party code bases. In this case, we don't want the type checker to check these values, but directly let them pass the check at the compilation stage. Then we can mark these variables with any type:

let notSure: any = 4; 

notSure = "maybe a string instead"; 

notSure = false; // Boolean, of course

Well, let's treat him as a fart. We can't understand it anyway

In fact, any refers to any data type. Setting any variable is equivalent to turning off the type detection of TS. it is not recommended to use ts when using ts, because it is no different from js. If the life variable is not assigned, then this variable is of type any

let b ; //Implicit any
let a : any ; display any

We should avoid these two situations (don't use them as a last resort)

Unknown: just as all types can be classified as "any", all types can also be classified as "unknown". This makes , unknown , another top-level type in the TypeScript type system (the other is , any)

let value: unknown;
 
let value1: unknown = value;   // OK
let value2: any = value;       // OK
let value3: boolean = value;   // Error
let value4: number = value;    // Error
let value5: string = value;    // Error
let value6: object = value;    // Error
let value7: any[] = value;     // Error
let value8: Function = value;  // Error

Unknown type can only be assigned to any type and unknown type itself. Intuitively, this makes sense: only containers that can hold values of any type can hold values of type unknown. After all, we don't know what type of value is stored in the variable {value}.

I'm not good at learning. After reading other people's articles, I jump to

TypeScript 3.0: unknown type_ weixin_33716557 blog - CSDN blog original address: TypeScript 3.0: The unknown Type original author: Marius Schulz translation from: Nuggets translation plan permanent link to this article: GitHub COM / Xitu / gold-M... Translator: Shixi Li proofreader: Usey95, smilemuffieTypeScript 3.0 introduces a new unknown type, which is the security type corresponding to any type. Unknown and ahttps://blog.csdn.net/weixin_33716557/article/details/93177689

Just look at the type of assertion

Void type is used to indicate null. Take a function as an example, it means the code on the function that has no return value

Never indicates that the result will never be returned

function fn () : void { }  // Function with no return value
function  fn2 () :never {}  // This means that never is empty, undefined, or used for error reporting. There is no return value at the end of understanding

Object type:

During development, we don't go back to let o: the reference types of object are all objects, and what we want to limit is the attributes in the object

let o: {} This is very different from the above code

let b :{name:string}  // The name attribute is as like as two peas in the attribute object, but the structure must be exactly the same as the assignment structure.
b = {name:'Sun WuKong'}
b = {} // This will report an error

let b :{name:string ,  age?:string}  // What's added after the attribute? It proves that this attribute is optional 
b = {name:'Sun WuKong'}
b = {name:'Sun WuKong' , age:'1'} // You can have it or not 


let b :{name:string  ,[propName:strinbg]:any}  // After that, you can write unlimited attributes. propName is just a variable name. You can write it anyway [propName: stringbg]: any attribute must be a string. I don't care how many attributes there are
 b = {name:'Sun WuKong' , age:'1', XXX :'XXX' ......} Unlimited attributes


let p : {name:'string'} & {age:'number'} // This & means that there should be an attribute with name as string and an attribute with age as number in the object 



This is similar to function

// The function has two parameters (numbers) and the return value must also be numbers. If the c parameter, the structure of type is the same as that of object type 
let d : (a:number , b:number) => number 

d = function(n1,n2) {
retunr  n1+n2
}
Design the structure data type of the function through the arrow function

Array when we declare an array, what type of value is in the array

//This represents an array of strings
let  e : string[] 
e = ['1','2','3']

//This represents an array of numbers
let  e : number[] 
e = [1,2,3]

// The second way to write a declaration array
let list: Array<number> = [1, 2, 3];

Tuple: fixed length array

let h : ['string' ,'string'] // In this case, the array of h must be followed by two strings

let h : ['string' ,'number'] // In this case, the array of h must be a string and a number

enum enumeration

//  Defines the value of the enumeration
enum Gender {
    Male = 0,
    female = 1
}

let i :{name:string, gender:Gender}  // Where enumerations are used

i= {
name :"Sun WuKong",
gender :Gender.Male  // Enumeration is 0 when ts is converted 
}
console.log(i.gender  === Gender.Male) 

Aliases of types, for example, look at the code and say it

let k :1|2|3|4|5
let j :1|2|3|4|5

type  MyType = 1|2|3|4|5
type  Mystring = string

let p : MyType
let l : Mystring

l = '1'

Topics: TypeScript Vue.js