匿名用户

外观

返回顶部
本页目录

Typescript

什么是typescript?

提示

TypeScript简称TS\

  • TS和JS之间的关系其实就是Less/Sass和CSS之间的关系
  • 就像Less/Sass是对CSS进行扩展一样, TS也是对JS进行扩展
  • 就像Less/Sass最终会转换成CSS一样, 我们编写好的TS代码最终也会换成JS
  • TypeScript是JavaScript的超集，因为它扩展了JavaScript，有JavaScript没有的东西。
  • 硬要以父子类关系来说的话，TypeScript是JavaScript子类，继承的基础上去扩展。

为什么需要TypeScript?

提示

  • 简单来说就是因为JavaScript是弱类型, 很多错误只有在运行时才会被发现
  • 而TypeScript提供了一套静态检测机制, 可以帮助我们在编译时就发现错误

TypeScript特点

提示

  • 支持最新的JavaScript新特性
  • 支持代码静态检查
  • 支持诸如C,C++,Java,Go等后端语言中的特性 (枚举、泛型、类型转换、命名空间、声明文件、类、接口等)

数据类型

JS的八种内置类型

基础数据类型

ts
let str: string = "jimmy";
let num: number = 24;
let bool: boolean = false;
let u: undefined = undefined;
let n: null = null;
let obj: object = {x: 1};
let big: bigint = 100n;
let sym: symbol = Symbol("me");

其他类型

Array

ts
let arr:string[] = ["1","2"];
let arr2:Array<string> = ["1","2"]；

函数

函数声明

ts
function sum(x: number, y: number): number {
  return x + y;
}

函数表达式

ts
let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
  return x + y;
};

可选参数

ts
function buildName(firstName: string, lastName?: string) {
  if (lastName) {
    return firstName + ' ' + lastName;
  } else {
    return firstName;
  }
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

参数默认值

ts
function buildName(firstName: string, lastName: string = 'Cat') {
  return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

Interface

ts
interface Person {
  name: string;
  age: number;
}
let tom: Person = {
  name: 'Tom',
  age: 25
};

泛型

ts
function identity<T>(arg: T): T {
  return arg;
}

Partial

生成一个新类型，该类型与 T 拥有相同的属性，但是所有属性皆为可选项

ts
interface Foo {
  name: string
  age: number
}
type Bar = Partial<Foo>
// 相当于
type Bar = {
  name?: string
  age?: number
}

Required

生成一个新类型，该类型与 T 拥有相同的属性，但是所有属性皆为必选项

ts
interface Foo {
  name: string
  age?: number
}
type Bar = Required<Foo>
// 相当于
type Bar = {
  name: string
  age: number
}

Readonly

生成一个新类型，T 中的 K 属性是只读的，K 属性是不可修改的。

ts
interface Foo {
  name: string
  age: number
}
type Bar = Readonly<Foo>
// 相当于
type Bar = {
  readonly name: string
  readonly age: number
}

Pick

生成一个新类型，映射类型 ; P in K 类似于 js的 for…in语句 ; extends 为泛型约束

ts
interface Foo {
  name: string;
  age?: number;
  gender: string;
}
type Bar = Pick<Foo, 'age' | 'gender'>
// 相当于
type Bar = {
  age?: number
  gender: string
}

const todo: Bar= {
  age?: 3,
  gender: 男
};

Exclude

如果 T 是 U 的子类型则返回 never 不是则返回 T

ts
type A = number | string | boolean
type B = number | boolean

type Foo = Exclude<A, B>
// 相当于
type Foo = string

Extract

和 Exclude 相反

ts
type A = number | string | boolean
type B = number | boolean

type Foo = Extract<A, B>
// 相当于
type Foo = number | boolean

Omit

生成一个新类型，该类型拥有 T 中除了 K 属性以外的所有属性; Exclude<keyof T, K> => 过滤掉 T中的 K属性

ts
type Foo = {
	name: string
	age: number
}

type Bar = Omit<Foo, 'age'>
// 相当于
type Bar = {
	name: string
}