首页 > 其他分享 >TypeScript

TypeScript

时间：2024-07-17 13:28:19浏览次数：14  
标签：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}|{......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99