Typescript ｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 3 天思维导图概念相关 ts是

这是我参与「第五届青训营」伴学笔记创作活动的第 3 天

思维导图

概念相关
- ts是js超集，静态语言（编译发生在运行前），弱类型语言（二者区别？强类型语言是一种强制类型定义的语言，即一旦某一个变量被定义类型，如果不经强制转换，那么它永远就是该数据类型。而弱类型语言是一种弱类型定义的语言，某一个变量被定义类型，该变量可以根据环境变化自动进行转换，不需要经过现行强制转换。）
基本内容
- 原始数据类型
  - 变量后使用冒号加上类型名
  - numer,string,boolean,null,undefind
- 任意值
  - any表示任意类型
- 类型推导
- 联合类型，交叉类型
  - 例子
  - 访问联合类型只能访问交集部分
- 对象的类型-接口
  - 通常使用一个接口来规范和描述对象，接口名通常用I开头
  - 只读属性，readonly
  - 可选属性，键名:?类型名
  - 任意属性，[propName:键名]:键值类型
- 数组类型
  - 类型名+方括号
  - 泛型表示
  - 元组表示
  - 接口表示
- 函数类型
  - 函数表达式
  - 函数对象
  - 函数接口
  - 重载，函数可能有多个入参和返回值类型。把详细的定义写前面，ts从前到后逐个匹配
- 类型断言
  - 手动指定类型，推荐写法值 as 类型
  - 只能通过编译，无法避免运行时的错误
  - 作用
    - 将一个联合类型断言为其中一个类型
    - 将一个父类断言为更加具体的子类
    - 将任何一个类型断言为 any 。
      - 一方面不能滥用 as any，另一方面也不要完全否定它的作用，我们需要在类型的严格性和开发的便利性之间掌握平衡（这也是 TypeScript 的设计理念之一），才能发挥出 TypeScript 最大的价值。
    - 将 any 断言为一个具体的类型。及时指明，防止一片any
      - 如某个函数返回值是any，最好调用返回值之后将其断言成一个精确的类型，便于后续操作
  - 限制
    - 只有相互兼容才能断言
- 声明文件
- 内置对象
  - JavaScript 中有很多内置对象，它们可以直接在 TypeScript 中当做定义好了的类型。方便在实际开发中使用
  - ECMAScript
    - Boolean、Error、Date、RegExp
  - BOM，DOM
    - Document、HTMLElement、Event、NodeList
  - ts核心库
  - nodejs
    - Node.js 不是内置对象的一部分，如果想用 TypeScript 写 Node.js，则需要引入第三方声明文件：npm install @types/node --save-dev
进阶
- 类型别名
  - type定义一个类型，可以和联合类型和交叉类型交叉搭配。
  - type 类型名=对应类型
- 字面量
- 枚举只能取某些值

代码

//基本
let a: number = 1;
let b: string = '1';
let c: boolean = true;
let d: null = null;
let f: undefined = undefined;

//对象
interface Iobj {
  name: string;
  readonly age: number; //只读
  sex: 'man' | 'woman'; //或
  hobby?: string; //可选
  // [key: string]: string; //约束所有对象属性都必须是该属性的子类型,否则报错
  [key: string]: any;
}
let myobj: Iobj;

//函数
function add(x: number, y: number): number {
  return x + y;
}
const mult: (x: number, y: number) => number = (x, y) => {
  //区分好两个箭头
  return x * y;
};
interface Idiv {
  (x: number, y: number): number;
}
const div: Idiv = (x, y) => x / y;

//泛型
interface Tobj<T> {
  myKey: T;
}
let tobj: Tobj<number> = {
  myKey: 1,
};

//数组
let arr: number[] = [1, 2, 3];
let arr1: Array<number> = [0, 1, 2];
let arr2: [number, string] = [1, '1'];
interface Iarr {
  [key: number]: number;
}
let arr4: Iarr = [1,2,3];

参考文章

字节讲义

资料中的Typescript部分gitee.com/hongjilin/h…

Typescript ｜ 青训营笔记

Typescript ｜青训营笔记