typescript入门 | 青训营笔记

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

Typescript 学习背景介绍

ts是基于js的语言，随着js项目体量的增大，js的灵活特点出现了些许弊端。所以需要ts对编程开发做更好的约束。ts由js的动态语言转为静态语言，即在编译阶段就确认变量的数据类型

Typescript 基础语法讲解

• Typescript类型

  基本数据类型在声明时 在 变量名 和 = 之间加入数据类型的声明

  let isDone: boolean = false;
  

  对象的类型声明需要用到interface关键字

  interface LabelledValue {
    label: string;
  }
  
  function printLabel(labelledObj: LabelledValue) {
    console.log(labelledObj.label);
  }
  

  只读，可选，任意

  width?: number; //可选
  readonly x: number;//只读
  

  函数类型的约束（参数 返回值）

  参数：在声明参数列表中写入类型声明 返回值在左括号前加入:数据类型

  function add(x: number, y: number): number {
      return x + y;
  }
  

  （也可以使用interface）

  函数重载：ts允许使用不同的参数，相同的函数名。（java也有类似功能）

• 泛型

  允许函数声明待确定数据类型的变量 ，由调用函数代码决定类型<>

  function identity<T>(arg: T): T {
      return arg;
  }
  

• 类型别名 & 类型断言

  类型别名：给声明的类型起自定义标识符(type关键字)

  type MyString = string;
  

  类型断言:告诉编译器这应该是什么类型，允许覆盖原有的推断

Typescript 高级类型讲解

1. 联合类型 & 交叉类型

   根据已经声明的类型的基础上结合而诞生新的类型

   交叉类型 & ：类型叠加到一起，同时满足多种类型

   联合类型 | ：类型的某个值可以是指定的几种类型其中一种

2. 类型守卫 & 类型保护

   类型保护：联合类型中相同的key才会产生联合效果

   类型守卫：是对类型的一种检查，类型收缩，将组合类型下的变量收缩视为其中的某个基本类型

   • 类型判断：typeof

   • 实例判断：instanceof

   • 属性判断：in

   • 字面量相等判断：==, ===, !=, !==

   • 自定义：创建函数判断

     
     function betterIsString (input: any): input is string { // 返回类型改为了 `input is string`
      return typeof input === 'string';
     } 
     

Typescript 工程应用

• webpack(web项目)使用ts

  1. 配置webapack loader相关配置
  2. 配置tsconfig.js文件
  3. 运行webpack启动/打包
  4. loader处理ts文件时，会进行编译与类型检查

• node使用ts

  1.安装Node与npm 2.配置tsconfig.js文件

  3.使用npm安装tsc 4.使用tsc运行编译得到js文件