一、前言
首先我们先得知道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 对象类型