首页 前端知识 ts语法基础——基础类型

ts语法基础——基础类型

2024-08-14 00:08:05 前端知识 前端哥 877 378 我要收藏

TS 语法

TS 基础类型

TypeScript 支持与 JavaScript 几乎相同的数据类型,此外还提供了实用的枚举类型方便我们使用

TS 支持的变量类型如下:

类型描述
boolean限制为布尔类型, true 或者 false
number限制为任意的数字。 二进制,八进制,十进制,十六进制均可
string限制为任意的字符串。单引号,双引号,反引号均可
字面量限制为某个字面量的值
any限制为任意类型
void限制为 undefined, 一般用来限制函数的返回值
never限制函数没有返回值
object限制为对象类型
array限制为数组类型
tuple 元组限制为固定长度与类型的数组
enum 枚举限制为枚举的数据
布尔类型

最基本的数据类型就是简单的 true/false 值,在JavaScript 和 TypeScript 里叫做 boolean(其它语言中也一样)。

let isDone: boolean = false;
isDone = true;
// isDone = 2 // error
数字类型

除了支持十进制和十六进制字面量,也支持二进制和八进制字面量。

let a1: number = 10 // 十进制
let a2: number = 0b1010  // 二进制
let a3: number = 0o12 // 八进制
let a4: number = 0xa // 十六进制
字符串类型

JavaScript 程序的另一项基本操作是处理网页或服务器端的文本数据。 像其它语言里一样,我们使用 string 表示文本数据类型。 和 JavaScript 一样,可以使用双引号(")或单引号(')表示字符串。

let name:string = 'tom'
name = 'jack'
// name = 12 // error
let age:number = 12
const info = `My name is ${name}, I am ${age} years old!`
字面量类型

TS 允许限制某个变量为固定的某个值

let z: 521 = 521;
let z2: 'love' = 'love';
// z='abc'; //类型不符 error
any

any 类型允许变量的值为任意类型, 并且可以进行任意类型的赋值

let a: any = 100;
a = 'iloveyou';
void

void 限制值为 undefined

let v: void = undefined;
function fn():void{
  return undefined;
}
对象

object 限制类型为对象, 用的比较少

//object 类型
let o: object = {}
o = [];
数组

TypeScript 像 JavaScript 一样可以操作数组元素。 有两种方式可以定义数组。

第一种,可以在元素类型后面接上[],表示由此类型元素组成的一个数组:

第二种方式是使用数组泛型,Array<元素类型>

let arr: number[] = [1,2,3];
// arr.push('abc');// error
let arr2: Array<number> = [4,5,6];
元组

元组(Tuple)类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同

let t1: [string, number] = ['james', 30];
console.log(t1[0].toUpperCase());
//console.log(t1[1].slice(1));// error
枚举

枚举(enum)类型是对 JavaScript 标准数据类型的一个补充。 使用枚举类型可以为一组数值赋予友好的名字。 一般用于组织一些有相似之处的常量,让这些常量更规范、更统一。

enum Gender{
  Female,
  Male,
  Secret
}

let me: object = {
  gender: Gender.Male,
}

console.log(me);
联合类型

联合类型(Union Types)表示取值可以为多种类型中的一种。

let v1: number | string;
v1 = 5211314;
v1 = 'iloveyou'
类型断言

类型断言(Type Assertion)可以告诉编译器,“相信我,我知道自己在干什么,别报错,出了事我负责”。

(async () => {
  let v: number | string;
  v = await new Promise((resolve) => {
    resolve(3.14);
  })
  //方式一  as
  console.log((v as number).toFixed(2));
  //方式二  <类型>
  console.log((<number>v).toFixed(2));
})()
类型推断

TS 会在没有明确的指定类型的时候推测出一个类型。主要有下面两种情况

  1. 变量声明时赋值了,推断为值对应的类型
  2. 变量声明时没有赋值, 推断为 any 类型
let v3 = 100; // number 类型
// v3 = 'loveyou'; //类型 error
let v4; // any 类型
v4 = 100; 
v4 = 'loveyou';

函数

TypeScript 为 JavaScript 函数添加了额外的功能

参数与返回值类型

TypeScript 可以为参数与返回值设置类型,代码示例如下:

function add(x: number, y: number): number {
  return x + y
}

let sub = function(x: number, y: number): number { 
  return x + y
}

let times = (a: number, b: number): number => {
    return a * b;
}

TypeScript 能够根据返回语句自动推断出返回值类型,因此我们通常省略返回值的类型。

函数声明的完整形式

现在我们已经为函数指定了类型,下面让我们写出函数的完整类型。

let divide: (bei: number, chu: number) => number = function(a: number, b: number): number{
    return a / b;
}
可选参数

TypeScript 默认要求函数实参数量要与形参的数量保持一致,不过可以使用『 ?: 』设置参数为可选参数

//截取字符串
function slice(str: string, start: number, end ?: number): string{
    return 'iloveyou';
}
参数默认值

TypeScript 与 JavaScript 一样,允许为参数设置默认值

//构建手机号
function buildPhone(code:string, area : string = '+86'){
    return area + code;
}
剩余参数

针对不定个数参数的函数时,我们可以使用 ES6 提供的 rest 参数来处理。不过在 TypeScript 中需要设置类型。

//剩余参数
function add(a: number, b: number, ...args: number[]){
  //求和
  args = [a, b, ...args];
  return args.reduce((prev: number, current: number) => {
    return prev + current;
  })
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/15493.html
标签
评论
发布的文章

HTML5 地理定位

2024-08-20 09:08:58

HTML5 的真相(一)

2024-08-20 09:08:31

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!