TypeScript学习笔记——基本类型

TypeScript学习笔记

1、环境搭建

1.下载安装Node.js
2.npm全局安装typescript
3.创建ts文件
4.tsc编译

or creat-react-app

npx create-react-app typescript-pro --template typescript

cd typescript-pro

npm install --save typescript @types/node @types/react @types/react-dom 

2、基本类型声明

入门

// 声明一个变量a，同时指定它的类型为number，在以后的使用中a的值只能是数字
let num: number;
num = 10;
num = 22;
// num = 'hello'; // 报错

let str: string;
str = "hello";
// str = 10; // 报错

// 声明完变量直接赋值
let bool: boolean = true;

// 如果变量的声明和赋值是同时进行的，TS可以自动对变量进行类型检测
let bool2 = false;
// bool2 = 10 // 报错

function sum(a: number, b: number) {
  return a + b;
}

// sum(123); // 报错，参数个数需一致
// sum(123, 234, 2); // 报错
// sum(123, '123'); // 报错，参数类型

// 第三个number是指定函数返回值的类型是number
function sum2(a: number, b: number): number {
  return a + b;
  // return a + '13'; // 报错，返回值类型需为number
}

基本类型声明

1、number 、string、boolean

2、字面量

// 字面量 直接使用字面量进行类型声明，限制它的值只能为10
let a: 10;
a = 10;
// a = 11; // 报错，类似const，不能修改

// b的取值为'male'或者'female'
let b: "male" | "female";
// 可以使用 | 来连接多个类型（联合类型）
let c: boolean | string;
c = true;
c = "hello";

3、any、unknow

// any 任意类型，一个变量设置类型为any后相当于对该变量关闭了TS的类型检测
// 使用TS时，不建议使用any类型,// 声明变量如果不指定类型，则TS解析器会自动判断变量的类型为any（隐式的any）
let an1;
let an: any;
an = 10;
an = "hello";
an = true;

// unknown 未知类型
let un: unknown;
un = 10;
un = "hello";
un = true;

let demo: string;

// an的类型时any，它可以赋值给任意变量
demo = an;

un = "hello";

// unknown 实际上就是一个类型安全的any
// unknown 未知类型不能赋值给其它类型变量
// demo = un; // 报错
if (typeof un === "string") {
  demo = un;
}

4、类型断言

// 类型断言，可以用来告诉解析器变量的实际类型
/**
 * 语法
 * 变量 as 实际类型
 * <实际类型>变量
 */
demo = un as string; // 告诉编辑器un就是字符串
demo = <string>un;

5、void、never

function fn(): number | string {
  return 123;
}

// void 用来表示空，以函数为例，就表示没有返回值的函数
function fn1(): void {
  // return 123; // 报错
  // return undefined;
  return null;
}

// never 表示永远不会返回结果
function fn2(): never {
  // return undefined; // 报错
  // return null; // 报错
  throw new Error("报错了！");
}

6、object 对象

// object 对象类型
// 不常用
let obj: object;
obj = {};
obj = function () {};

// 指定obj1的类型为一个对象并且对象中可以包含哪些属性
// 语法：{属性名：属性值, 属性名?：属性值,...}
// 在属性名后面加上？表示属性是可选的
let obj1: { name: string; age?: number };
// obj1 = {}; // 报错
obj1 = { name: "XX" };
obj1 = { name: "YY", age: 12 };

// [propName: string]: any // 表示任意类型的属性
// obj2表示要求该对象必须要有一个name属性，其他类型不管
let obj2: { name: string; [propName: string]: any };
obj2 = { name: "XY", age: 18, gender: "男" };

/**
 * 设置函数结构的类型声明
 *     语法：(形参：类型，形参：类型 ...) => 返回值
 */
let obj3: (a: number, b: number) => number;
obj3 = function (n1, n2): number {
  return n1 + n2;
};

7、array 数组

/**
 * array 数组类型声明
 *    类型[]
 *    Array<类型>
 */
// string[] 表示字符串数组
let arrStr: string[];
arrStr = ["a", "b", "c"];

let arrNum: number[];
let arrNum1: Array<number>;
arrNum1 = [1, 2, 3];

let arrAny: Array<any>;

8、tuple 元组

/**
 * tuple 元组，固定长度的数组
 *    语法：[类型，类型，类型]
 */
let tup: [string, string];
tup = ["hello", "123"];
// tup = ['hello', 'abc', '123'，123]; // 报错，长度类型与按要求

9、enum 枚举

/**
 * enum 枚举
 *
 */
enum Gender {
  Male = 0,
  Female = 1,
  unknown = -1,
}
let en: { name: string; gender: Gender };
en = {
  name: "XX",
  gender: Gender.Male,
};

10、& 与

// &表示与，同时
let and: string & number; // 错误写法
// 需同时满足两个对象的属性
let and1: { name: string } & { age: number };
and1 = { name: "XY", age: 18 };

11、类型别名

// 类型别名
type newType = string;
type newTypeNum = 1 | 2 | 3 | 4 | 5;
let type: 1 | 2 | 3 | 4 | 5;
let type1: 1 | 2 | 3 | 4 | 5;
let type2: newTypeNum;
let type3: newTypeNum;

type2 = 5;
// type3 = 6; // 报错