TypeScript basic data type

Posted by shab620 on Tue, 21 Dec 2021 17:28:53 +0100

TypeScript: basic data type

Declare a variable in typescript and specify its type. In future use, the value of the variable can only be this type

String type

The string in ts can also use back quotation marks. The usage is the same as js

let a: string = "aaa";

Number type

The number type supports decimal, hexadecimal, binary and octal

let b: number = 100;

Boolean type

let c: boolean = true;

array

// Syntax 1: string [] indicates that the variable is an array composed of strings, the same as number[], boolean []
let arr1: string[] = ["a","b","c"];

// Syntax 2: array generic, the same as array < string >, array < Boolean >
let arr2: Array<number> = [1,2,3,4,5];

object

// Syntax 1: object. Any number and type of attributes can be stored in the defined object
let obj1: object = { name: "zs", age: 18 };

// Syntax 2: {}, the same function as object
let obj2: {} = { name:"ls",hobby:"code" };

// Syntax 3: restrict attributes in objects
// Take obj3 as an example. When assigning values, the number and types of attributes in the object should be consistent with those in the declaration
let obj3: { name:string } = { name:"zs" }

// Syntax 4: optional attribute, by adding?, after the attribute name?, Indicates that the property is optional
let obj4: { name: string, age?: number };
obj4 = {
    name: "zs"
}

// Syntax 5 (try not to use it): set it through any
// Taking obj5 as an example, it means that the object needs the name attribute, and the number and type of other attributes are arbitrary
// [aaa: string] represents any attribute name of string type
// Any represents an attribute value of any type
let obj5: { name:string, [aaa:"string"]: any }
obj5 = {
    name:"zs",
    age: 18,
    hobby: "code"
}

function

// Grammar one
// Indicates that fn1 has two parameters, both of which are of type number, and the return value is of type number
let fn1: (a: number,b: number) => number;

fn1 = function(num1,num2) {
    return num1+num2;
}

//Grammar II
// Indicates that fn2 has two parameters, the first is number type, the second is string type, and the return value is string type
// The type behind the bracket is the type of return value. The default is void, which means there is no return value. If it is never, it means that the result will never be returned
function fn2(a: number, b: string): string {
    retrun a+b;
}

any type

  • Any indicates any type and is generally not recommended
  • Setting the type of a variable to any is equivalent to ts turning off the type detection of the variable
  • Any type of variable can be assigned to any variable, and the assigned variable will also be transformed into any
  • If only variables are declared, no value is assigned, and no type is specified, the ts parser will automatically determine that the type of the variable is any
let p: any;
p = 100;
p = true;
p = "hello";

unknown type

  • Unknown represents a value of an unknown type
  • The difference from any is that it does not change the type of other variables
  • unknown is actually a type safe any
let q: unknown;
q = 123;
q = "hello";
q = true;
-----------------------------------------------------------------------------
//unknown variables cannot be directly assigned to other variables and need to be converted
    
let r: string = "aaa";
let s: unknown = "hello";

// Mode 1
if(typeof s === "string") {
    r = s;
}

// Method 2: through type assertion
r = <string>s;

tuple

Tuples are fixed length arrays

Syntax: [type, type,...]

let t: [string,string];
t = ["aaa","bbb"];

enumeration

enum Gender {
    Male = 0,
    Female = 1
}

let u: { name:string, gender:Gender}
u = {
    name:"zs",
    gender: Gender.Female
}

supplement

Omit variable type

If the declaration and assignment of variables are performed at the same time, the variable type can be omitted, and the ts parser will automatically parse the variable type

let d = 100;
Declare variables only

If you only declare variables, do not assign values to them, and do not specify their types, the ts parser will resolve the types of variables to any

That is, the variable implicitly has the "any" type

let e;
Keywords declaring variables cannot be omitted
f = 100;   // Such writing is wrong
Union type

By setting multiple types of variables, you can assign values according to the set types

// f can be assigned as a string, number or Boolean value

let f: boolean | string | number;
f = 100;
f = "abc";
Cross type

By & setting the type, it means that the variable is both the former and the latter

let b: { name: string } & { age: number }   express j There should be both name Properties and age attribute
Type declaration by literal

After literal declaration, the variable can only be assigned the given value

let g: 10;
let h: "male" | "female";

g = 10;
h = "male";
h = "female";
Type Asserts

Used to tell the ts parser the actual type of the variable

let r: string = "aaa";
let s: unknown = "hello";
// Syntax 1: variable as type
r = s as string;

// Syntax 2: < type > variable 
r = <string>s;
Type alias
// Syntax: (indicates that string type has an alias called myType, and myType can be used to represent string)
// For example: type myType = string;

type myType = "a" | "b" | "c"| "d"| "e";

let v: myType = "c";

;

//Syntax 2: < type > variable
r = s;

##### Type alias

```typescript
// Syntax: (indicates that string type has an alias called myType, and myType can be used to represent string)
// For example: type myType = string;

type myType = "a" | "b" | "c"| "d"| "e";

let v: myType = "c";

Topics: Javascript Front-end TypeScript