快速入门typescript语法1

1. TypeScript 是什么?

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

2. 为什么要为 JS 添加类型支持?

        JS 的类型系统是弱类型的，没有类型的概念,在写比较大的项目时,经常会遇到类型错误问题,但是写代码时.js不会提示你,只有运行时才会报错,严重影响开发效率

TS属于静态类型的编程语言

        它要先编译，再执行。不能直接执行，需要编译成js才能执行,它会在编译期间做类型检查，从而提前发现错误。配合 VSCode 等开发工具，TS 可以提前到在编写代码的同时就发现代码中的类型错误

要写ts代码,先下包,安装全局typescript

npm i  typescript -g

要写ts代码,则需要先创建 ts 文件 例如 hello.ts. 在终端中输入命令，tsc hello.ts

3. console.log报错问题

解决

1. tsc --init 生成配置文件 tsconfig.json

2. 写代码时，用{}包起来

4. TS类型注解

格式: 

let 变量名: 类型 = 初始值

let age: number = 18  //示例代码

let age: number = '18'  //错误代码
// 错误原因：将 string 类型的值赋值给了 number 类型的变量，类型不一致

上述代码中，约定变量 age 的类型为 number 类型，就只能给变量赋值该类型的值，否则，就会报错

建议: 可以使用vscode 中的Error Lens 这个插件来更好的提示

 5. 类型推论

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

1. 声明变量并初始化时

2. 决定函数返回值时

// 变量 age 的类型被自动推断为：number
let age = 18

// 函数返回值的类型被自动推断为：number
function add(num1: number, num2: number) {
  return num1 + num2
}

 7. 常用基础类型

将 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 = 18

// 字符串类型
let myName: string = '小花'

// 布尔类型
let isLoading: boolean = false

// undefined
let un: undefined = undefined

// null
let timer:null = null

8. 联合类型

格式   

let 变量: 类型1 | 类型2 | 类型3 .... = 初始值

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

|（竖线）在 TS 中叫做联合类型，即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种

9. 数组类型

// 写法一：
let numbers: number[] = [1, 3, 5] //  numbers必须是数组，每个元素都必须是数字

// 写法二：
let strings: Array<string> = ['a', 'b', 'c'] //  strings必须是数组，每个元素都必须是字符串

 如何定义一个数组，它的元素可能是字符串类型，也可能是数值类型。

结合联合类型来使用

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

10. 类型别名

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

type 别名 = 类型

type s = string // 定义

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

// type NewType = string | number

// let a: NewType = 1
// let b: NewType = '1'

// let arr: NewType[] = [1, '1']
    
type MyArr = (number | string) []
const arr:MyArr = [1, '1']

11. 函数的类型

// 函数声明
function add(num1: number, num2: number): number {
  return num1 + num2
}

// 箭头函数
const add = (num1: number=10, num2: number=20): number => {
  return num1 + num2
}

add（1,'1') // 报错

把拥有相同形参和实参的函数当做一个整体，来定义,提炼自定义类型

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

12. 函数-可选参数

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

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

12. 函数-默认参数

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

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

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

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