TypeScript type declarations

basic type

  • type declaration

    • Type declaration is a very important feature of TS

    • The type of variables (parameters, formal parameters) in TS can be specified by type declaration

    • After specifying the type, when assigning a value to the variable, the TS compiler will automatically check whether the value conforms to the type declaration, assign the value if it matches, or report an error

    • In short, the type declaration sets the type for the variable, so that the variable can only store a certain type of value, preventing the variable from being arbitrarily assigned to any type of value

    • grammar:

      • let variable: type;
        let variable: type = value;
        function fn(parameter: type, parameter: type): type{
  • automatic type judgment

    • TS has an automatic type judgment mechanism
    • When the declaration and assignment of variables are carried out at the same time, the TS compiler will automatically determine the type of the variable
    • So if your variable declaration and assignment are performed at the same time, you can omit the type declaration
  • type:

    number 1, -33, 2.5 any number
    string 'hi', "hi", hi any string
    boolean true,false boolean true or false
    Literal itself The value of the restricted variable is the value of the literal
    any * any type
    unknown * type-safe any
    void Null value (undefined) no value (or undefined)
    never no value cannot be any value
    object {name:'Monkey King'} any JS object
    array [1,2,3] Arbitrary JS array
    tuple [4,5] Element, TS new type, fixed-length array
    enum enum{A, B} Enumeration, a new type in TS


//#Simple example of region type declaration
//  declare a variable a,Also specify its type as number
let a: number;

// a type is set to number,in the future use a can only be numeric
a = 10;
a = 33;
// a = 'hello'; // This line of code will report an error, because the type of variable a is number and cannot be assigned a string
let b: string;
b = 'hello';
// b = 123;

// After declaring the variable, assign it directly
// let c: boolean = false;
// If a variable is declared and assigned at the same time, TS Can automatically perform type detection on variables
let c = false;
c = true;


// JS The function in does not consider the type and number of parameters
function sum1(a, b){
    return a + b;
sum1(2,"2");//can be called successfully
// console.log(sum(123, 456)); // 579
// console.log(sum(123, "456")); // "123456"
// :number means that the returned value must be a number
function sum(a: number, b: number): number{
    return a + b;

let result = sum(123, 456);//Can only pass parameters strictly according to type




  • You can also use literals to specify the type of variables, and you can determine the value range of variables through literals


// You can also directly use literals for type declarations
let a1: 10;// definition a1 The value is 10 and cannot be changed, similar to a constant
a1 = 110;// report error

// can use | to connect multiple types (union types)
// express b can be"male",can also be"female"
let b: "male" | "female";
b = "male";
b = "female";

// express c can be boolean,can also be string
let c: boolean | string;
c = true;
c = 'hello';



// any Represents any type, and a variable setting type is any After that, it is equivalent to closing the variable TS type detection for
// use TS hour,Not recommended for use any type
// let d: any;

// If you declare a variable without specifying a type, then TS The parser will automatically determine the type of the variable as any (implicit any)
let d;
d = 10;
d = 'hello';
d = true;



type-safe any


// unknown represents a value of unknown type
let e: unknown;
e = 10;
e = "hello";
e = true;

let s:string;

// d is of type any,It can be assigned to any variable
  s = d;// correct

e = 'hello';
s=e;// mistake unknown Variables of type cannot be directly assigned to other variables
// unknown is actually a type-safe any
// unknown Variables of type cannot be directly assigned to other variables
if(typeof e === "string"){
    s = e;


enum Color {
let c: Color = Color.Green;

enum Color {
  Red = 1,
let c: Color = Color.Green;

enum Color {
  Red = 1,
  Green = 2,
  Blue = 4,
let c: Color = Color.Green;

type assertion

In some cases, the type of the variable is very clear to us, but the TS compiler is not clear. At this time, the type assertion can be used to tell the compiler the type of the variable. The assertion has two forms:

// Type assertions, which can be used to tell the parser the actual type of a variable
* grammar:
*   variable as type
*   <Type > Variable
* */
// The first
s = e as string;
// the second
s = <string>e;



//The first 
let someValue: unknown = "this is a string";
let strLength: number = (someValue as string).length;

//the second 
let someValue: unknown = "this is a string";
let strLength: number = (<string>someValue).length;


Tags: TypeScript

Posted by hamza on Fri, 25 Nov 2022 00:52:39 +1030