frontend -- Typescript

类 · TypeScript中文网 · TypeScript——JavaScript的超集 (tslang.cn)

Typescript和Javascript的区别?

Typescript面试题 - 知乎 (zhihu.com)

 1、TS变量类型:(97条消息) TS01 : TS变量类型详解TS函数_七月是我的生日的博客-CSDN博客_ts变量类型

2、TS 中那些有用的符号

细数 TS 中那些奇怪的符号_奇舞周刊的博客-CSDN博客

(1)! 非空断言操作符

  忽略 undefined 和 null 类型

function myFunc(maybeString: string | undefined | null) {
  // Type 'string | null | undefined' is not assignable to type 'string'.
  // Type 'undefined' is not assignable to type 'string'. 
  const onlyString: string = maybeString; // Error
  const ignoreUndefinedAndNull: string = maybeString!; // Ok
}

  调用函数时忽略 undefined 类型

type NumGenerator = () => number;
 
function myFunc(numGenerator: NumGenerator | undefined) {
  // Object is possibly 'undefined'.(2532)
  // Cannot invoke an object which is possibly 'undefined'.(2722)
  const num1 = numGenerator(); // Error
  const num2 = numGenerator!(); //OK
}

因为 ! 非空断言操作符会从编译生成的 JavaScript 代码中移除,所以在实际使用的过程中,要特别注意。比如下面这个例子:

const a: number | undefined = undefined;

const b: number = a!;

console.log(b); 

以上 TS 代码会编译生成以下 ES5 代码:

"use strict";

const a = undefined;

const b = a;

console.log(b);

虽然在 TS 代码中,我们使用了非空断言,使得 const b: number = a!; 语句可以通过 TypeScript 类型检查器的检查。但在生成的 ES5 代码中,! 非空断言操作符被移除了,所以在浏览器中执行以上代码,在控制台会输出 undefined

(2)?. 可选链操作符 

可选的属性访问:const val = a?.b;

可选元素访问:function tryGetArrayElement<T>(arr?: T[], index: number = 0) {
  return arr?.[index];
}

可选链与函数调用:let result = obj.customMethod?.();

(3)?? 空值合并运算符(可返回 falsy 值(''、NaN 或 0)

??和 | | 的区别:

使用 ?? 时,只有当值1为nullundefined时才返回值2;
使用 || 时,值1会转换为布尔值判断,为true返回值1,false 返回值2

const foo = null ?? 'default string';
console.log(foo); // 输出:"default string"
 
const baz = 0 ?? 42;
console.log(baz); // 输出:0

不能与 && 或 || 操作符共用:这种情况下会抛出 SyntaxError。

(4)?: 可选属性

interface Person {
  name: string;
  age?: number;
}
 
let lolo: Person  = {
  name: "lolo"  
}

(5)& 运算符:交叉类型

通过 & 运算符可以将现有的多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特性。

type PartialPointX = { x: number; };
type Point = PartialPointX & { y: number; };
 
let point: Point = {
  x: 1,
  y: 1
}

3、类型别名

(1)TypeScript 提供了为类型注解设置别名的便捷语法

type Pet = 'cat' | 'dog';
let pet: Pet;

pet = 'cat'; // Ok
pet = 'dog'; // Ok
pet = 'zebra'; // Compiler error

interface Person {
name: string;
age: number;
}
const sem: Person = { name: 'semlinker', age: 30 };
type Sem= typeof sem; // -> Person

(2)Partial<T> & Required<T>

 TypeScript 内置的工具类型 Partial<T> 可以快速把某个接口类型中定义的属性变成可选的:

interface PullDownRefreshConfig {
  threshold: number;
  stop: number;
}
 
/**
 * type PullDownRefreshOptions = {
 *   threshold?: number | undefined;
 *   stop?: number | undefined;
 * }
 */ 
type PullDownRefreshOptions = Partial<PullDownRefreshConfig>

Required<T>可以把某个接口中定义的属性全部声明为必选的:

interface Props {
a?: number;
b?: string;
}

const obj: Props = { a: 5 }; // OK
const obj2: Required<Props> = { a: 5 }; // Error: property 'b' missing

(3)Readonly

Readonly<T> 的作用是将某个类型所有属性变为只读属性,也就意味着这些属性不能被重新赋值。

interface Todo {
title: string;
}

const todo: Readonly<Todo> = {
title: "Delete inactive users"
};

todo.title = "Hello"; // Error: cannot reassign a readonly property

(4)keyof 操作符:提取interfacetypeclass的key

//基础使用
interface Person {
  name: string;
  age: number;
  location: string;
}
type K1 = keyof Person; // "name" | "age" | "location"

// 读取对象的属性,并且限制了只能读取对象中存在的属性
function prop<T extends object, K extends keyof T>(obj: T, key: K) {
   return obj[key];
} 

在以上代码中,我们使用了 TypeScript 的泛型和泛型约束。首先定义了 T 类型并使用 extends 关键字约束该类型必须是 object 类型的子类型,然后使用 keyof 操作符获取 T 类型的所有键,其返回类型是联合类型,最后利用 extends 关键字约束 K 类型必须为 keyof T 联合类型的子类型。

(5)typeof 和 keyof 操作符

在 TypeScript 中,typeof 操作符可以用来获取一个变量或对象的类型。而 keyof 操作符可以用于获取某种类型的所有键,其返回类型是联合类型。了解完 typeof 和 keyof 操作符的作用,我们来举个例子,介绍一下它们如何结合在一起使用:

const COLORS = {
  red: 'red',
  blue: 'blue'
}

// 首先通过typeof操作符获取Colors变量的类型,然后通过keyof操作符获取该类型的所有键,
// 即字符串字面量联合类型 'red' | 'blue'
type Colors = keyof typeof COLORS
let color: Colors;
color = 'red'// Ok
color = 'blue'// Ok

// Type '"yellow"' is not assignable to type '"red" | "blue"'.
color = 'yellow'// Error

(6) Exclude(用于联合类型)

Exclude<T, U> 的作用是将某个类型中属于另一个的类型移除掉。

如果 T 能赋值给 U 类型的话,那么就会返回 never 类型,否则返回 T 类型。最终实现的效果就是将 T 中某些属于 U 的类型移除掉。

type T0 = Exclude<"a" | "b" | "c", "a">; // "b" | "c"
type T1 = Exclude<"a" | "b" | "c", "a" | "b">; // "c"
type T2 = Exclude<string | number | (() => void), Function>; // string | number

(7) Extract(用于联合类型)

Extract<T, U> 的作用是从 T 中提取出 U

type T0 = Extract<"a" | "b" | "c", "a" | "f">; // "a"
type T1 = Extract<string | number | (() => void), Function>; // () =>void

4、类型提取

type Person = {
  name: string;
  age: number;
}

type PersonName = Person["name"]; // string
type StrNumTuple = [string, number];
type StrNumTuple0 = StrNumTuple[0]; // string
5、Pick(用于接口interface和类型别名type

从对象中类型T选取一些keys的属性来构造新类型: pick<T,keys>

interface Props{
    id:string
    title:string
    children:number[]
}
type PickProps= Pick<Props,'id'|'title'>

得到:

interface Props{
    id:string
    title:string
}
6、 Omit(用于接口interface和类型别名type

从对象类型T中删除一些,留下剩下的属性来构造新类型: omit<T,keys>:

interface User {
  name: string;
  age: number;
  like: string;
}
type User1 = Omit<User, "name" | "age">;

相当于

interface User1 {
  like: string;
}

5、interface和type 

typeScript interface和type区别 - 简书 (jianshu.com)

TS系列篇|接口(interface) 和 类型别名(type) - 掘金 (juejin.cn)

6、 高级类型Record

(164条消息) typescript中高级类型Record_问白的博客-CSDN博客_record ts

7、装饰器及应用场景浅析

JELLY | Typescript 装饰器及应用场景浅析 (jd.com)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值