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

这篇具有很好参考价值的文章主要介绍了[TS手册学习] 01_基础、常见类型与概念。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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 中使用,关键区别在于不能重新开放类型以添加新的属性,而接口始终是可扩展的。

类型断言 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)。

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

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,或者使用!断言一个变量非空:文章来源地址https://www.toymoban.com/news/detail-747480.html

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());
}

到了这里,关于[TS手册学习] 01_基础、常见类型与概念的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • WebGIS学习-01-GIS基础概念与Mapbox基础

    1.栅格数据: -.jpg,.png等图片数据; -卫星等拍摄的影像;.tiff 2.矢量数据: -geojson的数据,多用于绘制边界 -放大缩小都不会失真,且高度支持手绘 对于栅格数据: -1.网页将栅格数据渲染为img标签 -2.利用canvas进行绘图 对于矢量数据: -1.渲染为svg标签 -2.渲染为canvas leaflet:

    2024年02月07日
    浏览(48)
  • 01 java 学习 数据类型、基础语法、封装、继承、多态、接口、泛型、异常等

    目录 环境搭建和基础知识  什么是JRE: 什么是JDK: 基础数据类型  分支选择if else switch和c一毛一样 for和while循环还有数组基本和c一样 封装 函数调用、传参、命名规范、数组新命名规范 java输入Scanner scanner = new Scanner(System.in); 类的创建和使用以及封装修饰符  构造方法:含义、

    2024年02月11日
    浏览(41)
  • [TS手册学习] 04_类

    TS官方手册:TypeScript: Handbook - The TypeScript Handbook (typescriptlang.org) 类的成员 初始化 类的成员属性声明类型: 类的成员属性初始化,会在实例化的时候完成赋值: 严格初始化 --strictPropertyInitialization 配置项为 true 的时候,要求成员属性必须初始化,否则报错。 可以在声明成员

    2024年02月05日
    浏览(32)
  • [TS手册学习] 03_函数相关知识点

    TS官方手册:TypeScript: Handbook - The TypeScript Handbook (typescriptlang.org) 函数类型表达式 使用类似于箭头表达式的形式来描述一个函数的类型。 上述代码中, fn: (a:string) = void 表示变量 fn 是一个函数,这个函数有一个参数 a ,是 string 类型,且这个函数的返回值类型为 void ,即没有

    2024年02月05日
    浏览(40)
  • TypeScript基础篇 - TS日常类型 上篇

    目录 TS的常见用法介绍  example01.ts 逃避类型检查:any 思考一下~:不知道类型 类型标注 函数(参数和返回值) 匿名函数 TS如何知道匿名函数的类型? TS是一种标注式语言,不侵入JS的设计 文章内容 基础类型、数组 any/unkown 类型标注 函数 对象类型 联合 别名 接口 断言 字面

    2024年02月16日
    浏览(56)
  • unity多人联机(Mirror插件)有史以来最全的基础教程(附加报错提示和官方手册修改)

    目录 START👀 (☞゚ヮ゚)☞Mirror简介☜(゚ヮ゚☜) 组件介绍: 组件1:NetworkManager 组件2:NetworkManagerHUD(需要配合Network Manager组件) 组件3:NetworkIdentity 组件4:network discoverynetwork discoveryHUD 错误注意: 最后,对手册内容的一点修改: 今天我们只讲代码和组件,大家拿小本本记好了,字

    2024年02月02日
    浏览(48)
  • ts学习02-数据类型

    布尔类型(boolean) 数字类型(number) 字符串类型(string) 数组类型(array) 元组类型(tuple) 枚举类型(enum) 任意类型(any) null 和 undefined void类型 never类型 Boolean类型包含两个逻辑值,分别是true和false。 Number类型表⽰⼀个数字。不详细区分整数类型、浮点数类型以及带符

    2024年02月05日
    浏览(35)
  • AI作曲基础-Python编程作曲软件篇-FoxDot文档及源码分析-官方教程01

    本系列系列目录放在文尾; 本系列是AI作曲的基础,暂时和AI关系不大,但尤为重要; 借助FoxDot,从文档分析开始,然后进入源码分析环节; 暂未发现官方中文版,实践顺带翻译,会根据需要不定期校对及更新,欢迎催更~ 教程来源 FoxDot官方主页在此:https://foxdot.org/ FoxDot官

    2024年02月11日
    浏览(34)
  • 前端TypeScript学习day02-TS常用类型

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 TypeScript 常用类型 接口  元组  类型推论 类型断言 字面量类型 枚举 any 类型 typeof  当一个对象类型被多次使用时,一般会使用接口(interface)来描述对象的类型,达到

    2024年02月08日
    浏览(50)
  • 前端TypeScript学习day03-TS高级类型

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)            目录 TypeScript 高级类型 class 类 class继承  extends implements  类成员可见性  public  protected  private   readonly 兼容性 类型兼容性 接口兼容性  函数兼容性  TypeScri

    2024年02月08日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包