type 别名

我们已经使用过 object 和 联合的方式 直接声明类型。但是某个类型在使用多次的情况下就要用到别名了。

别名的语法就像是在定义一个具名的对象一样:

type Point = {
  x: number;

  y: number;
}

function printCoord(pt: Point) {
  console.log(pt.x);

  console.log(pt.y);
}

printCoord({ x: 100,  y: 100 });

定义一个别名不仅仅可以是对象的形式,还可以是其他形式,比如联合类型

type ID = number | string;

别名仅仅只是个别名,你不能使用一个别名再去创建一个不同版本的别名但却表达同样的类型。如果你使用一个别名继续创建另一个别名,这件事就是一种重复劳动没有意义,即使能正常运行。

所以不要这样定义:

type userString = string

interfaces 接口 :是另一种用来声明 object type 的类型

interface Point {
  x: number;

  y: number;
}

用法不变

function printCoord(pt: Point) {
  console.log(pt.x);

  console.log(pt.y);
}

printCoord({ x: 100,  y: 100 });

这样看起来和上面的别名是一样的,ts 只关心入参的结构是否和定义的类相匹配。但是和别名也有不同之处:

在大部分情况下别名和接口都可以选择,但是别名一旦创建后就不能再添加新的属性了,

接口是可以拓展的:接口既可以新增属性名称也可以通过 extends 进行拓展。

接口 VS 别名
interface 接口 type 别名

interface Animal {
  name: string
}

interface Animal {

  legs: number
}

type Animal = {
  name: string
}

type Animal = { //报错:声明重复
  legs: number
}

interface Bear extends Animal {
  honey: boolean
}
type Bear = Animal & {
  honey: boolean
}
接口通过 extends 进行拓展 类别名通过相交进行‘拓展’

类型断言

有时某个值的类型信息是ts不知道的。比如你使用 document.getElementById,ts 仅仅知道返回 HTMLElement 类型,

如果在你的页面中通过ID可以获取一个 HTMLCanvasElement,在这种情况下,可以使用类型断言指定更具体的类型。

例如:

const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;

字面量类型

在ts中声明一个变量,ts会根据初始值自动判断变量的类型,例如:

let changingString = 'Hello World'

changingString = 'Bowen'

changingString = 124

直接声明一个字面量的类型是没有多大意义的,因为这样导致变量只能有唯一的值,例如:

let x: 'text' = 'text'

x = 'text'

x = 'test'

但是将字面量与联合类型相结合,便可以表达出更有用的类型,比如一个方法仅仅接收一系列预设的值:

function printText(s: string, alignment: "letf" | "right" | "center") { ... }

printText("boy", "right")

printText("boy", "top")

当然了这种结合可以多种类型互相配合的:

interface Options {
  width: number;
}
function configure(x: Options | "auto"): Options | "auto" {
  return x || 'auto'
}
configure({ width: 100 });
configure("auto");
configure("automatic");
 
在使用字面量类型时,注意已经定义了字面量类型的变量或者参数,在调用时需要注意字面量类型和基础类型是不同的,下面一个例子:
声明一个方法:
 
function handleRequest(url: string, method: "GET" | "POST") {...}
const req = { url: "https://example.com", method: "GET" };
handleRequest(req.url, req.method);
报错信息:Argument of type 'string' is not assignable to parameter of type 'GET' | 'POST'
 
入参类型是string,但是接收参数的类型希望是'GET'或者'POST'
因为ts会在创建req和调用handleRequest之间预估参数类型,前者相当于创建了一个对象(两个属性的类型均为 string),
而后者的入参是一个对象(两个属性分别是 string 和 字面量类型 'GET' | 'POST'),所以这里就会报错了。
 
解决方法:
const req = { url: "https://example.com", method: "GET" } as const;
handleRequest(req.url, req.method);
as const 后缀的作用类似于const,但用于类型系统,确保所有属性都被指定为字面量类型,而不是更通用的版本,如字符串或数字。

TYPESCRIPT中文教程基础部分下----翻译自TS官方的更多相关文章

  1. TypeScript中文教程基础部分上----翻译自TS官方

    为什么使用TS? js中每一个值在不同的操作运行中表现出一系列不同的行为,比如说下面这个例子: message.toLowerCase();message(); 逐行看下,第一行调用了message的 ...

  2. TypeScript 中文教程之缩小----部分翻译自TS官方

    Narrowing概念:字面意思是缩小,可以理解为细化或者您觉得更好的代名词. TS官方在这里做了很详细的说明,文字较多,简单以图片概括: typeof  type guards 类型防护过程,可以通 ...

  3. 转载:《TypeScript 中文入门教程》

    缘由 事情是这样的,我想搜索 TypeScript 中文教程,结果在 https://www.baidu.com , https://cn.bing.com ,上都找不到官方的翻译,也没有一个像样的翻 ...

  4. 转载:TypeScript 简介与《TypeScript 中文入门教程》

    简介 TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构 ...

  5. 【转】TypeScript中文入门教程

    目录 虽然我是转载的,但看在Copy这么多文章也是很幸苦的好吧,我罗列一个目录. 转载:<TypeScript 中文入门教程> 17.注解 (2015-12-03 11:36) 转载:&l ...

  6. CEF中文教程(google chrome浏览器控件) -- Windows下编译Chromium

    CEF中文教程(google chrome浏览器控件) -- CEF简介 2013-04-10 16:48 42928人阅读 评论(4) 收藏 举报  分类: CEF(2)    目录(?)[+]   ...

  7. 《TypeScript 中文入门教程》

    转载:<TypeScript 中文入门教程> 17.注解 (2015-12-03 11:36) 转载:<TypeScript 中文入门教程> 16.Symbols (2015- ...

  8. 【HttpClient4.5中文教程】【第一章 :基础】1.1运行请求(二)

    很多其它HttpClient4.5中文教程请查看:点击打开链接 ==================================================================== ...

  9. 手把手0基础Centos下安装与部署paddleOcr 教程

    !!!以下内容为作者原创,首发于个人博客园&掘金平台.未经原作者同意与许可,任何人.任何组织不得以任何形式转载.原创不易,如果对您的问题提供了些许帮助,希望得到您的点赞支持. 0.paddle ...

随机推荐

  1. maven高级学习

    上一篇<maven是什么>介绍了最初级的maven学习,今天就趁着周末的大好时光一起学习下maven的高级知识吧. 1.maven工程要导入jar包的坐标,就必须要考虑解决jar冲突 1) ...

  2. Windows下80端口被占用的解决方法(SQL Server)

    查找80端口被谁占用的方法 进入命令提示行(WIN+R 输入 CMD),输入命令 netstat -ano|findstr 80 (显示包含:80的网络连接) ,就可以看到本机所有端口的使用情况,一般 ...

  3. 4、Linux下安装tomcat

    Linux系统下安装tomcat 一.安装JDK 安装Tomcat之前需要安装JDk,安装JDk请参考:JDK安装. 二.Linux安装Tomcat 1.官网上下载Tomcat       Apach ...

  4. pipeline 结构设计

    目录 一.pipeline步骤 二.案例 pipeline详解 只生成一次制品 不同环境部署 系统集成测试 指定版本部署 一.pipeline步骤 当团队开始设计第一个pipeline时,该如何下手呢 ...

  5. pipeline 步骤

    目录 一.简介 二.文件相关 删除当前目录 切换到目录 判断文件是否存在 判断是否为类Unix 返回当前目录 将内容写入文件 读取文件内容 二.制品相关 存取临时文件 三.命令相关 script sh ...

  6. pipeline 共享库

    目录 一.简介 二.共享库扩展 共享库使用 共享库结构 pipeline模板 一些小问题 三.共享库例子 使用公共变量 使用共享库的src方法 使用共享库的vars方法 四.插件实现pipeline ...

  7. 【antd】如何自定义antd组件form表单中Form.Item里的内容组件

    需求:现有一个form表单,但是其中一个元素比较复杂,并不是简单的输入框或者下拉框之类的.但是我又希望能通过form.validateFields().then()去获得它的值,就不需要在当前页面写大 ...

  8. HMAC在“挑战/响应”(Challenge/Response)身份认证的应用

    HMAC的一个典型应用是用在"挑战/响应"(Challenge/Response)身份认证中. 认证流程 (1) 先由客户端向服务器发出一个验证请求. (2) 服务器接到此请求后生 ...

  9. 粒子群优化算法—Matlab

    PSO算法 clc; clear ; close ; %% Problem Definition CostFunction = @(x) sphere(x); % Cost Function nVar ...

  10. 新建任务(Project)

    <Project2016 企业项目管理实践>张会斌 董方好 编著 新建任务,这操作简单得就跟在Excel的单元格里输入个数据一样,不过也不是一点讲究都没有. 首先得选对视图. 不是所有的视 ...