三分钟入门TypeScript(未完待续)

什么是TypeScript

1. ts就是typeScript的简称,是javascript的超集
2. 它比原生js多出了类型支持
3. ts是由微软开发完成,能运行ts的地方也可以运行javascript

TypeScript环境调配

1. 全局安装ts的包
   1. npm i -g typescript
2. 把文件后缀名改为.ts就可以使用了

TypeScript类型注释

        ts对比js多了类型的注释

        一般写为

//js写法 
const str= 'hello world'
console.log(str)

//ts写法
const str:string = 'hello world'
console.log(str)

ts的类型

1. JS 已有类型

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

   2. 对象类型：object（包括，数组、对象、函数等对象）

2. TS 新增类型

   1. 联合类型

   2. 自定义类型(类型别名)

   3. 接口

   4. 元组

   5. 字面量类型

   6. 枚举

   7. void

   8. any 等

原始类型

1. number
2. undefined
3. string
4. boolean
5. null

联合类型

1. let arr:number | string = 'abc'  多个类型中间添加|竖杠

数组类型

1. let arr: string[ ] = [ ]   在名称后添加:类型[]

2. let arr:(number | string)[ ] = [ ]        联合数组类型

类型别称 type

type fn = (number | string)[] 
let arr:fn= []

函数

                1.定义单个函数类型

// 普通函数
function 函数名(形参1： 类型=默认值， 形参2：类型=默认值): 返回值类型 { }

// 箭头函数
const 函数名（形参1： 类型=默认值， 形参2：类型=默认值):返回值类型 => { }

                2.定义多个函数类型

const add1 : (n1:number,n2:number)=>number  =  (a,b)=>{return a+b }
//提取自定义类型
type Fn = (n1:number,n2:number) =>number 
const add1 : Fn = (a,b)=>{return a+b }

  void

                1.如果函数没有返回值,那么返回值那一栏填写void

                2.void不等于undefined

// 如果什么都不写，此时，add 函数的返回值类型为： void
const add = () => {}
// 这种写法是明确指定函数返回值类型为 void，与上面不指定返回值类型相同
const add = (): void => {}

// 但，如果指定 返回值类型为 undefined，此时，函数体中必须显示的 return undefined 才可以
const add = (): undefined => {
  // 此处，返回的 undefined 是 JS 中的一个值
  return undefined
}

void和undefined的区别

1. 如果函数没有指定返回值，调用结束之后，值是undefined的

2. 当不能直接声明返回值是undefined

function add(a:number, b:number): undefined { // 这里的会报错
  console.log(a,b)
}

函数-可选参数

场景

使用函数实现某个功能时，参数可以传也可以不传。

例如：数组的 slice 方法，可以 slice() 也可以 slice(1) 还可以 slice(1, 3)]

这种情况下，在给函数参数指定类型时，就用到可选参数了

格式

可选参数：在可选参数名的后面添加 ?（问号）

function mySlice(start?: number, end?: number): void {
  console.log('起始索引：', start, '结束索引：', end)
}

注意：可选参数只能出现在参数列表的最后，也就是说可选参数后面不能再出现必选参数

可选和默认值的区别

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

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

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

对象类型-单独使用

掌握给对象指定类型的描述

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 }  

说明:

1. 使用 {} 来描述对象结构

2. 属性采用属性名: 类型的形式，如果是多行，可以省略,

3. 方法采用方法名(): 返回值类型的形式

4. 可选使用 ?

对象类型-类型别名

用类型别名来简化定义对象的类型的方式

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

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

function f1 (p: Persion) :void {
  
}

对象类型-接口

场景

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

1. 类型别名， Type

2. 接口, interface

格式

interface 接口名  {
    属性1: 类型1, 属性2: 类型2,
}

示例

interface IGoodItem  {
    name: string, price: number, func: ()=>string
}


const good1: IGoodItem = {
    name: '手表',
    price: 200,
    func: function() {
        return '看时间'
    }
}

const good2: IGoodItem = {
    name: '手机',
    price: 2000,
    func: function() {
        return '打电话'
    }
}

解释：

1. 使用 interface 关键字来声明接口

2. 接口名称(比如，此处的 IPerson)，可以是任意合法的变量名称，推荐以 I 开头

3. 声明接口后，直接使用接口名称作为变量的类型

接口和类型的区别

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

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

• 不同点:

  • 接口，只能为对象指定类型。它可以继承。

  • 类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名

推荐：能使用 type 就是用 type

接口继承

分析

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

继承格式

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

接口继承的示例

interface Point2D { x: number; y: number }
// 继承 Point2D
interface Point3D extends Point2D {
  z: number
}

元组

元组 Tuple

元组是另一种特殊的数组：

• 它确切地包含多少个元素

• 特定索引对应的类型

let position: [number, number] = [39.5427, 116.2317]

解释：

1. 元组类型可以确切地标记出有多少个元素，以及每个元素的类型

2. 该示例中，元素有两个元素，每个元素的类型都是 number

示例

模拟定义useState。

useState的返回值是一个数组，第一个元素是number，第二个是修改number的函数。

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

const [num ,setNum] = useState(10)

字面量类型

let str1 = 'hello 武汉'
const str2 = 'hello 武汉'

通过 TS 类型推论机制，可以得到答案：

1. 变量 str1 的类型为：string

2. 变量 str2 的类型为：'Hello TS'

解释

1. str1 是一个变量(let)，它的值可以是任意字符串，所以类型为:string

2. str2 是一个常量(const)，它的值不能变化只能是 'hello 武汉'，所以，它的类型为:'hello 武汉'

• 注意：此处的 'Hello TS'，就是一个字面量类型，也就是说某个特定的字符串也可以作为 TS 中的类型

字面量类型

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

说明：

1. 上面的let a等价于const

2. 简写为 const a = 'abc'

字面量：{ name: 'jack' } [] 18 20 'abc' false function() {}

字面量的作用

单个字面量没有什么用处，它一般和联合类型一起使用 ， 用来表示一组明确的可选值列表