TypeScript基础

TypeScript 是什么?

1. TypeScript 简称：TS，是 JavaScript 的超集。简单来说就是：JS 有的 TS 都有。JS写的代码在TS的环境下都能跑。

2. 在 JS 基础之上，为 JS 添加了类型支持。TypeScript = Type + JavaScript

3. TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行

TypeScript有什么作用?

        JS是弱类型的,没有类型的概念,当你类型写错了的时候只能再运行阶段才能发现,而TS属于静态类型的编程语言,先编译,后运行,它会在编译期间做类型检查，从而提前发现错误。配合 VSCode 等开发工具，TS 可以提前到在编写代码的同时就发现代码中的类型错误，减少找 Bug、改 Bug 时间

TypeScript如何使用

1.安装包

npm i -g typescript

 这个包会提供tsc命令

2.编译TS代码:在终端运行如下代码

tsc xxx.ts   (xxx.ts就是你写的ts文件)

 运行之后会在同级目录下生成一个JS文件xxx.js

 3.用node运行编译出来的js文件

node xxx.js

 运行之后就可以看到运行结果了

上面的使用过程也可以用ts-node简化一下,这个包可以直接运行TS文件

步骤:

1. npm i -g ts-node

2. ts-node xxx.ts

TS类型注解

背景:TypeScript 是 JS 的超集，TS 提供了 JS 的所有功能，并且额外的增加了：类型系统

语法格式 :

let 变量名: 类型 = 初始值

 示例代码:

let age: number = 18

常用基础类型

将 TS 中的常用基础类型分为两类

1. JS 已有类型

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

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

2. TS 新增类型

   1. 联合类型

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

   3. 接口

   4. 元组

   5. 字面量类型

   6. 枚举

   7. void

   8. any 等

联合类型 如何使用多种类型

let age: number | null = 10
  age = null
  console.log(age)

 在ts中叫做联合类型 由两个或多个其他类型组成的类型

数组类型

let 变量: 类型[] = [值1，...]

let 变量: Array<类型> = [值1，...]

 const text: (string | number)[] = []
  text.push(123)
  text.push('456')
  console.log(text)

  类名别名 可以给类名起别名

type 别名 = 类型

type s = string
  const str1: string = 'abc'
  const str2: s = 'def'
  console.log(str1, str2)

 函数 函数的参数和返回值的类型

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

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

function fn1 (a: number, b: number): number {
        return a + b
    }
    const fn2 = (a: number, b: number): number => {
        return a + b
    }
    const fn3 = function (a, b) {
        return a + b
    }

  函数 可选参数 在可选参数名后面添加 ？ （问号）

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

例如数组的slice方法 可以 slice() 也可以 slice(1) 还可以 slice(1, 2)

配合别名 统一指定函数类型

function fn1 (a: number, b: number): number {
        return a + b
    }
    const fn2 = (a: number, b: number): number => {
        return a - b
    }
    const sub: (a: number, b: number)=>number = (a, b)=>{ 
        return a - b
        }
    type Nn = (a: number, b: number)=>number
    const add: Nn = (a, b)=>{
        return a + b
    }

函数的返回值是void  就是函数没有返回值 例如不写return 写了return但是后面没有接内容 写return undefined

function greet(name: string): void {
  console.log('Hello', name)
}

如果指定返回类型为undefined 此时返回中 必须写 return undefined 才可以

void 和 undefined 区别 就是 如果函数没有指定返回值 调用结束后 值是undefined ，当不能直接声明返回值是 undefined 

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

 对象类型 接口

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

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

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

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

不同点:

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

interface 公共的属性或方法抽离出来，通过继承来实现复用

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

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

元组

是一种特殊的数组 确切的包含多少元素 特定索引对应的类型

function usestate (n: number): [number, (x: number) => void] {
  const setN = (n: number): void => {}
  return [n, setN]
}
const arr = usestate(10)
const t = arr[0]
const t1 = arr[1]
console.log(t, t1)

字面量类型

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

// 使用自定义类型:
type Direction = 'up' | 'down' | 'left' | 'right'
 
function changeDirection(direction: Direction) {
  console.log(direction)
}
 
// 调用函数时，写上''，就会有类型提示：
changeDirection('up')