TypeScript的数据类型

TypeScript中为了使编写的代码更规范，更利于维护，增加了类型校验，在声明变量同时为它指定数据类型

格式 : 变量名: 数据类型 = 值

布尔类型(boolean)

// 布尔类型(boolean) 
let flag:boolean = false;
console.log(flag);

数值类型(number)

// 数值类型(number)
let num:number = 20;
console.log(num);

// 如果没有值不是number类型那么ts编译会报错 但是浏览器可以正常输出
// let num1:number = "20";
// console.log(num1);

字符串类型(string)

// 字符串类型(string)
let str:string = "Hello";
console.log(str);

数组类型(Array)

// 数组类型(Array) 直接为数组的每个元素指定同一类型

// 数组声明方式一  数组声明时指定 数组类型
let arr:number[] = [1,2,3,4];
console.log(arr);

// 数组声明方式二  Array数组类型 给它指定泛型
let arr1:Array<string> = ["1","2","3"];
console.log(arr1);

// 数组声明方式三 any类型
let arr2:any[] = ["this",0,"me"];
console.log(arr2);

元组类型(tuple)

// 元组类型(tuple) 属于数组的一种 为数组的每一个元素指定一个类型
let arr3:[string,number,boolean] = ["this",1,true];
console.log(arr3);

枚举类型(enum)
 

// 枚举类型(enum)
/* 
    声明方式
    enum 枚举名{
        标识符=[值]
    }
*/

enum Color{
    red,
    blue,
    yellow="yellow"
}
// 如果枚举没有给枚举元素赋值那么指向的是当前元素的下标
console.log(Color.blue);
// 给枚举元素赋值 直接输出当前元素的值
let y:Color = Color.yellow;
console.log(y);

任意类型(any)
 

// 任意类型(any) 可以随意指定类型
let sum:any = 123;
sum = "456";
console.log(sum);

null和undefined
 

// null和undefined 其他类型(never类型)数据类型的子类型
// 声明未赋值 undefined
let str1:string;
console.log(str1); // 输出 undefined 但是 ts编译会报错

// 指定string 或 undefined 如果不赋值 输出undefined编译不会出错
let str2: string | undefined = "Hello";
console.log(str2);

// null 类型 只能为null
let str3:null = null;
console.log(str3);

// 为一个元素指定多种类型
let str4:string | undefined | null;
str4 = "Hello";
console.log(str4);

void类型
 

// void类型 :typescript中的void表示没有任何类型，一般用于定义函数的时候函数没有返回值
// 指定foo函数没有返回值
function foo():void{
    console.log("void");
}
foo();

// 指定函数返回值类型
function get():number{
    return 100;
}
console.log(get());

never类型
 

// never类型：是其他类型(包括null,undefined)的子类型，代表从来不会出现的值，
// 这意味着never声明的变量只能被never类型所赋值
var a:undefined;
a = undefined;
console.log(a);

var b:null;
b = null;
console.log(b);

// 从未出现的值  一般never类型不常用
var err:never;
err = (()=>{throw new Error("Error")})();

函数
 

函数定义
// 函数定义
// 定义无返回值
function fun():void{
    console.log("void")
}
fun();

const fun1 = function():void{
    console.log("字面量函数void")
}
fun1();

// 定义带返回值的函数
function fun2():string{
    return "返回值类型是string";
}
console.log(fun2());

const fun3 = function():string{
    return "字面量函数带返回值";
}
console.log(fun3());

函数参数
 

// 函数参数 在参数后面指定参数的类型
function fun4(name:string){
    return name;
}
console.log(fun4("小牛"));

可选参数
 

// 可选参数  
// 有时候需要age这个参数 有时候不需要 我们可以给age设置可选
function fun5(name:string,age?:number):any{
    // 如果有age这个参数 我们返回 name 和 age
    if(age){
        return `${name} --- ${age}`;
    }
    // 如果没有我们只返回name
    return `${name}`;
}
console.log(fun5("牛小牛",22));

// 注意：可选参数尽量写在形参列表最后

默认参数
 

// 默认参数  
// 在参数定义时给它赋上默认值 
function fun6(name:string,age:number=20):any{
    return `${name}---${age}`;
}
console.log(fun6("小牛",21));

剩余参数
 

// 剩余参数 ... 用于参数列表不确定参数个数使用
// 注意：剩余参数写在形参列表最后
function fun7(a:number,...result:number[]){
    let num:number = a;
    for(let v of result){
        num += v;
    }
    return num;
}
console.log(fun7(1,2,3,4,5));

函数重载

// 函数重载 ts支持函数重载
// 函数重载 ： 函数名相同参数列表不同(参数的个数，顺序，类型)有一个不同就都不相同
function getInfo(name:string):string;
function getInfo(age:number):number;
function getInfo(str:any):any{
    if(typeof str === "string"){
        return str;
    }else{
        return str;
    }
}
console.log(getInfo("hello"))

// 多个参数重载
function getData(name:string):string;
function getData(name:string,age:number):any;
function getData(name:string,age?:number):any{
    if(age){
        return `${name} --- ${age}`;
    }
    return `${name}`
}
console.log(getData("小牛",22));

箭头函数

// 箭头函数 es6箭头函数一样
 

setTimeout(()=>console.log("箭头函数的this依然指向上下文"));

智一面免费前端工程师试题，点这里或者扫面下方二维码。

想了解更多前端知识，加入我们。