前言
TypeScript作为一门前端语言,其形式上更类似于后端java语言,相对于JavaScript而言TypeScript更体现出面向对象的编程方式,其提供的参数校验、接口、泛型等等,都使得ts在开发大型前端项目时有着出色的表现,因此作为一名前端开发人员,掌握ts语言是非常有必要的,这里博主将自己在学习TypeScript时,整理的一些基础知识笔记分享出来。
本章内容包括:TypeScript的常用数据类型、TypeScript函数
常用数据类型
TypeScript 常用数据类型大致为以下几种
1.布尔型 boolean
//注意ts的语法规则类似于强类型语言,声明变量时需要指定数据类型一但指定类型将不能改变(后续将不再提示)
let flag:boolean = true;
flag = false; //成功
flag = 123 ;//报错
- 数值型 number
const num:number = 1
- 字符串型 string
const str:string = "hi";
- 数组型 array
const arr:number[] = [1,2,3]; //指定数组内元素为数值型
const arr2:string[] = ["1","2","3"];//指定数组内元素为字符串型
- 元组型 tuple
const arr:[string,number,boolean]=["hi",1,false]; //指定数组每一项的数据类型
- 枚举型 enum 提示:枚举类型可以用以标示状态
enum Flag {success=1,error=0};
const f:Flag = Flag.success;
特殊注意点
enum Color {red,blue=5,yellow};
const red:Color = Color.red; //0 此时如果枚举类型没有被赋值,那么默认是当前的下标位置
const blue:Color = Color.blue; //5 如果有指定值那么就是指定值
const yellow:Color = Color.yellow; //6 如果有指定值的下一项没有被赋值,那么默认是上一项加一
-
any类型 任意类型
-
viod类型 一用于函数返回值 表示 无
function fn():void{}
- never类型
表示从不会出现的类型
一般使用较少
let a:never;
a = ()=>{
throw new Error("错误");
}
函数
- 函数声明
//指定返回值类型
function fn():string{
return "hi"
}
//无返回值
function fn2():void{
}
//指定参数类型
function fn(name:string):string{
return "hi";
}
fn("jack");
//可选参数
function fn2(name:string,age?:number):void{
}
fn2("jack");// 成功
fn2("jack",18);// 成功
fn2();//报错
//默认参数
function fn3(age:number = 20):void{
console.log(age);
}
fn3(); // 20
fn3(40); //40
//剩余参数
function fn4(age:number,...arr:number[]):void{
}
fn4(1,2,3,4); //age=1 arr=[2,3,4]
- 匿名函数(函数表达式)
const fn = function():number{
return 123;
}
- 重载
function fn(name: string): string
function fn(age: number): number
function fn(str: any): any {
if (typeof str == "string") {
return "我叫," + str
} else {
return "我的年龄是," + str
}
}
fn("jack") //我叫jack
fn(12)// 我的年龄是 12
fn(true) //报错