TypeScript入门 | 青训营笔记

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

Ts发展历史

2012-10：微软发布了 TypeScript 第一个版本（0.8）

2014-10：Angular发布了基于 TypeSctipt第一个版本（0.8）

2015-04：微软发布了Visual Studio Code

2016-05:@types/react发布，TypeScript可开发React

2020-09:Vue发布了3.0版本，官方支持TypeScript

2021-11:V4.5版本

Ts和Js的区别

Ts和Js都是弱类型语言

js是动态类型，ts是静态类型。

基本语法

1.基础数据类型

const q:string 'string';//字符串
const w:number = 1;//数字
const e:boolean true;//布尔值
const r:null = null;//null
const t:undefined = undefined;//undefined

2.对象属性

interface IBytedance{
    readon jobId:number;//只读属性
    name:string;
    gender:'man'|'woman'|'other';
    hobbby?:string;//可选属性，定义该属性可以不存在
    [key:string]:any//任意属性，约束所有对象属性都必须是该属性的子属性
}

3.函数类型

function add(x:number,y:number):number{
    return x+y;
}
const mult:(x:number,y:number) => number =(x,y) =>x*y;

4.数组类型

type IArry1 = number[];//[类型+方括号]表示
type IArry2 = Array<string | number | Record<string,number>>;//泛型表示
type IArry3 = [number,number,string,string]//元组表示
interface IArry4 = {
    [key:number]:any;
}//接口表示

5.补充类型

空类型：表示无赋值

任意类型：是所有类型的子类型

枚举类型：支持枚举值到枚举名的正、反向映射

泛型

6.字符串/数字 字面量

允许定义字符串/数字必须的固定值

IDomtag必须为html、body、div、span中的其一

type IDomTag = 'html' | 'body' | 'div' | 'span';

IOddNumber必须为1、3、5、7、9中的其一

type IOddNumber = 1 | 3 | 5 | 7 | 9;

7.Ts高级数据类型

• 联合交叉类型

  • 联合类型：IA|IB：联合类型表示一个值可以是几种类型之一，即既可以是|前的也可以是|后的数据类型
  • 交叉类型：IA&IB：多种类型叠加到一起成为一种类型，包含了所需的所有类型特性

  type IBookList = Array<{
      Author: string; //一定有的
  } & ({
      type: 'history'; //与此或者下面那种数据类型叠加在一起
      ranger: 'string';
  } | {
      type: 'story';
      range: string;
  }
  

• 类型保护或类型守卫

  itnerface IA { a: 1, a1: 2}
  ​
  itnerface IB { B: 1, B1: 2}
  ​
  /*类型守卫：定义一个函数，它的返回值是一个类型谓词，生效范围为子作用域*/
  function getIsIA(arg: IA | IB): arg is IA {
      return !!(arg as IA).a;
  }
  function log2(arg: IA | IB) {
      if(getIsIA(arg)) {
          console.log(arg.a1)
      } else {
          console.log(arg.b1);
      }
  }
  ​
  function logBook(book: IBookItem){
      //联合类型+类型保护 = 自动类行推断
      if(book.type === 'history'){
          console.log(book.range)
      }
      else{
          console.log(book.theme):
      }
  }
  

工程应用

使用TSC编译

• 安装node与npm
• 配置tsconfig.js文件
• 运行webpack启动or打包
• loader处理ts文件时，会进行编译与类型检查

Typescript工程应用 - Node

1.安装Node与npm

2.配置tsconfig.js

3.使用npm安装tsc

4.使用tsc运行编译得到js文件