TypeScript数据类型及相关面试点

一、前言

首先我们先得知道TypeScript是什么，TypeScript是JavaScript的类型的超集，支持ES6语法，支持面对对象编程的概率，如类、接口、继承、泛型等。

二、主要的数据类型

boolean（布尔类型）

// boolean 布尔类型
let bool:boolean = true

console.log(bool);//true

number（数字类型）

// number 数字类型,和javascript一样
// typescript的数值类型都是浮点数，可支持二进制、八进制、十进制和十六进制
let num: number = 10;
console.log(num);//10

string（字符串类型）

//字符串类型和JavaScript一样，可以使用双引号（"）或单引号（'）表示字符串
// 作为超集，当然也可以使用模版字符串``进行包裹，通过 ${} 嵌入变量
let str: string = `hello TypeScript${num}`

console.log(str);//hello TypeScript10

null和undefined类型

// null 和 undefined 类型
let myNull:null = null
let myUndefined:undefined = undefined
console.log(myNull,myUndefined);//null undefined

array 数组类型

//array（数组类型）
// 方式一：元素类型后面接上 []
let arr :number[] = [1,2,3];
console.log(arr);//[ 1, 2, 3 ]

// 方式二：使用数组泛型，Array<元素类型>
let arr2:Array<string> = ['lcy','180','18'];
console.log(arr2);//[ 'lcy', '180', '18' ]
// 方式三：联合类型
let arr3:(string|number|boolean)[] =  ['zs', 19, true];
console.log(arr3);//[ 'zs', 19, true ]

// 声明类型关键字 type
type arrType = (string|number)[];
let arr4 :arrType = [1,2,3,'a','b','c'];

tuple（元组类型）

//  元组 
let position: [number, number, string] = [39.5427, 116.2317, 'China']

let position2: [number, number, string?] = [39.5427, 116.2317]
console.log(position);//[ 39.5427, 116.2317, 'China' ]

console.log(position2);//[ 39.5427, 116.2317 ]

enum（枚举类型）

// enum（枚举类型）
//第一种数字枚举 
// 当我们声明一个枚举类型时，虽然没有给他赋值
// 但是它们的值其实是默认数字类型，而且默认从0开始依次累加;
enum myNumber{
    up,
    down,
    left,
    right
}
console.log(myNumber.up,myNumber.down,myNumber.left,myNumber.right);//0,1,2,3
// 如果我们将第一个值进行赋值后，后面的值也会根据前一个值进行累加1
enum myNumber1{
    up=5,
    down,
    left,
    right
}
console.log(myNumber1.up,myNumber1.down,myNumber1.left,myNumber1.right);//5,6,7,8
// 第二种字符串枚举。提示：如果设定了一个变量为字符串之后，后续的字段也需要赋值字符串，否则报错
enum myStr {
    Up = 'Up',
    Down = 'Down',
    Left = 'Left',
    Right = 'Right'
}
console.log(myStr.Up,myStr['Down']);//Up Down
// 异构枚举 即将数字枚举和字符串枚举结合起来混合起来使用
enum StringNumber{
    NO=0,
    yes='a'
}
console.log(StringNumber.NO,StringNumber.yes);//0 a

any（任意类型）

// any（任意类型）
let any:any = 1;
any = 'a'
any= true
// 定义存储各种类型数据的数组时
let arrAny:any[] =[1,false,'1'] 

object（对象类型）

let obj:{
    name:string
    sex:number
    sayHello:()=>void
} = {
    name:'lcy',
    sex:18,
    sayHello(){
        console.log('大家好我是TypeScript');
    }
}
console.log(obj);//{ name: 'lcy', sex: 18, sayHello: [Function: sayHello] }
obj.sayHello()//大家好我是TypeScript

void

// void 用于标识方法返回值的类型，表示该方法没有返回值。
function greet(msg: string): void {
    console.log('hello 打招呼 没有返回值');
}

三、接口和接口的继承

// 定义一个接口
interface Point2D{
    x:number
    y:number
}
interface InfoName{
    name:string
    age:number
}
// 用extends实现继承
interface Point3D extends Point2D{
    z:number
}

interface Point3D extends InfoName{

}
let pointA : Point2D = {
    x:10,
    y:20
}
let pointB : Point3D = {
    x:10,
    y:20,
    z:30,
    name:'C',
    age:18
}
console.log(pointB);//{ x: 10, y: 20, z: 30, name: 'C', age: 18 }

四、面试题

①JavaScript和TypeScript的区别：

• TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法
• TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译
• TypeScript 文件的后缀名 .ts （.ts，.tsx，.dts），JavaScript 文件是 .js
• 在编写 TypeScript 的文件的时候就会自动编译成 js 文件

②TypeScript的数据类型：

• boolean（布尔类型）
• number（数字类型）
• string（字符串类型）
• array（数组类型）
• tuple（元组类型）
• enum（枚举类型）
• any（任意类型）
• null 和 undefined 类型
• void 类型
• never 类型
• object 对象类型