TS学习——第一天

TS类型：

ts在线测试地址地址

TS基础数据类型——12种

Boolean类型
true/false值
const bool:boolean = true;

Number类型
//都是浮点数，支持十进制和十六进制字面量，也支持二进制和八进制字面量。
const num:number = 20;

String类型
const str:string = 'string';

Enum类型（枚举）
enum Color { RED,BLUE,ORANGE}//默认情况下，从0开始为元素编号，后续的按顺序自动+1
//red为Color类型，值为Color类型的RED
const blue:Color = Color.BLUE;//1
//设置初始值
enum Color { RED=3,BLUE,ORANGE}//后续的按顺序自动+1
const blue:Color = Color.BLUE;//4
//字符串
enum Color { RED='红色',BLUE='蓝色',ORANGE='橙色'}
const blue:Color = Color.BLUE;//蓝色
//数组,
const enum Color { RED='红色',BLUE='蓝色',ORANGE='橙色'}
const blue:Color[] = [Color.BLUE,Color.RED,];//[蓝色,红色]

Array类型
//方式一
const arr:number[] = [1,2,3];//数组里面只能包含number类型的值
//方式二
//Array<number>:数组泛型
const arr:Array<number> = [1,2,3];//数组里面只能包含number类型的值

Tuple类型（元组）
//表示一个已知元素数量和类型的数组，各元素的类型不必相同，数组里面可以包含不同类型的值
//数组元素数量已知，对应类型也是已知，诺诗未知，建议使用any[]
const arr:[number,string] = [1,'string'];

Null/Undefined类型
//非严格类型下 null 和 undefined 是所有类型的子类型，可以复制给其他类型
const str:string = undefined
//tsconfig.json中"strictNullChecks":false//true为严格类型
//严格类型下， null 和 undefined 只能给自己对应的类型赋值
const n:null = null;
const u:undefined = undefined;

Any类型
//类型检查会跳过any类型，任何类型的值都可以赋给any类型
let res:any = 'string';
str = 12;

Void类型
//无效的，用于函数，表明该函数没有返回值
const fun= ()=> void {}
function func():void{}

Never类型
//never类型表示永不存在的值的类型。如肯定会抛出异常的函数（有异常就不会有返回值）和没有返回值的函数或者内部是死循环的函数
function hasErr(msg: string): never {
  throw new Error(‘异常’); 
}
// 死循环
function isWhile(): never {
  while (true) {};//没有返回值
}

Unknown类型
//与any类型一样，所有类型的值都可以赋给unknown
//两者区别：任何类型的值<==>any类型。任何类型的值都可以赋值给unknown类型，但unknown类型只能赋值给unknown和any
//any类型
let any:any = 'string';
const num:string = any;
any = 123;
//unknown类型
let un:unknown='1111';
un=123456
const str:string = un;//报错，unknown类型的值不能赋给除unknown和any类型之外的类型
const any:any=un;
const unkn:unknown=un;

TS引用数据类型——4种

object类型（object，Object ，{}）

object类型（o小写）
//object类型用于所有的非原始类型，number、string、boolean等类型不能赋值给 object。
let obj:object;
obj=1;//报错
obj='1';//报错
obj=false;//报错
obj=null;//严格模式下会报错，非严格模式不会
obj=undefined;//严格模式下会报错，非严格模式不会
obj=[];
obj={};
obj=function(){}

Object类型（o大写）和{}类型
//拥有toString、hasOwnProperty 方法的类型的所有类型都可以
let obj:Object;
obj=1;
obj='1';
obj=false;
obj=null;//严格模式下会报错，非严格模式不会
obj=undefined;//严格模式下会报错，非严格模式不会
obj=[];
obj={};
obj=function(){}

Class类型

//class类型用'class'
class Person {
    name:string;
    age:number;
    gender:string;
    constructor(name:string,age:number,gender:string){
        this.name = name;
        this.age = age;
        this.gender = gender;
    };
    sayHi():void{
        alert(`hi!,i am${this.name},i am ${this.age}`);
    }
}
const zz = new Person('张三',20,'男');
zz.sayHi();

数组类型

const arr:number[]=[1,2,3,5,1,'6']//报错:Type 'string' is not assignable to type 'number'.可以将number改为any即可
const arr:[number,string]=[1,'6']//正确
const arr：Array[number] = [1,2,3,4,5]

函数类型
函数定义：

方式一：函数声明
function add():void{//无返回值
    console.log('函数声明')
}
//y?:number:表示y可传可不传
//x:number = 0:x为number类型，不传x时，默认值为0
//可选操作'?'和设置默认值操作'='不能同时使用，会报错。
function add(x:number = 0,y?:number):number{//接受两个number型参数，返回number型结果
    return y ? x*y : 0;
}
方式二：函数表达式 
const sub = ():void=>{//无返回值
    console.log('函数表达式声明sub')
}
const sub = (x:number = 10,y:number = 5):number=>{//有返回值
    return x>y ? x-y : x+y;
}
//剩余参数:...
function add(...num:number[]):number{
    let sum:number=0;
    for(let i=0;i<num.length;i++) {
        sum+=num[i];
    }
    return sum
}
const result = add(1,2,4,5,6,7)

接口：interface

接口用来定义（约束）对象的类型，用来指定对象的属性以及方法。

interface Person {
    readonly name:string;//readonly：设置属性只读，不能更改
    age:number;
    gender?:string;//可选
    sayHi():void;//无返回值
    [prop: string]: any;//索引签名，用来设置任意属性/自定义属性,prop只能是 string或者number类型。 值是any类型
}
const p:Person ={
    sex:'男'//报错：Type '{ sex: string; }' is not assignable to type 'Person'. Object literal may only specify known properties, and 'sex' does not exist in type 'Person'.sex属性在Person中未定义
    //gender:'男',//接口定义时有?，所以可不设置
    name:'zs',
    age:18,
    sayHi():void{
        console.log('hi')
    },
    height:180
}
p.name = 'ls'//报错：Cannot assign to 'name' because it is a read-only property.

泛型

泛型：在定义函数、接口或类的时候，不直接指定具体的类型，在使用的时候再指定类型。

//常规写法
function func(x:number,y:number):number{//定义好参数类型和返回类型
    return x+y
}
func(10,20)
//使用泛型写法
function func<T>(arg:T,):T{
    return arg
}
func<number>(10)