一个小时教你如何掌握ts基础

1.什么是TS

ts是微软的开源的编程语言，是js的超集，为js添加了类型的支持

从编程余元的动静来区分，typescript属于静态类型的编程语言，js属于动态类型的编程语言

• 静态类型：编译期做类型检查
• 动态类型：执行期做类型检查

2.安装编译ts的工具包

安装命令：npm i -g typescript  或者 yarn global add typescript

mac电脑安装全举报，需要添加sudo 获取权限：sudo npm i -g typescript  yarn

全局安装：sudo yarn global add typescript

typescript 包：用来编译 TS 代码的包，提供了 tsc 命令，实现了 TS -> JS 的转化，

转换js文件 tsc (ts文件名)

验证安装是否成功需要命令 tsc-v 查看版本

3.类型注解

let age1 = 10
let age1：number = 10

• 所有的 JS 代码都是 TS 代码
• JS 有类型（比如，number/string 等），但是 JS 不会检查变量的类型是否发生变化，而 TS 会检查

• 为变量添加类型约束。比如，上述代码中，约定变量 age 的类型为 number 类型

4.Ts类型概述

JS 已有类型

• 原始类型，简单类型（number/string/boolean/null/undefined）
• 复杂数据类型（数组，对象，函数等）

TS 新增类型

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

5.类型推论

在 TS 中，某些没有明确指出类型的地方，TS 的类型推论机制会帮助提供类型 换句话说：由于类型推论的存在，有些场合下的类型注解可以省略不写

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

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

6.数组类型

数组类型的两种写法

// 写法一：类型()
let arr1:number[] = [1,3,5]

//写法二:ArrAY<类型>
let arr2:Array<string> = ['a','b','c']

7.联合类型

够通过联合类型将多个类型组合成一个类型

// 数组中既有number类型 又有string类型，这个数组的类型应该如何写?

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

// | 叫做联合类型：有两个或多个其他类型组成的类型 表示可以是这些类型的任意一种类型

//应用场景
// 定义一个变量，类型是number 或者 null
let timer: number | null = null
timer = setInterval(() => {}, 1000)

// 定义一个数组，数组中可以有数字或者字符串
// 需要注意 | 的优先级
let arr: (number | string)[] = [1, 'abc', 2]

8.类名别名 - type(重要)

格式

定义type 别名 = 类型

type s = string

const str1:s = 'abc'

const str2:string = 'abc'

作用：

1.给类型起别名

2.定义了新类型

场景：

给复杂类型起别名

// 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'] 

9.函数- 单个定义

普通函数

function  函数名(形参1：类型= 默认值,形参2：类型=默认值)：返回值类型{}

箭头函数

const 函数(形参1:类型=默认值,形参2：类型=默认值)：返回值类型=>{}

10.函数 - 统一定义函数和格式

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

const add = (a:number,b:number):number =>{return a-b}

把拥有相同形参和实参的函数当做一个整体，来定义

提炼自定义类型

type fn =(n1:number,n2:number)=>number

const add1 :fn = (a,b)=>{return a+b}

11.函数返回值是void

void 类型

如果函数没有返回值，那么，函数返回值类型为：void

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

如果一个函数没有返回值，

在 TS 的类型中，应该使用 void 类型，有如下三种情况会满足

• 不写return
• 写return ，但是后面不接内容
• 写return 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)
}

12.函数-可选参数

格式

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

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

13.对象类型

// 空对象
let person: {} = {}

// 有属性的对象
let person: { name: string } = {
  name: '同学'
}

// 既有属性又有方法的对象
// 在一行代码中指定对象的多个属性类型时，使用 `;`（分号）来分隔
let person: { name: string; sayHi(): void } = {
  name: 'jack',
  sayHi() {}
}

// 对象中如果有多个类型，可以换行写：
// 通过换行来分隔多个属性类型，可以去掉 `;`
let person: {
  name: string
  sayHi(): void
} = {
  name: 'jack',
  sayHi() {}
}

14.元组

一种特殊的数组，他约定了元素的个数 及对应的类型

const num:[number,number] = [1,2]
值的类型必须对应类型

15.字面量

let str1 = ‘Hello’

let str2：string = ‘hello’ 

  1.str2是 string类型 他一定，必须保存字符串类型

  2.str1 是定义的'hello'类型

常用场景

  // 定义一个新类型。可能是string 或者 number
  type MyType = string |number

  // 定义一个新类型，可能是hello 或者是100
  type MyType2 = 'hello' | 100

  let m1:MyType2 ='hello'
  // 字面量类型， 单独使用没有场景
  // 他一定是联合类型一起使用 表示多个固定的之中取一个
  type gender = '男'| '女'
  let m2:gender ='女'

16.枚举

枚举比较特殊，这个类型有值

1.ts中的类型声明语句转换成js之后会丢弃，但枚举不会 使用枚举之后，会导致代码的体积变大

2.这个类型有值 conlose.log()可以正常输出

关键词

enum

enum Direction {'up','daow','left','right'}
// 使用enum关键字定义枚举
let m1:Direction = Direction.left

function f(d:Direction){
  if(d===Direction.daow){

  }
}

17.any类型

俗称摆烂类型

没有约束，让ts不管了

let obj：any ={a:1}

obj.a ='200'
obj.a = 200

18.断言类型

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

const aLink = document.getElementById('link')

{
  // 类型断言
  const img = document.getElementById('img') as HTMLImageElement
  img.src="xxx.xxxx.com.png1"
  const a = document.getElementById('a') as  HTMLAnchorElement
  a.href="www.xxxx.com"
}