首页 > 其他分享 >TypeScript

TypeScript

时间:2024-07-17 13:28:19浏览次数:15  
标签:Direction TypeScript string age number 类型 class

TypeScript

TypeScript

简介

1.ts是js的超集,在js的基础上,添加了类型支持(:表示)

2.ts属于静态类型(编译期做类型检查)的编程语言,减少不同类型的赋值错误(意外行为),js属于动态类型(执行期进行类型检查)

3.可维护,减少bug,有错误代码提示,支持最新es语法

4.ts编译生成的js文件,代码中就没有类型信息了(大部分)

5.类型推断机制,不需要在每个地方都显示标注类型

使用ts

1.npm i -g typescript 命令查看版本tsc - v 解析ts文件命令 tsc hello.ts 执行node hello.js

2.简化操作 npm i -g ts-node 执行 ts-node hello.ts

类型注解

JS已有类型

1.原始类型:number/string/boolean/null/undefined/symbol

  • let age:number = 18 约定age的类型只为number类型,赋其他类型会提示错误

2.对象类型:object(包括,数组,对象,函数等对象)

2.1数组类型(推荐number[])

  1. let numbers:number[] = [1,3,5]
  2. let strings:Array<string> = [‘a’,‘b’,‘c’]

2.2联合类型的数组类型

  1. let arr:(number|string)[] = [1,‘a’,2,‘b’]

2.3函数类型(参数返回值的类型)

  1. 单独指定参数,返回值的类型

    • function add(num1:number,num2:number):number{ return num1 +num2 }
    • const add = (num1:number,num2:number):number=>{ return num1 + num2}
  2. 同时指定参数、返回值的类型

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

    注意:这种形式只适用于函数表达式

  3. 没有返回值的函数,返回值类型为void

    • function greet(name:string):void{ console.log(‘hello’,name) }
  4. 函数可选参数

    • function mySlice(start?:number,end?:number):void{ console.log( ‘起始索引’,start,‘结束索引’,end) }

    注意:可选参数只能出现在参数列表的最后,没有给的参数打印为undefined

2.4对象类型(属性方法的类型)描述对象的类型

  1. 定义对象

    • let person:{ name:string;age:number;sayHi(name:string):void } = { name:‘jack’,age:19,sayHi(){} }

    注意:在一行代码中指定多个属性类型时,使用分号;来分隔

    如果一行代码只指定一个属性类型,通过换行来分隔,可以去掉分号

    函数可以使用箭头函数形式sayHi:()=>void

  2. 对象以函数参数形式(可选属性和可选参数的语法一致)

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

TS新增类型

联合类型,自定义类型(类型别名)、接口、元组、字面量类型、枚举、void、any等

1.类型别名type

type CustomArray = (number|string)[]

let arr1:CustomArray = [1,‘a’,2,‘b’]

2.接口interface(某个对象类型多次使用的时候,复用

// 换行  可加可不加分号
interface IPerson{
    name:string;
    age:number;
    sayHi():void;
}
// 定义对象的时候直接使用
let person:IPerson ={
    name:'jack',
    age:19,
    sayHi(){}
}

重点:interface只能为对象指定类型,而type可以为任意类型指定别名

3.元组类型(规定数组中有几个数据,例如经纬度)

let position:[number,number] = [39.5427,116.2317]

4.字面量类型

  1. let str1 = “Hello TS” 类型推论str1为string类型

    const str2 = ‘Hello TS’ 类型推论str2为’Hello TS’字面量类型,因为const是常量

    注意:除了字符串以外,任意的JS字面量(比如对象,数字等)都可以作为类型使用

  2. 场景:配合联合类型,用来表示一组明确的可选值列表,比如贪吃蛇游戏中的方向,比string类型更加严谨

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

5.枚举类型enum(类似字面量+联合类型)推荐使用字面量+联合类型

5.1数字枚举(成员的值为数字)

定义一组命名常量,枚举中的值用大写字母开头

enum Direction { Up, Down, Left, Right }
// 直接使用
function changeDirection(direction:Direction){
    console.log(direction)  
}

访问枚举成员(通过点(.)语法):

changeDirection(Direction.Up)   //  Direction.Up的值为0  //打印为0


// 可以给枚举中的成员初始化值
enum Direction { Up=10,Down,Left,Right }

注意:数字枚举成员是有值的,默认为:从0开始自增的数值

5.2字符串枚举(成员的值为字符串)

enum Direction{
	Up = 'UP',
	Down = 'DOWN',
	Left = 'LEFT',
	Right = 'RIGHT'
}

5.3枚举特性

  1. 由于枚举不仅用于类型,还提供值,是TS为数不多的非JavaScript类型级扩展(不仅仅是类型)的特性之一
  2. 枚举类型会被编译为JS代码,其他的类型会在编译为JS代码时自动移除
enum Direction{
	Up = 'UP',
	Down = 'DOWN',
	Left = 'LEFT',
	Right = 'RIGHT'
}

// 编译为
var Direction;
(function(Direction){
	Direction["Up"] = "UP";
	Direction["Down"] = "DOWN";
	Direction["left"] = "LEFT";
	Direction["right"] = "RIGHT";
})(Direction || (Direction = {}));

注意:字符串枚举成员没有自增长行为,所以每个成员必须有初始值

6.any类型(任何类型)

  • 隐式具有any类型的情况
    1. 声明变量不提供类型也不提供默认值
    2. 函数参数不加类型

注意:临时给类型,可以先给any

7.接口的继承(extends)

interface Point2D { x:number;y:number }
interface Point3D { x:number;y:number;z:number }

// 将公共的属性和方法抽离出来,通过继承来实现复用

interface Point2D { x:number;y:number}
interface Point3D extends Point2D { z:number }

8.类型推论(推断)

省略不写类型注解,类型推论机制会帮助提供类型

1.声明变量并初始化时2.决定函数返回值时

let age = 18
// ts自动推断出变量为number类型
function(num1:number,num2:number){ return num1 + num2 }
// number类型+number类型  推断出返回也是number

9.类型断言(指定更具体的类型)

<a href="http://www.itcast.cn/" id="link">传智教育</a>
const alink = document.getElementById('link')
console.log(alink)   // 打印出标签<a href="http://www.itcast.cn/" id="link">传智教育</a>
//类型太宽泛(不具体),无法操作href等a标签特有的属性或方法

//使用类型断言指定更加具体的类型
const alink = document.getElementById('link') as HTMLAnchorElement
另一种方法
const alink = <HTMLAnchorElement>document.getElementById('link')

注意:getElementById方法返回的类型时HTMLElement,该类型只包含所有标签的公共属性或方法,不包含a标签特有的href等属性。HTMLAnchorElement是HTMLElement的子类型,更具体

技巧:在控制台中,通过console.dir()打印DOM元素,在属性列表的最后面,即可看到该元素的类型。

个人认为:适合用于事件委托

9.typeof操作符

9.1在JS中用于获取数据的类型

console.log( typeof “Hello world” ) // 打印为 string 数组和对象都是object

9.2在TS中,可以在类型上下文中引用变量或属性的类型(类型查询

根据已有变量的值,获取该值的类型,来简化类型书写 函数参数举例

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

function formatPoint(point:{x:number;y:number}){}
formatPoint(p)

function formatPoint(point : typeof p){ } formatPoint§

注意:typeof只能用来查询变量或属性的类型,无法查询其他形式的类型(比如,函数调用的类型)

Typescript高级类型

class类型,ts全面支持es2015中引入的class关键字,并为其添加了类型注解和其他语法(如,可见性修饰符等)

根据ts中的类型推论,可以知道Person类的实例对象p的类型为Person

ts中的class,不仅提供了class的语法功能,也作为一种类型存在

class Person {
  age:number
    //类型推论,不用加类型注解
  gender ='男' 
    // gender:string = '男'
} 

const p =  new Person()  
// constructor 是一种用于创建和初始化 class 对象实例的特殊方法。
class Person {
    // 成员初始化,才可以通过this.age来访问实例成员
    age:number
    gender:string
    // 需要为构造函数指定类型注解,否则隐式any、另外,构造函数不需要返回值类型
    constructor(age:number,gender:string){
        this.age = age
        this.gender = gander
    }
}

实例方法

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

1.class类继承

1.1extends(继承父类) JS中

class Animal {
    move(){
        console.log('Moving along')
    }
}

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

const dog = new Dog()

实例对象dog同时有了父类Animal和子类Dog的所有属性和方法

1.2implements(实现接口) TS

interface Singable{
    sing():void
}
class Person implements Singable{
    sing(){
        console.log('你是我的小鸭')
    }
}

Person类实现接口Singable意味着,Person类中必须提供Singable接口中指定的方法和属性

2.可见性修饰符(类成员可见性)

使用Ts来控制class的方法和属性对于class外的代码是否可见

2.1public(公有的),任何地方都可以访问,可直接省略,默认可见性

class Animal {
    public move(){
        console.log('Moving along')
    }
}

2.2protected(受保护的),对其声明所在类和子类中(非实例对象)可见

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

在子类的方法内部可以通过this来访问父类中受保护的成员,但是,对实例不可见!
const d = new Dog()
// 实例对象p不能调用move方法

2.3private(私有的,只有在当前类中可见),对实例对象以及子类也是不可见的

class Animal{
    private move() { console.log('Moving along') }
    walk(){
        this.move()
    }
}

3.只读修饰符

3.1readonly:表示只读用来防止在构造函数之外对属性进行赋值

class Person {
    readonly age:number = 18
    constructor(age:number){
        this.age = age
    }
}

注意:readonly只能修饰属性不能修饰方法;

​ 属性age后面的类型注解,如果不加,则age的类型为字面量类型18

​ 接口或者{}表示的对象类型,也可以使用readonly

标签:Direction,TypeScript,string,age,number,类型,class
From: https://blog.csdn.net/weixin_53649241/article/details/140381657

相关文章

  • TS 入门(四):TypeScript 高级类型与类型操作
    目录前言回顾1.联合类型和交叉类型a.联合类型b.交叉类型2.字面量类型3.类型断言4.类型兼容性5.类型守卫a.`typeof`类型守卫b.`instanceof`类型守卫c.自定义类型守卫扩展知识点:类型映射(MappedTypes)结语前言在前三章中,我们介绍了TypeScript的基础知识......
  • Typescript 中 interface 和 type 的区别
    在TypeScript中,interface​和type​是用来描述对象结构或类型的两种主要方式,它们有一些区别和各自的特点。Interface(接口)定义方式:使用interface​关键字定义,例如:interfacePerson{name:string;age:number;}适用场景:主要用于描述对象的形状(Sh......
  • TS 入门(五):TypeScript接口与类
    目录前言回顾高级类型与类型操作1.接口a.基本接口b.可选属性和只读属性c.函数类型接口d.可索引类型e.接口继承2.类a.基本类b.类的成员(属性和方法)c.构造函数d.继承和派生类e.公有、私有和受保护的修饰符f.静态属性和方法g.抽象类扩展知识点:接口与类的结合......
  • vue3+element-plus+typescript
    1.vue3+ts+elementui-plushttps://blog.csdn.net/qq_41737571/article/details/1390730852.自动调整font-size大小https://blog.csdn.net/qq_41737571/article/details/1401586143.简单小众电商购物项目模板:基于Vue3和Vant4的纯前端开发方案https://web-hls.blog.csdn.......
  • vite react Typescript 构建一个移动端网页
    使用Vite、React和TypeScript来构建一个移动端网页是一个高效且现代的开发方式。Vite是一个构建工具和开发服务器,它利用原生ES模块导入来提供快速的冷启动和即时模块热更新(HMR)。React是用于构建用户界面的JavaScript库,而TypeScript是JavaScript的一个超集,它添......
  • TypeScript中的交叉类型
            交叉类型:将多个类型合并为一个类型,使用&符号连接。typeAProps={a:string}typeBProps={b:number}typeallProps=AProps&BPropsconstInfo:allProps={a:'小月月',b:7}        我们......
  • TypeScript的类型谓词与控制流分析
    目录ts封装类型判断的问题类型谓词TypeScript的“控制流分析”ts封装类型判断的问题在union.d.ts中全局声明一个DataTypedeclaretypeDataType=|"RegExp"|"Object"|"Array"|"Function"|"String"|"Boolean"|"......
  • TypeScript笔记(一)
    一、TypeScript=Type+JavaScript  在JS基础上,为JS增加了类型支持。TS属于静态类型的编程语言,在编译期间做类型检查,可以在代码编写期间发现问题,减少调试时间。TS相比JS的优势:1、更早的发现错误,减少调试时间;2、代码提示;3、提升可维护性;4、ECMAScript;5、TS有类型推断......
  • zustand Auto Generating Selectors/ts-pattern/swr/TypeScript在monorepo项目中实现
    zustandAutoGeneratingSelectorshttps://docs.pmnd.rs/zustand/guides/auto-generating-selectorsts-pattern替换匹配组件代swrTypeScript在monorepo项目中实现即时更新https://colinhacks.com/essays/live-types-typescript-monorepomonorepodocker项目名:my-project......
  • typescript 进阶(一)
    前言本文主要记录个人在使用typescript时的一些用法,介绍typescript。建议在阅读前先了解typescript的基础语法。互斥键的类型在ts官网的联合类型文档中有这样一种情况:typeShape=|{kind:"circle";radius:number}|{kind:"square";x:number}|{......