TypeScript

TypeScript 快速入门_w3cschool

开始

安装npm i -g typescript

• 是 js 的一个超集，兼容 javaScript
• 以 javaScript 为基础构建的语言。完全支持 js 的语法
• 只要不符合类型规范   都会报错提示。就像 java 那种了，虽然麻烦，但是后期好维护
• – 需要编译，加入注释，不编译的注释的
• – js 是脚本语言，不是设计用于大型 web 开发，js 中还没有提类、模板、ts 扩展实现了这些功能

Ts 与 Js 的区别

1. 相对弱类型的 js,类型化的 ts,更容易维护
2. ts 扩展类、模块的概念
3. ts 文件中可以写 js
4. 要在应用中使用 ts,必须先编译

编译 ts 文件 生成 js 文件

tsc  ts 文件名

---

声明变量时，需要有类型，赋值只可以时相同类型的值，函数的参数也要声明类型

字面量定义

/* 直接使用 字面进行类型声明 但值无法修改了，类似const常量 */
let k: 10;
/* k=12 */

/* 可以默认多个值，联合类型 */
let b: "male" | "fmale" | "cmale";

类型

String

Number

Object

/* Object 表示一个js对象 */
let a: object;
a = {};
a = function () {};

/* {} 用来指定对象中可以包含哪些属性 */
//语法：{属性名：属性值、属性名：属性值}
//在属性名后边加上？表示属性是可选的

let b: { name: string; age?: number };
b = { name: "孙悟空", age: 23 };

/* [propName:stirng]:any 可匹配多个任意类型属性， */
let c: { name: string; [propName: string]: any };
c = { name: "李四", age: 15, sex: "男" };

Boolean

Array<类型>

/* string[] 表示字符串数组 */
let e: string[];
e = ["a", "b", "c"];

//number[] 表示数值数组
let f: number[];
f = [1, 23, 22];

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

---

Any | unknown

/* any 任意类型,一个变量设置为了any,相当于关闭了此变量的TS的类型检测*/
/* 但不是特别推荐 */
/* let f: any; */

let f; //就像js那样声明变量，默认就是any类型（隐式any）
f = "sting";
f = 123;

let s: string;
s = f; //f的类型是any，它可以赋值给任意变量,会把其他变量的ts类型检测也给关了

/* unkonwn 表示未知类型，是所有类型的父类型 */
/* unkonwn 相当于一个类型安全的 any */
/* unkonwn 就表示不晓得，定义时不晓得啥子类型，但是使用时，就必须要明确的声明。*/
/* unkonwn 在使用 unKnown 类型的变量，将其赋值给某变量或函数时，必须断言其类型，就算有为其赋与过其他类型的值，使用 unknow 变量时，都必须为其添加断言，不然TS检测会报错 */

let u: unknown;
u = 10;
u = "hello";
const a: string = u as string;

/* 类型断言 可以用来告诉解析器变量的实际类型 */
s = u as string;
s = <string>u; // 该断言写法，在Tsx中不支持，且本身就容易混淆，eslint也不认可，一致使用 as 作为断言

void | never

返回值类型，也算是基础类型。没有返回值的函数: void

function sayHello(): void {
  console.log("hello world");
}

如果一个函数是永远也执行不完的，就可以定义返回值为 never

function errorFuntion(): never {
  throw new Error();
  console.log("Hello World");
}

另外 never 为所有类型的子类，无法再进行细分，也就意味着除了其本身没有类型可以再分配给它。

let amazing: never;
amazing = 12; // 报错：amazing是never类型不能分配给number类型
amazing = true; // 报错：amazing是never类型不能分配给boolean类型
amazing = "真神奇"; // 报错：amazing是never类型不能分配给string类型
amazing = {}; // 报错：amazing是never类型不能分配给{}类型
amazing = []; // 报错：amazing是never类型不能分配给[]类型

元组

/* 元组，元组是固定长度的数组 */
/* 
    语法 [类型，类型，类型]
*/
let h: [string, number, boolean];
h = ["stirng", 12, true];

枚举

/* enum 枚举, 增加可读性,枚举的参数可以赋值，也可以不用  */
enum Gender {
  Male,
  Female,
}

let i: { name: string; gender: Gender };

i = {
  name: "张三",
  gender: Gender.Male,
};

灵活类型

/* 基本数据类型 定义类型 | 的用法 */
let j: string | number;
j = 12;
j = "把子君";

/* & 一般只会用在对象上 */
let k: { name: string } & { age: number };
k = { name: "孙悟空", age: 123 };

/* 定义类型的别名 --自定义类型 */
type myType = 1 | 2 | 3 | "上";
let z: myType;
z = "上";
z = 1;
z = 2;
z = 3;

类 class

• 一般用 class 做类型， 使用时，要 new 了过后才用，这样 class 中定义的默认值才能生效。

接口 interface

接口就相当于一个自定义的类型

---

函数

function funName():returnType

• returnType:如果函数没有返回值，就写void
• 如果有 return,参数类型一定要和 returnType 一样。

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

参数

形参必须携带类型

可选形参 需要在参数后面、冒号前面加

- ![](https://cdn.bazijun.top/yuqueImg/FpeDn408Ib7IP4DBAWJLGH-RyTIC.png)

参数默认值

- ![](https://cdn.bazijun.top/yuqueImg/Foc3emSu6yYFnJhsvqSajm8Wlx2c.png)