Typescript 学习笔记

Typescript 学习笔记

四月 08, 2020

js 的原生类型

  1. 基本数据类型
    1. string number undefined null boolean
  2. 复杂【引用】数据类型
    1. object
  3. 缺点： 弱类型 数据类型可以更改 安全性低

ts 类型系统 强类型 数据类型是定死的 安全性更高

编译代码时即可以发现错误

  1. 基本数据类型
    1. string number undefined null boolean
  2. 复杂【引用】数据类型
    1. object
  3. 其他数据类型
    1. 内置对象类型
    2. 元组
    3. 枚举
    4. 接口
    5. 。。。

为什么要提供类型系统？ 为什么现在要用 ts

  1. ts 是强类型，安全度更高
  2. ts 编译既可以发现错误，可以减少 debug 时间
  3. 提供更多的代码提示

ts 缺点

代码量增加了

第一个 ts 案例

  1. ts 不能直接在浏览器使用，需要编译成 js
  2. tsc 在编译时，还会将高版本的 es 语法转成 es5

基础

let/const 变量名:数据类型 = 值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// number
let m: number = 1000;

// string
let s: string = "Hello ts";

// boolean
let b: boolean = false;

// undefined
let und: undefined = undefined;

// null
let nul: null = null;

ts 给了简写：类型推论(根据值来根据值来定义变量的数据类型)

1
2
let n = 1000; // 1000是numble，所以推论n的类型是numble类型
n = "string"; // 就会报错

对象类型

在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型。

1
2
3
4
5
6
7
// 常见的对象
const obj = {
  id: 1,
  name: "zhangsan",
  age: 18,
  sex: "nan",
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// 对象类型
const obj: ObjType = {
  // obj后面跟接口名
  id: 1,
  name: "zhangsan",
  age: 18,
  sex: "nan",
  color: "yellow", // 可能有可能没有
};

// obj对象可能会增加一些属性
// obj.aa = 1000;
// obj.bb = 1000;

// ts 提供两种自定义类型的方式：interface/type

// interface 接口名称[大驼峰] {}
// 必须和和接口的形状保持一致

interface ObjType {
  readonly id: number; // 只读属性
  name: string;
  age: number;
  sex: string;
  color?: string; // 可选属性
  [propName: string]: any; // 任意属性 obj对象可增加任何属性，这一行谨慎使用
}

// 或者可以采用type 方法类似上面
// type 接口名称[大驼峰] = {}

type ObjType = {
  readonly id: number; // 只读属性
  name: string;
  age: number;
  sex: string;
  color?: string; // 可选属性
  [propName: string]: any; // 任意属性 obj对象可增加任何属性，这一行谨慎使用
};

总结:

  1. 赋值的时候，变量的形状必须和接口的形状保持一致。
  2. 可选属性的含义是该属性可以不存在。 ?:
  3. 未定义的属性用任意属性 [propName: string]: any
  4. 只读属性 readonly

函数

ts 定类型：参数和返回值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 一些常用的函数ts写法
function fn(a: number, b: number): number {
  return a + b;
}

const fn2 = (n: string, m: string): string => {
  return n + m;
};

const fn3: (n: string, m: string) => string = (n, m) => {
  return n + m;
};

function fn4(a: string, b: boolean): void {
  // void 表示空类型 函数没有返回值
  // a,b做了一些逻辑
}

// 也可以使用接口定义函数的类型

const fn5: FnType = (a, b) => a + b;

interface FnType {
  (a: number, b: number): number;
}

数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// number[]
// 定义了一个元素只能是number类型的数组
const arr: number[] = [1, 2, 3, 4];

// string[]
const arr2: string[] = ["a", "b", "v"];

// 联合类型
const arr3: (number | string | boolean)[] = [1, 2, 3, "a", "b", true];

// json 类型数组
const arr4: ArrType[] = [
  {
    id: 1,
    name: "zhangsan",
    age: 18,
    sex: "nan",
    color: "yellow", // 可能有可能没有
  },
];

// 也是创建一个interface接口

元组类型

元组： 是一种规定了数组长度以及每一个元素的数据类型的特殊数组

1
2
3
4
// 1. 定义了一个长度为2的数组
// 2. 这个数组中第一个元素是number,第二个是string
let x: [number, string];
x = [10, "hello"];

枚举类型

枚举类型：自动添加计数

1
2
3
4
5
6
7
8
9
enum Color {
  Red = 1,
  Green,
  Yellow,
}

console.log(Color.Green); // 2
console.log(Color.Yellow); // 3
console.log(Color[1]); // Red

泛型

泛型：给未知数据定义类型

1
2
3
4
5
6
7
function Handler<T>(a: T): number {
  // T在定义时是不确定类型的
  return 1000;
}

Handler(10); // 调用时我们知道了T是number类型
Handler("hello");

class (类)

问题： 类中可以写什么?

  1. 实例成员: 实例化类之后得到一个实例，这个实例身上的东西
    1. 实例属性 [public] count = 1
    2. 实例方法 [public] fn () {}
  2. 静态成员 类身上的东西
    1. 静态属性 static color = ‘red’
    2. 静态方法 static handler () {}
  3. 私有成员 类内部使用的属性和方法
    1. 私有属性 private msg = ‘hello’
    2. 私有方法 private func () {}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 类实现接口【多个】
class App implements AppType, HelloType {
  count = 1;
  color = "yello";
  fn = () => {};
  username = "lakers";
  static color: string = "red";
  static handler(n: string, m: string): string {
    return n + m;
  }

  private msg: string = "hello";
  private func(n: string, m: string): string {
    return n + m;
  }
}

interface AppType {
  //约定了实例成员的类型
  count: number;
  color: string;
}

interface HelloType {
  username: string;
}

类型声明

问题： ts 中引入其他 js 插件，会发生什么

1
import $ from "jquery"; // 问题： 引入时就报错

$. js 提示代码一个都没有了

类型声明： xxx.d.ts 类型声明文件

类型声明文件 @types 社区

输入以下命令

1
$ cnpm i @types/jquery -S

xxx.d.ts 类型声明文件中

declare 可以为 js 来声明类型
/// 三斜杠语法 声明文件的引入

  1. 1. js 的原生类型
  2. 2. ts 类型系统 强类型 数据类型是定死的 安全性更高
  3. 3. 为什么要提供类型系统？ 为什么现在要用 ts
  4. 4. ts 缺点
  5. 5. 第一个 ts 案例
    1. 5.1. 基础
    2. 5.2. 对象类型
    3. 5.3. 函数
    4. 5.4. 数组
    5. 5.5. 元组类型
    6. 5.6. 枚举类型
    7. 5.7. 泛型
    8. 5.8. class (类)
    9. 5.9. 类型声明