TypeScript认识|青训营笔记

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

TypeScript发展历史

• 2012-10:微软发布了TypeScript第一个版本(0.8)
• 2014-10:Angular发布了基于TypeScript的2.0版本
• 2015-04:微软发布了Visual Studio Code
• 2016-05: @types/react发布， TypeScript 可开发React
• 2020-09: Vue发布了3.0版本，官方支持 TypeScript
• 2021-11:v4.5版本发布ript类型

什么是TypeScript

静态类型

• 可读性增强：基于语法解析TSDoc，ide增强
• 可维护性增强：会在编译时就会出现大部分的错误

​ 适合用于大型的项目中

Js的超集

• 可以包容各种版本的JS特性
• 支持渐进式引入与升级

基本语法

基本数据类型

1. JS已有类型
   • 原始类型
     • number
     • String
     • Boolean
     • bigInt
     • Symbol
     • undefined
     • null
   • 对象类型
     • Array
     • Function
     • object
     • 正则之类
2. TS新增类型
   • 联合类型
   • 类型别名（自定义类型）
   • 接口
   • 元组
   • 枚举
   • 字面量类型
   • void
   • any...

原始类型

const q= 'string';
const w = 1;
const e = true;
const r = null;
const t = undefined;

const q:string = 'string';
const w:number = 1;
const e:boolean = true;
const r:null = null;
const t:undefined = undefined;

对于基本类型的，我们可以直接当作js来写

对象类型

TS对每一个对象都进行了具体的说明

Array类型

const numbers :number[] = [1,2,3];//推荐
//表示是一个number类型的数组，里面的值全部都是number
const strings: Array<string> = ['a', 'b', 'c']

假如我们的Array里面既有number又有string

那么我们可以使用联合类型来进行说明

const arr :(number|string)[] = [1,'a',2,'b']

因为可能我们不是只在一处使用这种数组，所以我们可以起一个别名，这样就可以方便使用，这就叫做类型别名

type NewArray = (number|string)[];
let arr1 :NewArray = [1,2,'a'];

使用类型别名后，可以直接使用类型别名作为变量的类型注解即可

函数类型

1. 有参数类型

// 第一第二number分别为参数num1,num2添加数字类型，第三个number则为返回值添加数字类型
function plus(num1: number, num2: number): number {
  return num 1+ num2
}
plus(1,2) // 3

// 使用箭头函数的写法，进行声明
const add = (num1: number, num2: number): number => {
  return num1 + num2
}
add(2,3) // 5

2. 无参数类型

// 第一第二number分别为参数num1,num2添加数字类型，第三个number则为返回值添加数字类型
const add: (num1: number, num2: number) => {
  return num1 + num2
}
add(2,3) // 5

// void类型
function greet(name: string): void {
  console.log('hello',name)
}
greet('summer')

对象类型

let person: {name: string; age: number; sayHi(): void; greet(name: number):void} = {
  name: '大佬好',
  age: 18,
  sayHi() {},
  greet(name) {}
}

直接使用{}来描述对象结构

对于属性，我们采用属性：类型

• 对于可选属性，我们使用?

  let person: {name?: string; age: number; sayHi(): void; greet(name: number):void} = {
    age: 18,
    sayHi() {},
    greet(name) {}
  }
  

对于方法，我们采用方法名():返回值类型

• 如果方法里面含有参数，我们也可以指定参数的类型

  let person: {greet(name: number):void} = {
    greet(name) {}
  }
  

• 也可以采用箭头函数写法

  let person: {name: string; age: number; sayHi:()=> void; greet:(name: number)=>void} = {
    name: '大佬好',
    age: 18,
    sayHi:()=> {},
    greet:(name)=> {}
  }
  

TS新增类型

interface

当一个对象被多次使用的时候，我们就会使用接口，以便达到复用

因为每一行只有一个属性类型，因而属性类型后没有;

interface Person {
  name: string
  age: number
  sayHi(): void
} 

let person: Person = {
   name: 'summer',
   age: 16,
   sayHi(){}
}

接口VS类型别名（interface Vs type）

interface只可以是对象类型的，但是type可以是任意类型

元组

就是个数确定的数组

let tunple:[number,number] = [1,2];
//表明有两个值，两个值都是number

字面值类型

就是为你设置了值，以后你也只可以赋值为这个值

let sex:'male';
//字面值也只是一种定义，不是赋值
console.log(sex);//undefined

注意

// 思考一下，以下两个变量类型分别为？
let str1 = 'hello dalao'//类型是string

const str2 = 'hello dalao'//但是类型就是hello dalao
//因为const值就不允许改变，所以就ts认为是一个字面值

枚举类型

enum Gender{
    male,
    female
}
// 限制类型
// i是一个对象，含有name属性和sex属性，其中sex属性是一个枚举
let i: { name: string, sex: Gender }
// 因为在实际的开发中，我们的性别这种一般都是用，0，1表示的
i = {
    name: 'summer',
    sex:Gender.male
}
console.log(i.sex === Gender.male);//true

any类型