ts-学习记录

基础类型

1. boolean
2. number
3. string
4. T[]  / Array[T] 数组

• 如：let a: string[]=[’s’] 或者 let a:Array[string]=[‘sf’]

5. [string,number] 元祖

• 如：let a:[string,number]=[‘sdf’,78]

6. any
7. void

• 如：function warnUser(): void {   }

8. null/undefined
9. never
10. object表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型。

对象

1. 匿名

function greet(person: { name: string; age: number }) {
  return "Hello " + person.name;
}

2.任何一个接口

interface Person {

  name: string;

  age: number;

}
function greet(person: Person) {

  return "Hello " + person.name;

}

3.类型别名

type Person = {

  name: string;

  age: number;

};

function greet(person: Person) {

  return "Hello " + person.name;

}

4.类型扩展

interface Colorful {
  color: string;
}

interface Circle {
  radius: number;
}

interface ColorfulCircle extends Colorful, Circle {}
const cc: ColorfulCircle = {
  color: "red",
  radius: 42,
};

5.交叉类型

type ColorfulCircle  = Colorful & Circle
function draw(circle: ColorfulCircle){}

或者
function draw(circle: Colorful & Circle) {}

6、通用对象类型--类型参数可能为多种类型的情况

interface Name<Type>{
  content:Type
}
let people:Name<string>{
  content:"张三"
}
people.content;

类型别名也可以

type Box<Type> = {
  contents: Type;
};

7、类型别名--通用帮助类型

type OrNull<Type> = Type | null;
type OneOrMany<Type> = Type | Type[];
type OneOrManyOrNull<Type> = OrNull<OneOrMany<Type>>;
//type OneOrManyOrNull<Type> = OneOrMany<Type> | null

8.调用签名 函数类型表达式语法不允许声明属性,描述带有属性的可调用的东西，我们可以在对象类型中写一个调用签名-- 对象里有可调用的方法

type ObjType={
  conut:number;
  (params:string):boolean;
}
function case(obj:ObjType){
  obj.count;
  obj('test')
}

9.构造签名 描述带有属性的可new出来一个新的对象的，我们可以在对象类型中写一个构造签名-- 对象里有可new的方法

type ObjType={
  conut:number;
  new (params:string):SomeObject;
}
function case(obj:ObjType){
  return new obj('Jack')
}

函数

1. 函数类型

function a(fn: (a: string) => void){}
或者
type FnType = (a: string) => void
function a(fn:FnType){}

2.通用函数

function test<Type>(arr: Type[]): Type | null{}

//约束---extends{size:string}
function test<Type extends{size:string}>(a: Type[],b: Type[]){
  if(a.size>b.size) return a
  return b
}//函数承诺返回与传递的相同类型的对象--不可以return {size:'asf'}

传参

•  函数传参设定默认值

function paintShape({ shape, xPos = 0, yPos = 0 }: PaintOptions) {}

• 函数传参的对象解构、解构后重命名、解构不存在的默认值赋值

function draw({ shape: Shape, xPos: number = 100 /*...*/ }){
Shape;
number;
}

元祖

• 解构元组

let stringHash: [string, number]=['sd',9]
const [inputString, hash] = stringHash;

• 元祖可以用可选属性 [number, number, number?]
• 静止元素的元组

type StringBooleansNumber = [string, ...boolean[], number];
const b: StringNumberBooleans = ["beautiful", true, false, 2];

function readButtonInput(...args: [string, number, ...boolean[]]) {
const [name, version, ...input] = args;
}
//基本等同于
function readButtonInput(name: string, version: number, ...input: boolean[]) {
}

• 元祖类型不会随意去赋值给其他变量

let point = [3, 4] as const;
let a=([x,y])=>{
   return x*y
}
a(point)❌不能保证`point`的元素不会发生突变

tip

• 可选属性:"?"---表示是否可选
• ReadonlyArray是一种特殊类型，描述了不应更改的数组。

const roArray: ReadonlyArray<string> = ["red", "green", "blue"];
或者  速记语法！！
const roArray: readonly string[] = ["red", "green", "blue"];

• readonly属性也可以通过同时引用该对象的变量进行更改！！！。

配置项

• strictNullChecks标记，null和undefined只能赋值给void和它们各自

formState的初始化一些写法

const formState = reactive<Values>({ title: '', description: '', modifier: 'public', });

const formState = reactive<Record<string, any>>({ 'input-number': 3, 'checkbox-group': ['A', 'B'], rate: 3.5, });

const modelRef = reactive({ name: '', region: undefined, type: [], });

interface FormState { 'date-picker': string;'range-picker': [string, string]}
const formState = reactive({} as FormState);

import type { UnwrapRef } from 'vue';
const formState: UnwrapRef<FormState> = reactive({ name: '', delivery: false, type: [] });

---------------interface----------------
//类型
interface Person {
  name: string;
  age: number;
}

//类型扩展
interface Colorful {
  color: string;
}
interface Circle {
  radius: number;
}
interface ColorfulCircle extends Colorful, Circle {}

//通用类型
interface Name<Type>{
  content:Type
}
let people:Name<string>{
  content:"张三"
}

-----------------type----------------
//类型
type Person = {
  name: string;
  age: number;
};

//静态元素的元祖
type StringBooleansNumber = [string, ...boolean[], number];

//交叉类型
interface Colorful {
  color: string;
}
interface Circle {
  radius: number;
}
type ColorfulCircle  = Colorful & Circle

//通用类型
type Box<Type> = {
  contents: Type;
};

//函数类型
type FnType = (a: string) => void

//调用签名
type ObjType={
  conut:number;
  (params:string):boolean;
}

//构造签名
type SomeConstructor = {
   new (s: string): SomeObject;
};
function fn(ctor: SomeConstructor) {
   return new ctor("hello");
}