【typescript入门】

类型断言as

let numArr = [1,2,3]
const result = numArr.find(item => item >2) as number //如果结果你认为最后是nuber可以这么写，需要人工干预，确定代码这么用是可以的
result *5

基础类型 string number boolean

let v1 : string = 'aa'
let v2 : number = 1
let v3 : boolean = true
let v4 ：string | number = 'a1'//(用类型注释方式使用联合类型 )
let v5: string | null = null //(如果打开配置项 strictNullChecks,就不能随意将null分配给其他类型,就需要这么写来做标记)
let v6 : 1 | 2| 3 = 2//还可以限制值

数组

两种写法

let v5 : number[] = [1,2,3]
let v6 : Array<number> = [1,2,3]

元组

也可以存储很多数据，但是限制了存储数据的个数以及每个数据类型

let t1 : [number,string,number?] = [1,'a']
t[0] = 1
//并不是说必须

枚举 enum

enum MyEnum {
	A,
	B,
	C
}
console.log(MyEnum.A)
console.log(MyEnum[0])

any

当你不希望某个特定值导致类型检查错误时，可以使用它
当一个值的类型为 any 时，你可以访问它的任何属性（这又将是 any 类型），像函数一样调用它，将它分配给（或从）任何类型的值，或者几乎任何其他东西这在语法上是合法的：

let obj : any = { x: 0 }
obj.foo();
obj();
obj.bar = 100;
obj = "hello";
const n: number = obj;

void

只能接受undefined 通常用于函数没有返回值的时候

函数

可选的参数必须在所有必选的后边 没有返回值可以用void

// age?: number  表示参数是可选的   可以设置默认值
function fun1(name = 'qa' , age?: number) : number{
return 100
}
function fun1(name: string , age?: number, ...reset: number[]) : void{
  console.log(1111)
}
const aa = fun1('aa',20,1,2,3,4)

类型别名 type

一般我们都是用类型注释的形式声明类型。希望多次使用同一个类型并用一个名称引用它，类型别名正是这样的

type Point = {
  x: number;
  y: number;
};
function printCoord(pt: Point) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
printCoord({ x: 100, y: 100 });
type MyUserName = string | number
let a : MyUserName = 10

接口 interface

接口声明是命名对象类型的另一种方式

interface Point {
  x: number;
  y: number;
}
const cc :Point = {
	x: 1,
	y: 1,
}
function printCoord(pt: Point) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
printCoord({ x: 100, y: 100 });

类型别名和接口的区别

类型别名和接口非常相似，在很多情况下你可以在它们之间自由选择。interface 的几乎所有功能都在 type 中可用，主要区别在于无法重新打开类型以添加​​新属性，而接口始终可扩展
建议一般能用interface就用它，interface解决不了用类型别名

泛型

function myFn<T> (a:T,b:T) :T[] {
	return [a,b]
}
myFn<number>(1,2)
myFn<string>('a','b')
myFn('a','b')//支持类型推断，他会按照'a'来推断类型

使用

vue3在types创建index.ts定义

interface PersonInter {
name:string,
id:string,
age:number
}
type Persons = Array<PersonInter>
//引入时

import { type PersonInter } from '@/types'
let person : PersonInter = {name:'张三'，id:'123123',age:15}
let personList : Array<PersonInter> = [
{name:'张三'，id:'123123',age:15},
{name:'李四'，id:'122222',age:35},
{name:'王五'，id:'11111',age:60}
]//定义一个数组，数组每一项都符合PersonInter规范
//声明reactive对象应如下方式
let personList = reactive<Persons>([
  { age: 18, id: '001', name: 'why' },
  { age: 19, id: '002', name: 'kobe' },
  { age: 20, id: '003', name: 'james' }
])