TypeScript

什么是typescript

TypeScript，简称 ts，是微软开发的一种静态的编程语言，它是 JavaScript 的超集。

简单来说，

js 有的 ts 都有，所有js 代码都可以在 ts 里面运行。
ts 支持类型支持，ts = type +JavaScript。

那么 ts 和 js 有什么区别呢？

JavaScript 属于动态编程语言，而ts 属于静态编程语言。

js：边解释边执行，错误只有在运行的时候才能发现
ts：先编译再执行，在写的时候就会发现错误了（ts不能直接执行，需要先编译成 js ）
ts 完全支持 js ，可以直接转换
ts 有类型支持，有强大的代码类型提示

类型注解

// let 变量名: 类型 = 初始值
let age: number = 18

基础类型

原始类型：number/string/boolean/null/undefined/symbol
对象类型：object（包括，数组、对象、函数等对象）

ts新增类型

联合类型
自定义类型(类型别名)
接口
元组
字面量类型
枚举
void
any

联合类型

let 变量: 类型1 | 类型2 | 类型3 .... = 初始值
let arr1 :number | string = 1 // 可以写两个类型

如何定义一个变量可以是null也可以是 number 类型? 这个时候，前面所学的已经不能满足我们的需求了，就需要用到一个新的类型 - 组合类型。

注意：这里的 | 竖线，在 TS 中叫做联合类型，即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种。不要和 js 中的 || 搞混哦。应用场景：定时器id

类型别名

//  type 别名 = 类型

type s = string // 定义

const str1:s = 'abc'
const str2:string = 'abc'

给类型起别名定义了新类型

别名可以是任意的合法字符串，一般首字母大写

数组类型

// 写法1：
let 变量: 类型[] = [值1，...]:
let numbers: number[] = [1, 3, 5] 
//  numbers必须是数组，每个元素都必须是数字
// 写法2：
let 变量: Array<类型> = [值1，...]
let strings: Array<string> = ['a', 'b', 'c'] 
//  strings必须是数组，每个元素都必须是字符串

类型推论

有如下两种场景

1、声明变量并初始化时

let value = true
value = 123 // 报错：不能将类型 “number” 分配给类型 “boolean”。

2、决定函数返回时

// 声明式实际写法:
function add(num1: number, num2: number) {
  return num1 + num2
}

在 TS 中，某些没有明确指定类型的情况下，TS 的类型推论机制会自动提供类型。好处：由于类型推论的存在，有些情况下的类型注解可以省略不写

类型断言

类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构，它没有运行时的影响，只是在编译阶段起作用，TypeScript会假设程序员已经检查过

// 类型断言
let someValue = "this is a string";
// 如果写的是any找长短的时候编译器是找不到length属性的,类型断言后就可以找到
let strLength: number = (<string>someValue).length;


let str: any = "this is a string";
let strLen: number = (str as string).length;

函数

// 普通函数
// function 函数名(形参1： 类型=默认值， 形参2：类型=默认值,...): 返回值类型 { }
// 声明式实际写法:
function add(num1: number, num2: number): number {
  return num1 + num2
}

// 箭头函数
// const 函数名（形参1： 类型=默认值， 形参2：类型=默认值, ...):返回值类型 => { }
const add2 = (a: number =100, b: number = 100): number =>{
  return a + b
}
// 注意： 箭头函数的返回值类型要写在参数小括号的后面
add（1,'1') // 报错

统一定义函数格式

const add2 = (a: number =100, b: number = 100): number => {
    return a + b
  }

function add1 (a:number = 100 , b: number = 200): number {
    return a + b
  }

这里的 add1 和 add2 的参数类型和返回值一致，那么就可以统一定义一个函数类型

type Fn = (n1:number,n2:number) => number 
const add3 : Fn = (a,b)=>{return a+b }

这样书写起来就简单多了

函数返回值void

// 如果什么都不写，此时，add 函数的返回值类型为： void
const add = () => {}

// 如果return之后什么都不写，此时，add 函数的返回值类型为： void
const add = () => { return }

const add = (): void => {
  // 此处，返回的 undefined 是 JS 中的一个值
  return undefined
}
// 这种写法是明确指定函数返回值类型为 void，与上面不指定返回值类型相同
const add = (): void => {}

可以用到void 有以下几种情况

函数没写return
只写了 return，没有具体的返回值
return 的是 undefined

函数可选参数

//可选参数：在可选参数名的后面添加 ?（问号）
function slice (a?: number, b?: number) {
    // ? 跟在参数名字的后面，表示可选的参数
    // 注意：可选参数只能在 必须参数的后面
    // 如果可选参数在必选参数的前面，会报错
    console.log(111);
    
  }
  slice()
  slice(1)
  slice(1,2)
}

可选和默认值的区别

相同点：调用函数时，可以少传参数

区别：设置了默认值之后，就是可选的了，不写就会使用默认值；可选的参数一定有值。

注意：它们不能一起使用。优先使用默认值

对象类型

普通对象类型

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

类型别名对象类型

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

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

接口

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

//  interface 接口名  {
//    属性1: 类型1,
//    属性2: 类型2
//  }
// 这里用 interface 关键字来声明接口
interface IGoodItem  {
  // 接口名称(比如，此处的 IPerson)，可以是任意合法的变量名称，推荐以 `I` 开头
  name: string, 
  price: number, 
  func: ()=>string
}

// 声明接口后，直接使用接口名称作为变量的类型
const good1: IGoodItem = {
  name: '手表',
  price: 200,
  func: function() {
      return '看时间'
  }
}
const good2: IGoodItem = {
    name: '手机',
    price: 2000,
    func: function() {
        return '打电话'
    }
}

接口和类型的区别

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

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

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

先有的 interface，后有的 type,推荐使用 type

// 接口的写法-------------
interface IPerson {
  name: string,
  age: number
}

const user1：IPerson = {
  name: 'a',
  age: 20
}

// type的写法-------------
type Person  = {
  name: string,
  age: number
}
const user2：Person = {
  name: 'b',
  age: 20
}

接口继承

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

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

interface a { x: number; y: number }
// 继承 a
// 使用 extends(继承)关键字实现了接口
interface b extends a {
  z: number
}
// 继承后，b 就有了 a 的所有属性和方法(此时，b 同时有 x、y、z 三个属性)

元祖

元组是一种特殊的数组。有两点特殊之处

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

枚举

枚举（enum）的功能类似于字面量类型+联合类型组合的功能，来描述一个值，该值只能是一组命名常量中的一个。在没有 type 的时候，大家都是用枚举比较多的，现在比较少了。

enum 枚举名 { 可取值1, 可取值2,.. }
// 使用格式：
枚举名.可取值

一般枚举名称以大写字母开头
枚举中的多个值之间通过 ,（逗号）分隔
定义好枚举后，直接使用枚举名称作为类型注解

any 类型

any: 任意的。当类型设置为 any 时，就取消了类型的限制。

ts学习第一弹