TypeScript学习 | 青训营笔记

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

一、TypeScript是什么

TypeScript是JavaScript的超集

1、特点

2、优势

• 代码提示
• 拥有类型系统
• 支持最新的ES语法
• 拥有类型推断机制

3、体验TypeScript

安装typescript工具包，运行tsc命令，将TypeScript代码转换为JavaScript代码

简化运行：下载ts-node，可以就直接运行ts文件了

二、常用数据类型

1、JS已有类型

①原始类型：number/string/boolean/undefined/null/symbol

完全按照JS的类型来书写

let age:number = 18
let name:string = 'zjt'
let isLearning:boolean = true
let a:null = null
let b:undefined = undefined
let s:symbol = Symbol()

②对象类型：Object（数组、对象、函数等）

• 数组类型

数组类型的两种写法：

// 1、数据类型[]
let numbers:object[] = [{id:1},{id:2}]
// 2、Array<数据类型>
let numbers:Array<object> = [{id:1},{id:2}]

• 函数类型

// 1、单独指定参数和返回值类型
function add(x:number,y:number):number{
    return x+y
}
const add = (x:number,y:number):number=>{
    return x+y
}
// 2、同时指定参数和返回值类型
const add:(num1:number,num2:number)=>number = (num1,num2)=>{
    return num1+num2
}

可选参数：在参数后面加？

// 可选参数，他只能放在必选参数后面
function mySlice(start?:number,end?:number):void{
    console.log(start,end)
}

• 对象类型

let person:{name:string;age:number;sayHi(name:string):void} = {
    name:'jack',
    age:19,
    sayHi(name){
    console.log(name);
  }
}
person.sayHi(person.name)

可选属性：在属性后面加?

2、TS新增类型

①联合类型、自定义类型、接口、元组、字面量类型、枚举、void、any等

• 联合类型：由两个或者多个其他类型组成的类型

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

• 自定义类型：为任意类型起别名

作用：当其他地方重复使用这个类型时，可以通过它去封装，简化类型的使用

type CustomArray = (number | string)[]
let arr1:CustomArray = [1,'a',3]

• void类型

当函数没有返回值的时候可以用

• 接口

当一个对象类型被多次使用的时候，一般会使用接口去描述对象类型，达到复用

interface IPerson {
    name:string
    age:number
    sayHi():void
}
let person:IPerson = {
    name:'jack',
    age:19,
    sayHi(){}
}

interface和type的对比：

• 相同点：都可以给对象指定类型

• 不同点

  • 接口：只能为对象指定类型
  • 类型别名：不仅可以给对象指定类型，也可以为其他任意类型指定别名

interface IPerson {
    name:string
    age:number
    sayHi():void
}
type IPerson = {
    name:string
    age:number
    sayHi():void
}

接口继承extends：

当两个接口之间有相同属性或者方法，可以将公共属性或者方法抽离出来，通过继承来实现复用

interface Point2D{x:number,y:number}
interface Point3D{x:number,y:number,z:number}
// 继承写法
interface Point2D{x:number,y:number}
interface Point3D extends Point2D{z:number}

• 元组