首页 > 其他分享 >[TS手册学习] 01_基础、常见类型与概念

[TS手册学习] 01_基础、常见类型与概念

时间:2023-11-29 18:12:08浏览次数:41  
标签:01 GET req number TS 类型 手册 method

TS官方Handbook: TypeScript: Handbook - The TypeScript Handbook (typescriptlang.org)

基础

相关概念

  • 运行时错误:JS 的大多数错误都只能在运行的过程中被发现。

  • 静态类型系统:TS 可以在运行代码之前发现错误。

  • 非异常失败:例如在 JS 中访问一个对象不存在的属性,不会导致异常,而是返回undefined,这种情况就是非异常失败,容易被忽略。

  • 类型工具:TS 可以通过类型声明,在访问变量或者其它属性的时候提供代码补全和错误信息提示。

TypeScript编译器 tsc

使用npm全局安装

npm install -g typescript

执行tsc demo.ts可以将ts文件编译为js文件,并及时发现错误,而不是等待 JS 代码执行时。

报错时仍产出文件

TypeScript 的核心原则:大多数时候,开发人员比 TypeScript 更了解代码。

当tsc编译过程中检测到报错,仍会产出js文件。

这一特性可以方便将 JS 项目迁移到 TS,原先的 JS 项目本就是可以运行的,不需要完全更改到符合 TS 的标准(工作量太大了)。

如果需要更严格的编译,可以使用noEmitOnError编译选项。

tsc --noEmitOnError demo.ts

显示类型与类型标注

通过冒号加类型的方式给变量标注类型。

function greet(person: string, date: Date) {
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
}

擦除类型与降级

  • 擦除类型: 在编译过程中,类型标注会被擦除,因为类型标注不是 JS 的语法特性,不被浏览器支持,这也是使用 TS 需要使用编译器将代码编译为 JS 的原因。

  • 降级:TS 可以将高版本 ECMAScript的代码重写为低版本(ES3或者ES5)的代码。默认降级到ES3,可以使用target选项指定版本转换,例如:tsc --target es2015 demo.ts.

虽然默认的目标代码采用的是 ES3 语法,但现在浏览器大多数都已经支持 ES2015 了。

所以,大多数开发者可以安全地指定目标代码采用 ES2015 或者是更高的 ES 版本,除非你需要着重兼容某些古老的浏览器。

严格性

TS 的严格性是在一个区间内调节的。

可以在tsconfig.json中通过设置strict: true一次性开启全部严格性设置。

也可以单独开启或者关闭某个设置,其中:

  • noImplicitAny:当有变量被隐式地被推断为any时报错。

    也就是说需要显性的指定any(不推荐),或者隐式推断可以推断出具体类型,或者手动指定明确的类型(最好)。

  • strictNullCheck:严格地处理nullundefined

常见类型与概念

基本类型

与 JS 中一致的:stringnumberboolean

数组

使用type[]或者泛型Array<type>

对象

简单的对象可以:(复杂的对象用interface声明)

function printCoord(pt: { x: number; y: number }) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
printCoord({ x: 3, y: 7 });

联合类型

使用|分隔多种允许的类型。

类型别名

使用type声明。

type Point = {
  x: number;
  y: number;
};

type ID = number | string;

接口

interface Point {
  x: number;
  y: number;
}

类型别名和接口之间的区别

类型别名和接口非常相似,在大多数情况下可以在它们之间自由选择。 几乎所有的 interface 功能都可以在 type 中使用,关键区别在于不能重新开放类型以添加新的属性,而接口始终是可扩展的。

image-20231126231126628

类型断言 Type Assertions

考虑到多态的情况,有时候 TS 只能推断出父类,假如我们明确知道具体的子类,可以使用类型断言。

如果断言错误,会及时报错。

// 使用 as 关键字
const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;

// 使用<>,这种写法不能出现在tsx中,会被误判
const myCanvas = <HTMLCanvasElement>document.getElementById("main_canvas");

// 报错
const x = "hello" as number;

文字类型 Literal Type

使用varlet声明的量是变量,因此对应的类型是指定的数据类型。

而使用const声明的量是常量,本身就不能再改变,TS 将其值作为类型(只适用于stringnumber)。

image-20231127104017113

字符串可以作为类型,于是联合类型可以联合多个字符串形成枚举类型:

let alignment: "left"|"center"|"right" = "center";

使用const声明对象,对象的内部字段不会被当作文字类型:

// 这里的 obj.num 会被推断为number类型
const obj = {num: 0};

一个较详细的例子

const req = {url:"https://example.com", method: "GET"};
// 这里会报错,因为req.method是string类型,不是"GET"或"POST"类型
handleRequest(req.url, req.method);

// 函数类型声明
function handleRequest(url:string, method:"GET"|"POST"){...}

修正方法1:使用类型断言

// Change 1:
const req = { url: "https://example.com", method: "GET" as "GET" };
// Change 2
handleRequest(req.url, req.method as "GET");

change1意味着断言req.method的类型为"GET",这可以在类型推断的时候将其视为"GET",而不是更广泛的string

change2用于断言传入的参数的类型为"GET",确保没有意料之外的错误。

修正方法2:使用 as const

const req = { url: "https://example.com", method: "GET" } as const;
handleRequest(req.url, req.method);

req.urlreq.method都会变成文字类型,req.method的类型变成"GET",而req.url的类型变成了"https://example.com",看起来很奇怪,但是这种类型可以视作string类型的子类型,也可以被函数匹配到。

对于null和undefined的处理

建议开启strictNullChecks,在传递值的时候手动检查是否为nullundefined,或者使用!断言一个变量非空:

function doSomething(x: string | null) {
  if (x === null) {
    // do nothing
  } else {
    console.log("Hello, " + x.toUpperCase());
  }
}

function liveDangerously(x?: number | null) {
  // No error
  console.log(x!.toFixed());
}

标签:01,GET,req,number,TS,类型,手册,method
From: https://www.cnblogs.com/feixianxing/p/typescript-handbook-basis-type-concept.html

相关文章

  • 智能监控平台/视频共享融合系统EasyCVR接入RTSP协议视频流无法播放原因是什么?
    视频集中存储/云存储/视频监控管理平台EasyCVR能在复杂的网络环境中,将分散的各类视频资源进行统一汇聚、整合、集中管理,实现视频资源的鉴权管理、按需调阅、全网分发、智能分析等。AI智能/大数据视频分析EasyCVR平台已经广泛应用在工地、工厂、园区、楼宇、校园、仓储等场景中。感......
  • 智能监控平台/视频共享融合系统EasyCVR接入RTSP协议视频流无法播放原因是什么?
    视频集中存储/云存储/视频监控管理平台EasyCVR能在复杂的网络环境中,将分散的各类视频资源进行统一汇聚、整合、集中管理,实现视频资源的鉴权管理、按需调阅、全网分发、智能分析等。AI智能/大数据视频分析EasyCVR平台已经广泛应用在工地、工厂、园区、楼宇、校园、仓储等场景中。感......
  • 已解决:若依后台访问 401认证失败,无权限访问系统资源
    暴力解决:简单粗暴,不够优雅若依安全框架采用的是SpringSecurity,所以仅需要在框架层面给他允许就行了,找到找到ruoyi-framework里面的SecurityConfig然后在里面添加你要访问的接口路径,即可放行!如果你的接口还加了别的权限注解,先注释掉,测试通了,再打开。......
  • day01
    Markdown学习标题二级标题三级标题四级标题 字体hello,world!hello,world!hello,world!hello,world!hello,world!引用选择12345分割线图片 超链接123列表abcabc 表格             ......
  • 阿里巴巴Java开发手册中的DO、DTO、BO、AO、VO、POJO定义
    常用文件夹分层pojovo:与前端交互的所有对象,包括接参和返回query:查询的筛选条件,前端传参和后端内部传参通用dto:后端内部传参专用分层缘由分层领域模型规约:DO:数据对象,与数据库看表结构对应。DTO:数据传输对象,业务层向外传输对象BO:业务对象,由业务层输出的业务逻......
  • 快速解决Error: error:0308010C:digital envelope routines::unsupported的三种解决方
    问题描述:    报错:Error:error:0308010C:digitalenveloperoutines::unsupported报错原因:     因为node.jsV17版本中最近发布的OpenSSL3.0,而OpenSSL3.0对允许算法和密钥大小增加了严格的限制报错详细信息:解决方案: 方案1:打开IDEA终端,直接输入Linux&......
  • 百度API学习 | day01
     大作业:(2023.12.27日完成)各位同学可根据自身情况进行选择:    选项一:根据实验一、二、三完成如下任务:        任务一:基于Jfinal构建信息管理系统,要求包含用户管理,翻译业务模块管理,图片优化模块管理(占30%)。        任务二:要求不同用户登录后可进行文字翻译......
  • P4017 最大食物链计数
    P4017最大食物链计数记忆化搜索DP角度解从捕食者向被捕食者建边维护每个生物的捕食eat,和被捕食数量beat。对每一个食物链顶端dfs,向下搜索直到找到最低级的生物,记忆化当前结点对应的食物链长度。#include<iostream>#include<algorithm>#include<cstring>#defin......
  • Web_XCTF_WriteUp | Training-WWW-Robots
    题目分析标题大致翻译:训练WWW网络爬虫。场景内部文段大致翻译:在这个小小的训练挑战中,您将学习Robots_exclusion_standard(网络爬虫排除标准)。robots.txt文件用于网络爬虫检查它们是否被允许抓取和索引您的网站或仅部分网站。有时,这些文件揭示了目录结构,而不是保护内......
  • Semantic Kernel 将成为通向Assistants的门户
    在OpenAI和Semantickernel之上构建代理将更快、更容易。SK团队正在博客里推出系列文章与大家分享我们将Assistants整合到Semantickernel中的计划,以及它们如何融入我们的v1提案中。OpenAI也推出了让开发者更容易使用OpenAIAPI的开发方式——Assi......