课程名称

专为小白设计的TypeScript入门课

课程章节

第2章 TypeScript 基础语法入门

2-8 基础类型快速入门（下） (15:02)

课程讲师

Dell

课程内容

掌握基础类型快速入门：

断言 Assersion
- as写法
- 尖括号写法
字面量类型
- note：字面量类型与string或者number类型还是不同的，它更精确，而且字符串和字面量类型有的时候也不能匹配。
- 字面量类型注意的问题，字符串和字面量类型有的时候也不能匹配。
null, undefined
void

课程收获

ts的断言 Assersion
dom类型是从页面上取一个root的节点，实际dom的类型会默认推断出来，是HTMLElement，即html元素。但有的时候取页面上的一个root节点，有的时候代码会出错，假如页面上压根就没有root这样的节点。那这段代码取到的则是undefined，当运行时ts发现匹配不上到时候必然报错。

const dom:HTMLElement = document.getElementById('#root')

可以告诉ts，不去推断该类型，即使用as，称为断言。

// 断言 Assersion
const dom: undefined = document.getElementById('#root') as undefined;

const testString: string = 123肯定会报错，可以利用断言，强制让123变为string类型。

const testString: string = 123 as string;

实际还是会报错，ts不允许数字转字符串，但可以先转为any即可成功。
将123当作any，然后再把any转为string，就能绕过ts的类型检测，当然这种写法一般不会出现，代码阅读性很差。

const testString: string = 123 as any as string;

断言就是，有的时候ts的类型可能与真实类型，即推断出来的类型不一致，想让ts绕过这种检测，可以强制ts我们设置的类型必须当作设置的类型来处理。
断言的另外一种写法，尖括号的写法如下：

const dom: undefined = document.getElementById('#root') as undefined;
const dom1: undefined = <undefined>document.getElementById('#root');

ts的字面量类型
类型可以是字符串，即字面上的类型，如const str:‘abc’，如果设置值，必须也是abc，即const str:‘abc’=‘abc’，如果值是其他的都会报错。
图片描述
字面量类型一般这样使用：
在函数中的参数约定必须是固定的字面量。

// 字面量类型
function getPosition(position: 'left' | 'right'): string {
  return position;
}
getPosition('right');

传递其他字面量，会报错。
图片描述
除了字符串字面量，还可是boolean类型。

数字也可。

字面量类型注意的问题，字符串和字面量类型有的时候也不能匹配。

// 字面量类型习题
function request(url: string, method: 'GET' | 'POST'): string {
  return 'sending requst';
}
const params: {url: string, method: string} = { url: 'baidu.com', method: 'GET'};
request(params.url, params.method);

发现报错了，比较奇怪，method参数设置的也是’GET’
图片描述
错误提示：string不是我们约束的字面量类型。

第一种解决方式：修改method为对应字面量类型。

const params: {url: string, method: 'GET' | 'POST'} = { url: 'baidu.com', method: 'GET'};
request(params.url, params.method as 'GET');

第二种解决方式：使用as语法，强制推断，当成 ‘GET’ 字面量类型。

// 字面量类型习题
function request(url: string, method: 'GET' | 'POST'): string {
  return 'sending requst';
}
const params: {url: string, method: string} = { url: 'baidu.com', method: 'POST'};
request(params.url, params.method as 'GET');

note：字面量类型与string或者number类型还是不同的，它更精确，而且字符串和字面量类型有的时候也不能匹配。

ts的null, undefined类型
以下都不会报错，默认的ts配置，undefined也会被当成一个null，两者之间可以相互转换，它俩默认是有一些冗错的。

const testNull: null = null;
const testNull2: null = undefined;
const testUndefined: undefined = undefined;
const testUndefined2: undefined = null;

这里ts校验不太严谨，编辑器里也没有报错，有可能abc这个参数是null，这样abc.toUpperCase()运行时如果是null会报错的。默认ts对这块的校验并不严谨。

function checkNull(abc: string | null) {
  console.log(abc.toUpperCase());
}

解决方式：修改ts的默认配置。
strictNullChecks => 严格对null检验。
tsconfig.json

{
  "compilerOptions": {
    "strictNullChecks": true,
  }
}

配置后，以下代码都会报错了。

图片描述

const testUndefined2: undefined = null;
const testNull2: null = undefined;
function checkNull(abc: string | null) {
  console.log(abc.toUpperCase());
}

函数报错，可以用类型收窄解决。
以下代码就没问题了。

function checkNull(abc: string | null) {
  if(typeof abc === 'string') {
    console.log(abc.toUpperCase());
  }
}

拓展：强制类型转换语法
假设知道abc可能为string或者是null，但是这个函数我们不会传null，可以用！跳过ts的校验。
但是这种语法是建议不要使用的，还是使用类型收窄处理。

function checkNull(abc: string | null) {
  console.log(abc!.toUpperCase());
}

ts的void类型
void是空类型，在C++中也见过，即函数没有返回值，就不多介绍了。

// void
function getNumber(): void {
  return;
}

返回值的话就会报错了。
图片描述