TS写法,一看就会

最新推荐文章于 2023-11-27 15:09:29 发布

只会cv的小前端

最新推荐文章于 2023-11-27 15:09:29 发布

阅读量1k

点赞数 1

分类专栏： typescript 文章标签：前端 javascript typescript

本文链接：https://blog.csdn.net/wancc123/article/details/131633315

版权

typescript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

基础类型赋值

let a:number = 10;

let b:string = '测试';

let c:boolean = true;

let d:null = null;

let a:undefind= undefind;

let a:number[ ]=[ 1,1,1,1 ];

let a:string[ ] =[ 's','s','s' ];

let c:boolean [ ]=[ false,true ];

联合类型

let a:(string|number)[ ] = [ 1,'s',1,'s' ];  

let a:string|number[ ] = '可以是字符串或者数组';

let a:string|number[ ] = [ 13,14 ];

类型别名 type关键字来取名 custom 随便取的

type custom = (number|string)[ ]; 

let a:custom =[1,'s',1,'s'];

函数类型同时指定了参数和返回值类型缺一不可不能不返回和不传参

1、指定参数和返回值的类型

function add(num1:number,num2:number):number{
 return num1+num2;
}
// 规定只能传入 数字类型  并且返回参数为数字类型的值
console.log(add(1,2)); // 3

2、箭头函数写法

const add:(num1:number,num2:number)=>number= (num1,num2)=>{
    return num1+num2;
}

3、void 类型函数没有返回值那么返回值

funciton  greet(name:string):void{
    console.log(name);
}

function processArray(arr: (string | number)[]): void {
  // 在此处编写处理数组的逻辑
}

4、函数类型可选参数在可传可不传参数名称后面加 ?

// 注意：可选参数只能出现在必填参数后面，不能出现在必填参数前面
function myslice(start:number,end?:number):void{
   console.log(start,end);
}

对象类型

let obj:{
    name:string;
    age:number;     // 分号隔开
    sayHi(age:number):void;	
  }={
    name:'jack',
    age:19,
    sayHi(age){
      console.log(age);
     }
}

let obj:{
    name:string;
    age:number;
    sayHi:(age:number)=>void;  // 也可以这样写
  }={
    name:'jack',
    age:19,
    sayHi:(age)=>{
      console.log(age);
     }
}

对象可选属性


```cpp
let obj:{
    name?:string;
    age:number;
    sayHi:(age:number)=>void;
  }={
    age:19,
    sayHi(age){
      console.log(age);
     }
}

function myAxios(config:{url:string;method?:sting}):void{
     console.log(config);
}

myAxios({
   url:'https://xxxx.com'
})

接口类型

// 当一个对象类型  多次被使用  一般会使用接口 interface来描述对象类型  达到复用

// 没有分号隔开
interface IPerson {
  name:string
  age:number
  sayHi():void
}

let person:IPerson={
    name:'jack',
    age:12,
    sayHi(){
    
     }
}

// 接口interface 和 type 类型别名 的对比
// 相同点： 都可以给对象指定类型
// 不同点： 接口，只能为对象指定类型；类型别名，可以为任意类型指定别名

interface IPerson {
  name:string
  age:number
  sayHi():void
}

type IPerson = {
  name:string
  age:number
  sayHi():void
}

type NumStr = number | string

接口继承 extends

interface point2d {
  x:number
  y:number
}


interface point3d {
  x:number
  y:number
  z:number
}
point3d跟point2d有公共部分

那可以写成

interface point3d extends point2d {
   z:number
}

元组

使用场景：
	1、在地图中，使用经纬度来标记位置信息
	let position:number[ ]=[ 39,116 ]
	这种写法缺点是不够严谨，该类型数组中可以出现多个任意的数字
 	更好的方法是使用元组  Tuple
	
	let position:[number,number]=[39,116]

   	元组就是确切说明有多少个元素，以及元素类型

类型推论

在 TS 中，某些没有明确指出类型的地方，TS 的类型推论机制会帮助提供类型，换句话说:由于类型推论的存在，这些地方，类型注解可以省略不写!
发生类型推论的2 种常见场景:
1 声明变量并初始化时 
2 决定函数返回值时

1 、 let age =18; ts自动判断类型为number   那就不用写
2 、 function add(num1:number,num2:number) {
      return num1+num2;
    }
     ts自动判断函数返回类型为number  那就不用写函数返回

类型断言 as

<a href="http://www.com" id="link">链接</a>

const aLink = document.getElementById('link') as HTMLAnchorElement;

技巧：在控制台，console.dir()打印DOM元素 ，属性列表最后面即可看到该元素类型

还有一种不常用的写法，知道即可
  const aLink =<HTMLAnchorElement>document.getElementById('link') ;

字面量类型

let str1 = '测试';
const str2 = '测试';

str1 使用 let 定义的  所以是  string类型
str2 使用const定义的   所以类型就是  '测试'  ，也就是一个字面量类型

let age:18=18;  这样写  age类型就是18  age不能赋值等于其他
let name:'jack'='jack';

使用场景举例：（用来表示一组明确的可选值列表）

定义一个函数  控制游戏方向

function changeDirection (direction: 'up' | 'down' | 'left' | 'right') {
 console.log(direction)
}

相比于 direction:string,  字面量写法更加的精确、严谨

枚举 enum 类似于字面量类型+联合类型的组合也可以用来表示一组明确的可选值

约定枚举名称、枚举中的值 以大写字母开头
enum Direction { Up , Down , Left , Right } 

function changeDirection (direction:Direction ){
   console.log(direction)
}


解释：
使用enum关键字定义
约定枚举名称、枚举中的值 以大写字母开头
多个值直接逗号隔开
定义好后，直接使用枚举名称作为注解

使用
changeDirection (Direction.Up)
实参的值就是枚举Direction 成员的任意一个，可以用对象的方法拿到

问题 ：我们把枚举成员 作为函数实参 那他的值是什么

Direction.Up=0 默认的
枚举成员是有值的 默认从零开始自增长
我们把成员值为数字的枚举称为  数字枚举

当然也可以初始化默认值

enum Direction { Up=18 , Down=4 , Left=5 , Right=1 } 

enum Direction { Up=5 , Down , Left , Right } 这样  Down为6 Left为7  Right为8

enum Direction { Up=5 , Down , Left , Right=1 } 这样  Down为6 Left为7  Right为1

字符串枚举 
enum Direction { Up='up', Down='down' , Left='left' , Right='right' }
注意：字符串没有自增长行为 因此每个成员都必须有初始值

any 类型

一般不推荐使用  any 

any  代表该值可以为任意值 随意操作 不会有代码提示

let a:any =  12;
a='测试'；

function add(num:any):any{
   return 'ssss'
}
add('随缘')

除非临时使用any来避免书写很长、很复杂的类型  不然不推荐使用

typeof

可以在类型上下文中引用变量或者属性的类型  

根据已经有的变量的值，获取该值的属性类型，来简化类型书写

let p ={x:1,y:2}; 

interface obj { 
   x:number
   y:number
}

function add (point:obj):void {}

add(p)

简写 
let p ={x:1,y:2}; 

function add(point:typeof p):void{ } 那么add接收参数类型就跟p一样  也是数字类型的对象

add({x:2,y3})

let num:typeof p.x;

typeof只能查询变量或者属性的类型，无法查询其他形式的类型（比如，函数调用的类型）

高级类型

class类

class Person { }

const p = new Person ( ) ;  那么 p  相当于   const p:Person;

class Person2 { 
    age:number
    name:string='jack'
    gender='男'
}
const p2 = new Person2 ( )   ; 
p.name

没有初始值  要声明 类型 
有初始值 可以不用

class Person3 { 
    age:number
    name:string
    constructor(age:number,name:string) { 
     this.age = age;
     this.name = name;
    }
}
const p3 = new Person3 (18,'jack')   ;  必须有初始值
成员初始化后，才可以通过this.age来访问

需要为构造函数指定注解类型，否则会被隐式推断为any,构造函数不需要返回值类型

class Point {
  x=10
  y=10
  scale (n:number):void {
       this.x*=n
         this.y*=n
     }

}

const p4= new Point ()   ;  
p4.scale(10);

console.log(p.x,p.y)

继承

extends  继承父类   implements 实现接口

class Animal { 
      move ( ){  console.log('Moving') }
 }
class Dog  extends Animal {
    bark ( ){ console.log( '汪' ) }
}

const  dog = new Dog(  )

dog.move( )
dog.bark( )

implements 接口

interface Singable {
 name:string
  sing():void
}

class Person implements Singable {
         
   name='jack'
    sing( ){
      console.log('弟弟')
     }
}

class  拥有的特点  public 公有的    protected 受保护的    private 私有的

class  Animal {
  public move( ) {
    console.log('谁都可以访问，public是默认的，一般都是省略')  
  }
 protected again ( ){
   console.log('受保护的，只对其声明所在类和子类中可见')  
  console.log('只能通过this来访问')  
  }
  private myself( ){
  console.log('私有的，只有自己可见')  
  } 
 
}
class  Dog  extends Animal{
    bark( ) {
    this.again( )
    console.log('只能通过this来访问受保护的')  
  }
}
const a = new Animal ();
const b = new Dog ();

a.move( );
b.again()  报错

还有 readonly  只读  防止在构造函数之外对属性进行赋值

class  Person {
   readonly age:number==18
   constructor (age:number){ 
     this.age=age  报错 不能更改
   }
   setAge ( ){ 
     
   }
}
interface IPerson {
  readonly name:string
}
let obj:IPerson = {
   name:'jack'
}

obj.name = 'ssss'  报错

兼容性

class Point {
 x:number
 y:number
}

class Point2d{ 
  x:number
  y:number
}

const p:Point = new Point2d( )

参数少的兼容参数多的，成员多的可以赋值给少的

class Ap {
  x:number
  y:number
}

class Ab{
  x:number
  y:number
  z:number
}

const p:Ap = new Ab( )

接口interface也类似、并且接口跟class类也互相兼容

函数兼容性：考虑参数个数、参数类型、返回值类型

参数个数：参数多的兼容参数少的，也就是参数少的可以给参数多的赋值

type F1 = (a:number)=>void

type F2 = (a:number,b:number)=>void

let f1:F1
let f2:F2 = f1

返回值的兼容
type F5 = ()=>string
type F6 = ()=>string
let f5:F5
let f6:F6=f5
返回值是原始类型，那么两个类型需要相同

type F7 = ()=>{ name:string }
type F8 = ()=>{ name:string,age:number }

let f7:F7
let f8:F8
f7 = f8
f8=f7 错误示例
返回值是对象类型的，成员多的可以赋值给成员少的，不能返过来