JavaScript

TypeScript入门

在JavaScript的基础上添加了类型系统，可以在编译时检查类型，提高代码的可读性和可维护性。

约定使用 TypeScript 编写的文件以 .ts 为后缀，用 TypeScript 编写 React 时，以 .tsx 为后缀。

1
2
3
4
5
6
#全局安装typescript
npm install -g typescript
#编译
tsc xxx.ts
#运行
node xxx.js

基础

数据类型

JavaScript的类型分为：

  • 原始数据类型：布尔值、数值、字符串、null、undeined、Symbol、BigInt
  • 对象类型
    • 接口
    • 数组
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

const x: boolean = false;
const y: string = 'hello';
const z: number = 123;
const a: bigint = 123n;
const b: symbol = Symbol('foo');
const c: object = { foo: 123 };
let d: undefined = undefined;//表示为定义，以后可能会有定义
const d: null = null;

let x:'hello'; //值类型

x = 'hello'; // 正确
x = 'world'; // 报错

let x:string|number; //联合类型

x = 123; // 正确
x = 'abc'; // 正确

//交叉类型
let obj:
  { foo: string } &
  { bar: string };

obj = {
  foo: 'hello',
  bar: 'world'
};

type A = { foo: number };

type B = A & { bar: number };


type Age = number;

let age:Age = 55;

// 'hello' // 字面量
// new String('hello') // 包装对象


### 接口

// 接口类型
interface Person {
  name: string;
  age?: number; //?表示可选属性
  readonly id: number; //只读属性
  [propName: string]: any; //任意属性，TypeScript 实际上会关闭这个变量的类型检查。即使有明显的类型错误，只要句法正确，都不会报错
  x: unknown; //未知类型，为了解决any的污染问题，unknown类型只能赋值给unknown和any类型，但是不能赋值给其他类型；不能直接调用unknown类型变量的方法和属性
}


let tom: Person = {
  id: 89757,
  name: 'Tom',
  age: 25,
  gender: 'male'
};


数组

1
2
3
4
5

let arr: number[] = [1, 2, 3, 4, 5];
let arr: (number|string)[] = [1, 2, 3, 4, '5'];
let arr: Array<number> = [1, 2, 3, 4, 5];

元组

1
2
3
4
5
6
7
8
9
10
11
12
13

let t:[number] = [1];


//元组的成员可以添加成员名，这个成员名是说明性的，可以任意取名，没有实际作用。
type Color = [
  red: number,
  green: number,
  blue: number
];

const c:Color = [255, 255, 255];

声明文件

声明文件必需以 .d.ts 为后缀。

库的使用场景主要有以下几种：

  • 全局变量：通过