首页 > 其他分享 >TS基础语法

TS基础语法

时间:2024-07-21 17:54:59浏览次数:7  
标签:string 基础 TS number 语法 let 类型 type

1. 类型注解

类型注解是 变量后面约定类型的语法,用来约定类型,明确提示

// 约定变量 age 的类型为 number 类型

let age: number = 18;

age = 19;

TS数据类型

TS 常用类型:

 

JS 已有类型

简单类型,number string boolean null undefined

复杂类型,对象 数组 函数

TS 新增类型

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

简单类型

完全按照 JS 的类型来书写即可

 

let age: number = 18;

let myName: string = '王小明';

let isEating: boolean = false;

let nullValue: null = null;

let undefinedValue: undefined = undefined;

 

复杂类型

数组类型

// 写法一:(推荐)

let numbers: number[] = [1, 3, 5];

// 写法二:

let strings: Array<string> = ['a', 'b', 'c'];

 

对象类型

let obj : {name:string,age:number} = {name:'jack',age:18}

 

let person: {

  name: string;

  sayHi(): void;

} = {

  name: 'jack',

  sayHi() {},

};

 

 

 

额外内容:

 

对象中的函数是箭头函数时

let person: {

  name: string

  sayHi: () => void

} = {

  name: 'jack',

  sayHi() {},

};

 

 

对象中的属性是可选时,关键字是 ? ,例如axios中的get请求method就是可以省略

// axios({url,method}) 如果是 get 请求 method 可以省略

const axios = (config: { url: string; method?: string }) => {};

 

函数类型

// 普通函数

function add1(a: number, b: number): number {

  return 1

}

// 函数表达式

const arr5 = function (a: number, b: number): number {

  return a + b

}

 

const add = (a: number, b: number): number => {

  return 1

}

// 箭头函数

const add2: () => string = () => {

  return '1'

}

const add3: (a: number, b: number) => number = (a, b) => {

  return 1

}

TS新增类型

1.联合类型

类型与类型之间使用 | 连接,代表类型可以是它们当中的其中一种,这种类型叫:联合类型

当数组中既有 number 又有 string 类型时,例如 arr=[‘1’,a] 这种,就要用到| 来连接了,写法是

 

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

 

再举个例子:

 

let arr=[

  {

    id: 1,

    name: 'jack',

    hobby: ['唱歌'],

    family: {

      mother: 'jack妈妈'

    }

  },{

    id: 2,

    name: 'rose',

    hobby: ['跳舞'],

    family: {

      mother: 'rose妈妈'

    }

  }

]

 

2.自定义类型(类型别名)type

类型别名:

 

type 类型别名 = 具体类型 基本语法

定义类型别名,遵循大驼峰命名规范,类似于变量

使用类型别名,与类型注解的写法一样即可

当同一类型(复杂)被多次使用时,可以通过类型别名,简化 该类型的使用

let arr: ( number | string )[] = [ 1, 'a', 4]

 

// 使用类型别名写法: type 类型别名 = 具体类型

type CustomArr = (number | string)[];

let arr: CustomArr = [1, 'a', 4];

let arr2: CustomArr = [2, 'b', 8];

 

2.1 type的交叉类型

使用 & 可以合并连接的对象类型,也叫:交叉类型

// 使用 type 来定义 Point2D 和 Point3D

type Point2D = {

  x: number;

  y: number;

};

 

// 使用 交叉类型 来实现接口继承的功能:

// 使用 交叉类型 后,Point3D === { x: number; y: number; z: number }

type Point3D = Point2D & {

  z: number;

};

 

let o: Point3D = {

  x: 1,

  y: 2,

  z: 3,

};

 

 

3. 接口 interface

interface 后面是接口名称,和类型别名的意思一样。

指定 接口名称 作为变量的类型使用。

接口的每一行只能有 一个 属性或方法,每一行不需要加分号。

使用 extends 实现接口继承,达到类型复用。

// 通过interface定义对象类型

interface Person {

  name: string;

  age: number;

  sayHi: () => void;

}

// 使用类型

let person: Person = {

  name: 'jack',

  age: 19,

  sayHi() {},

};

 

3.1 接口的extends 继承

接口继承的语法:interface 接口A extends 接口B {}

继承后 接口A 拥有 接口B 的所有属性和函数的类型声明

interface Point2D {

  x: number;

  y: number;

}

// 继承 Point2D

interface Point3D extends Point2D {

  z: number;

}

// 继承后 Point3D 的结构:{ x: number; y: number; z: number }

 

3.2 type和interface 的相同点与区别

关键的区别在于不能重新打开类型以添加新属性,而接口总是可扩展的。

 

interface type

支持:对象类型 支持:对象类型,其他类型

复用:可以继承 复用:交叉类型

它们都可以定义对象类型

它们都可以复用,interface 使用 extends , type 使用 &

type 不能重复定义,interface 可以重复定义但是会合并

详解不同的点:

 

type 不可重复定义

type Person = {

  name: string;

};

// 标识符“Person”重复 Error

type Person = {

  age: number;

};

interface 重复定义会合并

interface Person {

  name: string;

}

interface Person {

  age: number;

}

// 类型会合并,注意:属性类型和方法类型不能重复定义

const p: Person = {

  name: 'jack',

  age: 18,

};

 

4. 类型推断

在 TS 中存在类型推断机制,在没有指定类型的情况下,TS 也会给变量提供类型。

 

// 函数返回值的类型被自动推断为:number

const add = (num1: number, num2: number) => {

  return num1 + num2;

};

 

将来在开发项目的时候,能省略类型注解的地方就省略,充分利用TS推断 的能力,提高开发效率。

如果你不知道类型怎么写,可以把鼠标放至变量上,可以通过 Vscode 提示看到类型

5. 字面量类型

使用 js字面量 作为变量类型,这种类型就是字面量类型,使用字面量类型更加精确、严谨

 

let str1 = 'Hello TS';

const str2 = 'Hello TS';

// str1的字面量是string str2的字面量是'Hello TS'  

// 因为const声明的变量不能再改变,而str2 是 const 声明的,值只能是 Hello TS,所以类型只能是 Hello TS

 

再例如性别只有男和女

type Gender = '男' | '女'

let gender: Gender = '男'

gender = '女'

字面量类型配合联合类型来使用,表示:一组明确的可选的值

// 使用自定义类型:

type Direction = 'up' | 'down' | 'left' | 'right'

 

function changeDirection(direction: Direction) {

  console.log(direction)

}

 

// 调用函数时,会有类型提示:

changeDirection('up')

 

6. any

any 类型的作用是逃避 TS 的类型检查

 

显式any情况:当变量的类型指定为 any 的时候,不会有任何错误,也不会有代码提示,TS会忽略类型检查

let obj: any = { age: 18 }

obj.bar = '100'

const n: number = obj

console.log('n',n);

隐式any的情况:声明变量不给类型或初始值,函数参数不给类型或初始值

// 声明变量不给类型或初始值

let a;

// 函数参数不给类型或初始值

const fn = (n) => {}

 

7. 类型断言 -as

一种将变量或表达式的类型强制转换为开发者指定的类型的方式

 

使用 as 关键字实现类型断言也可以使用尖括号(<>)语法进行类型断言(不推荐)

关键字 as 后面的类型是一个更加具体的类型

使用场景 :消除类型检查错误、处理联合类型、处理any类型

这里,我们将一个any类型的变量str断言为string类型,并使用它的length属性获取字符串的长度。

 

// 1. 使用尖括号语法的类型断言:

let str: any = "hello";

let len1: number = (<string>str).length;

// 2.使用as语法的类型断言:

let str: any = "hello";

let len2: number = (str as string).length;

 

标签:string,基础,TS,number,语法,let,类型,type
From: https://blog.csdn.net/2301_79847249/article/details/140586715

相关文章

  • Python第九章(面向对象基础--属性,继承,dir查看,内存地址,权限等等和银行账户题目,圆的面积
    面向对象创造对象示例代码:类的名字用小驼峰命名法#编写Person类classPerson():passclassCat:#,小括号可以省略pass#对象名=类名per=Person()c=Cat()#小括号不能省略print(type(per))print(type(c))代码结果:<class'__main__.Person'><class'__mai......
  • 黑苹果macOS系统U盘版/恢复版基础安装教程
    因分为两种安装方式,本文主要介绍两种安装方式:U盘安装,以及在Windows下使用镜像恢复软件安装的方式。本文的操作方法支持Windows和macOS分别使用不同硬盘的安装方法。如果要安装成单个硬盘多系统的方式,注意你的分区结构。两种方法列举如下(OpenCore同样适用): U盘安装法:16GU......
  • Java基础之异常
    异常1.概述​代码出现了不正常的现象,在Java中每一个异常都是java一个一个的类,或者叫做异常对象2.异常体系说明Throwable:Error:错误类似于人得了癌症,不能通过处理让代码变正常,必须得重新写Exception:异常(所有异常的父类)类似于人得了感冒可以治疗,可以通过......
  • Leetcoede编程基础0到1——459.重复的子字符串 & 283.移动零 &1822.数组元素积的符号
    459.重复的子字符串给定一个非空的字符串 s ,检查是否可以通过由它的一个子串重复多次构成。示例1:输入:s="abab"输出:true解释:可由子串"ab"重复两次构成。示例2:输入:s="aba"输出:false示例3:输入:s="abcabcabcabc"输出:true解释:可由子......
  • 如何在 Selenium 的 find_elements 中仅排除某些子元素类
    我想要的<divclass="firstsecond"><p>gettext</p></div><divclass="firstsecondthird"><p>notgettext</p></div>对于上面类定义的html,我想使用selenium的find_elementscss选择器仅获取"get......
  • sql修炼笔记——基础操作指南篇
    基础操作指南1.新建数据库createdatabase·名称·(使用的是反引号,后者皆同)2.展示,showdatabases展示全部数据表3.数据类型INT --整数decimal(m,n)--有小数点的数如decimal(3,2)共三位数小数点占两位,如2.33varchar(n)最多存放n个字符blobBinarylargeobject图片影片档......
  • Java 基础学习第一节:初始 Java 及其安装
    第一节001.大项目贯穿学习能力动手能力耐心和毅力表达能力002.学习中碰到问题怎么办找同桌找同学找项目经理找讲师003.学习Java的窍门多想公司需要什么?熟练掌握这个东西的人.如何才能熟练呢?多练练学Java就像学车,天天看别人开车,自己无论怎么看都不会,必须亲自......
  • 第 10 节 函数的基础3
    函数1.生成式列表生成式即ListComprehensions,是Python内置的非常简单却强大的可以用来创建list的生成式。#需求:生成一个1~10的整数列表list1=list(range(1,11))print(list1)#[1,2,3,4,5,6,7,8,9,10]#需求:生成列表:[1*1,2*2,3*3,4*4,5*5,6*6,7*......
  • 如何修复“psycopg2.errors.InvalidDatetimeFormat:日期类型的输入语法无效:”-”
    我有一个Excel文件,其中包含不同的列和行,列的类型与日期不同。一些列表已使用pandas从xlsx文件导出,然后将这些列表压缩到一个名为result的列表。现在我想在PostgreSQL上插入该结果列表,但是当日期单元格的值为空并且还在我的models.py中,我已将datefiled设置为......
  • 1--Web安全、渗透测试、基础入门--数据包
    Web的组成架构模型1.网站源码2.操作系统windows,linux3.中间件(搭建平台)apache,tomcat等4.数据库access,mysql,oracle,sybase等Web相关安全漏洞1.Web源码类对应漏洞SQL注入,文件上传,XSS,代码执行,变量覆盖,逻辑漏洞,反序列化等2.Web中间件对应漏洞3.Web数据库对应漏洞4.......