ts的定义类型，数组泛型，ts与js的区别

前言：

        ts的相关资料，包括定义类型，以及数组泛型的资料。

官方介绍：

1、阮一峰

什么是 TypeScript · TypeScript 入门教程从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript。http://ts.xcatliu.com/introduction/what-is-typescript.html

2、ts官网

5分钟上手TypeScript · TypeScript中文网 · TypeScript——JavaScript的超集https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.html

ts的介绍与安装，

1、ts的介绍：

• TypeScript 是添加了类型系统的 JavaScript，适用于任何规模的项目。
• TypeScript 是一门静态类型、弱类型的语言。
• TypeScript 是完全兼容 JavaScript 的，它不会修改 JavaScript 运行时的特性。
• TypeScript 可以编译为 JavaScript，然后运行在浏览器、Node.js 等任何能运行 JavaScript 的环境中。
• TypeScript 拥有很多编译选项，类型检查的严格程度由你决定。
• TypeScript 可以和 JavaScript 共存，这意味着 JavaScript 项目能够渐进式的迁移到 TypeScript。
• TypeScript 增强了编辑器（IDE）的功能，提供了代码补全、接口提示、跳转到定义、代码重构等能力。
• TypeScript 拥有活跃的社区，大多数常用的第三方库都提供了类型声明。
• TypeScript 与标准同步发展，符合最新的 ECMAScript 标准（stage 3）。

2、ts与js的区别

js是动态类型弱类型语言，而ts是静态类型弱类型语言。

        强类型语言：不允许改变变量的数据类型，除非进行强制类型转换。

        弱类型语言：变量可以被赋予不同的值。

        静态类型语言：在编译阶段确定所有变量的类型。

        动态类型语言：在执行阶段确定所有变量的类型。

ts的好处：

        在编译阶段即可暴露出大部分错误，致使可维护性增强。因此使得ts在多人合作的大型项目中可以获得更好的稳定性和开发效率。js的代码都可以在ts里面运行

3、ts的安装与查询

可以用vue的ts插件包，也可以全局安装

npm install -g typescript

查询当前版本信息-命令

tsc

ts文件转换成js文件

tsc greeter.ts

定义类型：

ts的数据类型有两种，一种是js原有的数据类型，一种是新增的数据类型

js原有的数据类型：

        原始类型：number、 string、布尔 、null、undefined、symbol

        对象类型：object（数组、对象、函数等）

        es6新增类型：Symbol  表示独一无二的值

        es10新增类型：BigInt 可以表示任意大的整数

案例：

typeof 1n === 'bigint'; // true
typeof BigInt('1') === 'bigint'; // true

let a = 'hhh' //string
let b = 666   //number
let c = true //boolean
let d = null //null 
let e = undefined //undefined 
let f = {name:'maobuhui'} //object
let h = Symbol() //Symbol

ts中针对js原有类型的写法，直接在定义的时候加类型

let a:string = 'hhh'
let b:number = 666
let c:boolean = true
let d:null = null
let e:undefined = undefined
let f:object = {name:'maobuhui'}
let g:bigint = 100n
let h:symbol = Symbol()

ts新增的数据类型：

1、联合类型：同时定义多个类型

let a: string | number;
a= 'seven';
a= 7;

2、接口（Interfaces）定义对象

//定义：
interface videoItem {
  author: string
  authorIconSrc?: string //可选参数
}

//使用，格式必须和定义的接口一致，对象多一些属性，少一些都不行，除非加了 ？：的可传可不传
let tom: videoItem= {
    author: 'Tom'
};

3、数组类型

let a: number[] = [1, 1, 2, 3, 5]; //如果出现其他类型会报错

4、函数声明

5、类型断言

手动指定值的具体类型 

//使用类型断言
s = e as string
或者： 
s = <string>e

案例：
获取 DOM 元素的时候指定具体元素
const box = document.getElementById('img') as HTMLImageElement
指定了具体类型后 , 就可以使用 box.src 了

非空断言：  明确地知道对象的属性一定不会为空，可以使用非空断言 !

 console.log(inputRef.current!.value)

//正常情况下，通过document.getElementById获取元素，有可能获取不到，
但是加上!非空断言就表示是一定能获取到的

let a = document.getElementById('main')!

6、元组  元组是一种特殊的数组，可以限制数组的内容和长度。

基础用法

let x: [string,number]
x = ['a',123]
x = [123,'a']//error
x = [123,123,'a']//error

可选参数

let x:[string,number?]
x = ['a']
x = ['a', 123]

剩余元素

let x:[number,...string[]]
x = [123,"q","w","e"]

只读

let x:readonly[number,string] = [123,"q"]
//此时对x进行任何修改都会抛出异常

7、枚举

枚举使用 enum 关键字来定义

8、类：class，类的继承

ts的class类的使用与继承, es6新增的class类_浩星的博客-CSDN博客ts的class类的使用与继承, es6新增的class类https://blog.csdn.net/qq_41619796/article/details/129853838?spm=1001.2014.3001.5501

9、泛型

什么是泛型

        顾名思义就是多个类型 , TS 中指使用变量保存要使用的类型

泛型本质

        泛型本质是参数化类型 , 就是所操作的数据类型被指定为一个参数，这种参数类型可以用在类、接口和函数的创建中，分别成为泛型类，泛型接口、泛型函数

定义泛型函数 :

        function 函数名<类型参数> (形参:类型参数):类型参数{}

        在函数名称的后面写 <>(尖括号)，尖括号中添加类型变量
        类型变量相当于一个类型容器，能够捕获用户提供的类型(具体是什么类型由用户调用该函数时指定)
使用泛型函数

        方法1: const 返回值 = 函数名(实参) 类型推论实参的类型,传递给类型参数
        方法2 : const 返回值= 函数名<类型实参>(实参) 上述的非空断言就使用了此种方法
        此时的 <> 中的就是具体的类型

10、类型声明

//参数a,b,函数返回值的类型都申明为number类型，如果传参中有非number类型的数据，
则会显示红色波浪线
function sum(a: number, b: number): number {
    return a + b
}

console.log(sum(1, 9)); //10

//此处的a相当于const定义的，a的值永远为10
let a: 10;

//b的值只能为 'male'或者'female'
let b:     'male' | 'female'

//b的值只能为 boolean类型或者string类型
let c:     boolean | string

//any 表示任意类型，可以给d赋上任意类型的值(相当于对d关闭了TS的类型检测)
let d: any 
d = true
//等同于 let d

let s: string
s = d // d是any类型，s也变成了any类型（所以开发中尽量避免使用any）

//unknown 表示未知类型，也可以给d赋上任意类型的值
let e: unknown
e = 'hellow'

let s: string
//s = e 
// 语法检测不通过，因为s是string类型，e是unknown类型，它们类型不用，不允许直接赋值

//如果就是想把e的值赋给s，有两种解决办法
方法一：
    if(typeof e === "string") {
        s  = e
    }

方法二：
    // 使用类型断言
    s = e as string
        或者： 
    s = <string>e

// void 用来表示空，以函数为例，就表示没有返回值
function fn(): void {
}

function fn(): void {
    //return undefined
    //return;
    //return null
}

函数一旦报错就立即终止，never用的很少

// {} 用来指定对象类型
    let a: {name: string}
// a中有且只有name属性，且name值必须为string类型
    a = {name: '猪八戒'}

let b: {name: string, age?: number}
// b中必须有name属性，且name值必须为string类型；age可有可无；
b = {name: '猪八戒'}
    或者
b = {name: '猪八戒', age: 18}

let c: {name: string, [propName: string]: number}

// b中必须有name属性，且name值必须为string类型；剩余属性的个数，
属性名不做要求，但是必须是number类型

c = {name: '猪八戒', haha: 12, xixi: 99}

// () => {} 用来指定函数对象类型
let d: (a: number, b: number)=>number

//函数d只接收两个number类型的参数，且返回值必须为number类型
d = function(n1: number, n2: number): number {
    return n1 + n2
}

// [] 用来指定对数组类型
let a: number[]
等同于
let a: Array<number>
a = [1,3,6,5,9]

//tuple是元组（ts新增），元组表示固定长度的数组
let a: [string, number]
//数组a中只有两个元素，第一个为string类型，第二个为number类型
a = [1, '2']

//enum是枚举（ts新增）
enum Gender{
    male,
    female
}

let a: {name: string, gender: Gender}
a = {name: '猪八戒', gender: Gender.male} 

// & 表示同时
let a: {name: string} & {age: number}
等同于
let a: {name: string, age: number}
//对象a中必须同时有name和age，且类型为指定类型
a = {name: '猪八戒', age: 18}

//类型的别名 
type myType = 1 | 2 | 3 
let a: myType
let c: mType
a = 1, c = 3 
// a、c的值为1或2或3，都行

...更多请查看官网信息