TypeScript数据类型

目录

• 一、TS介绍
• 二、数据类型
• • 1.基础类型
  • 2.数组、联合类型
  • 3.元组
  • 4.函数参数和返回值类型（函数类型）
  • 5.类型别名（自定义类型）
  • 6.类型断言
  • 7.字面量类型
  • 8.枚举类型
  • 9.对象
  • 10.接口
  • 11.类
• 三、类型操作
• • 1.类型兼容
  • 2.类型交叉

一、TS介绍

TypeScript=Type+JavaScript，即在JavaScript基础上封装了一层，添加了类型支持 。添加类型支持的原因是JS代码中的运行错误绝大部分都是类型错误，而TS可以在编译阶段检查变量的类型是否发生变化。

因此要运行TS代码需要使用tsc命令将TS代码.ts编译 生成JS代码.js，然后运行编译后的JS代码。

二、数据类型

TS中使用: 类型来声明变量的类型。

• JS已有类型
  • 基础类型：number/string/boolean/null/undefined/symbol
  • 引用类型： object（数组/函数/对象）,TS中对于每个对象类型有不同的写法。
• TS新增
  • 联合类型、自定义类型、接口、元组、字面量类型、枚举、void、any

1.基础类型

let flag: boolean = false
let a: null = null
let b: undefined = undefined
......

2.数组、联合类型

// 数组类型
let nums: number[] = [1,3,5]

// 联合类型：用于数组中需要有多种类型时
let n_s: (number | string)[] = ['a', 'b', 1]

3.元组

限定了数组中元素个数的数据类型叫元组。

let tuple: [numbers, numbers] = [1,2]

4.函数参数和返回值类型（函数类型）

// 两种写法
function add(let num1: number, let num2: number): number{
	return num1 + num2
} 
const add = (num1: number, num2: number): number =>{
	return num1 + num2
}

// 使用？规定可选参数，可选参数在函数调用时可传可不传
function add(let num1?: number, let num2?: number): number{
	return num1 + num2
}

5.类型别名（自定义类型）

type StringNumberArray = (number | string)[] 
let n_s: StringNumberArray = ['a', 'b', 1]

6.类型断言

通过getElementById()获取到的标签默认是HTMLElement类型，只能访问标签的公共属性，如果想访问不同标签的特有属性就需要使用类型断言进行类型转换。

const hrefObject = Document.getElementById("href1") as HTMLAnchorElement;
console.log(hrefObject.href);

7.字面量类型

字面量类型配合联合类型用来约束变量取固定集合中的值，即枚举。

function changeDirection(direction: ('left' | 'right' | 'up' | 'down')){
	return direction
}

console.log(changeDirection("left"))

8.枚举类型

enum Direction{
    LEFT = 'left',
    RIGHT = 'right',
    UP = 'up',
    DOWN = 'down'
}

let d = Direction.LEFT

9.对象

type Person = {
	name: string; 
	age: number; 
	toString(str: string): string
}

let zhangsan: Person = {
	name: '张三',
	age: 18,
	toString(str: string){
		return str;
	}
}

10.接口

interface Person{
	name: string; 
	age: number; 
	toString(str: string): string
}

let zhangsan: Person = {
	name: '张三',
	age: 18,
	toString(str: string){
		return str;
	}
}

11.类

类的成员变量和方法有public/protected/private三种修饰符，默认public。protected修饰的元素进能在类定义中访问，实例无法访问；private修饰的元素不仅实例无法访问，子类的定义中也无法访问。

class Person{
	name: string; 
	age: number; 

	constructor(name: string, age: number){
        this.name = name;
        this.age = age;
    }

    toString(str: string): string{
        return str + this.name;
    }
}

const p = new Person('zhangsan', 16);
p.toString('123')

三、类型操作

1.类型兼容

TS采用结构化类型系统（Java是标明类型系统），相同结构 但是不同名称的类、接口可以互相转换，对于具有父子结构的类、接口即使没有显示的继承关系也能自动向上转型。

class C1{
    f1: number;
}

class C2{
    f1: number;
    f2: number;
}

const c: C1 = new C2()

2.类型交叉

类型交叉可以组合多个类、接口。

class C1{
    f1: number;
}

class C2{
    f2: number;
}

type C3 = C1 & C2;