TS入门教程

别救了这猴子废了
448 阅读8分钟

关于TypeSript，就不得不提到Microsoft了，Ts（TypeSript叫起来太繁琐了，就叫Ts就好了）是微软于2013年经历预览版之后正式发布的编程语言，可以在任何可以运行JS的地方运行。

       TS简单来说，就是JS的超集，也就是说，只要是JS有的东西，TS都有，只不过TS毕竟是超集，因而，它在JS基础之上添加了类型支持。

示例：

//TS 的代码有明确的数据类型
let name:string='typescript'
//JS 的代码数据类型不是很明确
let name='javascript'

       为什么已经有了JS，微软还要大费周章的去开发另一门编程语言呢，主要还是因为JS语言本身的局限性比较大，对于大型项目的开发以及维护比较繁琐，因而就诞生了TS。

TS和JS的区别

1.JS属于动态类型的编程语言，而TS属于静态编程语言，JS在运行时，可以一边解析一边执行，不过TS就需要先编译成JS才能执行

2.TS完全可以兼容JS，通过tsc-node第三方包可以直接编译成JS

3.TS的数据类型非常明显，有比较强大的代码类型提示，让我们在写代码的时候就及时发现问题

运行TS代码

1.全局安装TS编译包

yarn global add typepscript
//可以用tsc-v查看版本号
typescript:可以用来编译TS代码，并提供tsc命令，从而实现TS=》js的转化

注意：使用MAC安装全局包时，需要添加sudu获取权限：sudo yarn global add typescript

2.编译TS代码

  • 创建TS文件==TS文件的后缀名为 .ts
  • 编译，将TS编译为JS，tsc + 所需要编译的TS文件名，此时，就会在同级目录中出现一个与TS同名的JS文件
  • 执行JS代码--node执行后，在浏览器中运行即可

安装ts-node第三方包来运行TS文件

这是很原始的方法，每次编写查看结果很麻烦，所以，这里会安装一个ts-node第三包来执行TS文件（项目里则会搭建脚手架）

  1. 全局安装 ts-node 

    yarn global add ts-node

  2. 执行TS文件

    ts-node TS文件名

TS类型注解

格式

let 变量名:数据类型 = 初始值

注意：初始值的类型一定要跟定义的类型相同，否则会报错

TS数据类型

一般来说，TS的常见基础类型一般分以下两种：

JS原有的类型

    • 原始类型：number/string/boolean/null/undefined/symbol
    • 对象类型：object/array/function 

TS新增的类型

  • 联合类型
  • 自定义类型（类型别名）
  • 接口
  • 元组
  • 字面量类型
  • 枚举
  • void
  • any
  • unkown

原始类型

示例：

//number类型
let Num:number=66

//string类型
let Str:string='66'

//boolean类型
let Boo:boolean=true

//undefined
let Und:undefined=undefined

//null
let Nul:null=null

//symbol
let Sym:symbol=symbol()

类型推论

在TS中，在某些没有明确指定类型的情况下，TS的类型推论机制将会自动提供类型

场景：1.声明变量初始化时  2.决定函数的返回值时

联合类型

语法：

let 变量:(number | string...类型|类型)=初始值

注意： | 在TS中叫做联合类型，即两个或多个类型组合的类型

类型别名

语法：

type 别名=类型

这里用到了 try 关键字,作用是定义新类型

数组类型

语法1：

let arr:number[]=[1,2,3]

语法2：

let arr:Array<number>=[1,2,3]

函数类型

函数涉及的类型实际上指的是：函数参数和返回值的类型\

单个定义

语法1:(普通函数)

function 函数名（形参：类型=默认值，实参：类型=默认值）：返回值类型{return 返回值}

语法2:(箭头函数)

const 函数名=（形参：类型=默认值，实参：类型，默认值）：返回值类型=>{return 返回值}

统一定义函数格式

场景：定义多个具有相同参数类型和返回值类型时

语法：

//提炼自定义类型
type Fn=(m:number,n:number)=>number
const arr:Fn=(m,n)=>{reutrn a+b}

可选参数

场景：使用函数的某个功能时，参数可传可不传

语法：

//在可选参数名的后面添加 ?
const Func=(a:number,b?:number)=>{}

注意：可选参数一定要在非必选参数的后面

可选值和默认值的区别

相同点：调用参数，可以少传参数时用到可选值

不同点：在设置了默认值之后，不写就会使用默认值，可选的参数一定会有值

注意：二者不能在一起使用，优先使用默认值

void类型

作用：在TS中，如果一直函数没有返回值，就要使用void类型

场景：

  • 不写return

    const Void=()=>{} //此时返回值的类型为void

  • 写了return ，但是不返回任何东西

    const Void=()=>{return }

  • return undefied

    const Void=():void=>{
   return undefined
}

注意：只要返回值的类型是void，那么返回值就是undefined

void和undefined的区别

区别：如果函数没有指定返回值，调用结束之后，值是undefined，但是不能直接生命返回值是undefined，否则会报错

对象类型

语法：

const 对象名: {
  属性名1：类型1，
  属性名2：类型2，
  方法名1(形参1: 类型1，形参2: 类型2)： 返回值类型,
  方法名2:(形参1: 类型1，形参2: 类型2) => 返回值类型
} = { 属性名1: 值1，属性名2：值2  }

可选属性

语法：

const 对象名: {属性名1？：类型1，属性名2：类型2 } = { 属性名2：值2 }

类型别名

语法：

// 创建类型别名
type Person = {
  name: string，
  age: number
  sayHi(): void
}

// 使用类型别名作为对象的类型：
let person: Person = {
  name: '小花',
  age: 18
  sayHi() {}
}

元组类型

元组也是一种特殊的数组，元组的特殊之处：

  • 约定了元素个数
  • 约定了特殊索引对应的数据类型

示例：

function useState(n:number):[number,(number)=>void]{
   return [n,(n1)=>{n=n1}]
}
const [count,setCount]=useState(100)

接口

场景：当一个对象类型被多次使用时，有如下两种方式来来描述对象的类型，以达到复用的目的。

语法：

interface 接口名  {
    属性1: 类型1, 属性2: 类型2,
}
//声明接口后，直接使用接口名称作为变量的类型，接口名称一般以'I'开头

接口和类型别名（type）的区别

interface（接口）和 type（类型别名）的对比：

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

  • 不同点:

    • 接口，只能为对象指定类型。它可以继承。
    • 类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名

注意：推荐使用type就type

接口继承

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

语法：

interface 接口2 extends 接口1 {
    属性1： 类型1， // 接口2中特有的类型
    ... 
}

字面量类型

任意的 JS 字面量（比如，对象、数字等）都可以作为类型使用，此时，就称为是字面量类型\

作用：单个字面量没用，一般和联合类型一起使用，用来便是一组明确的可选值列表

示例：

type ActionType = 'ADD_TODO' | 'DEL_TODO'
function reducer(type:ActionType) {
  if(type === 'ADD_TODO')
}

枚举

语法：

enum 枚举名 {值...}

用法：

枚举名.值

示例：

enum Did {top,bootom,left,right}

let op:Did=Did.top

op=Did.left

枚举的值

枚举类型和ts中其他的类型不一样，枚举类型不仅仅是类型，还是一个值。\

注意：type定义的类型是没有值的，枚举定义的类型是有值

any

any类型脱离了TS的类型约束，与JS一样，可以任意设置数值类型

场景：

  1. 定义一个函数，输入任意类型的数据，返回该数据类型
  2. 临时使用any来避免书写过长，复杂的类型

隐式any

  1. 声明变量不提供类型也不提供默认值
  2. 定义函数时，参数不给类型

原则:不推荐使用 any!这会让 TypeScript 变为 “AnyScript”(失去 TS 类型保护的优势)

类型断言

作用： 手动指定值的类型

场景：有时候你会比 TS 更加明确一个值的类型，此时，可以使用类型断言来指定更具体的类型。

语法：

const 变量=值 as 类型



使用 as 关键字实现类型断言

关键字 as 后面的类型是一个更加具体的类型（HTMLAnchorElement 是 HTMLElement 的子类型）

typeof

作用：可以用来获取变量或属性的类型

场景：根据已有变量的值，反向推断出获取该值的类型，来简化类型书写

语法：

type 类型 = typeof 变量

注意：typeof 只能用来查询变量或属性的类型，无法查询其他形式的类型

keyof

作用：获取某个对象/类型的属性名来构成新类型

语法：

type 类型 = keyof 类型
type 类型 = keyof 对象常量
avatar
文章
阅读
粉丝