TypeScript学习

 

1.   TS核心-介绍

 

TypeScript是具有强类型语法的JavaScript，是一门强类型的编程语言，变量不能随意被不同类型的数据进行赋值。

 

带来的好处：1.提前发现代码错误（静态类型检查，代码敲好会自动进行检查数据类型）；2.良好的代码开发习惯，提升开发效率。

 

2.   搭建TS编译环境

TypeScript编写的代码是无法直接在js引擎（浏览器/NodeJs）中运行的，最终还需要经过编译变成js代码才可以正常运行。 

搭建手动编译环境 ：

// 1.安装typescript包（编译引擎），作用是将ts代码转换诚js代码

npn install -g typescript

// 2.执行【tsc 文件名.ts】,生成【文件名.js】文件

tsc 文件名.ts

 

搭建工程化下的自动编译环境（不需要自己执行tsc等命令）

基于工程化的TS开发模式（webpack / vite），TS的编译环境已经内置了，无需手动安装配置，通过以下命令即可创建一个最基础的自动化的TS编译环境

 3.TS类型注解

 概念：类型注解指的是给变量添加类型约束，使变量只能被赋值为约定好的类型, 同时可以有相关的类型提示

 

 

 

 

 

 

 

 

 

 

 

对对象类型进行注解！！！

1.使用接口

 

 

 

 2.使用type方式

 

 

 

 

字面量类型

 

 

 类型推论（不需要进行手工类型注解，自动进行类型注解）

 

any类型

 类型断言

 

 泛型！！

 

 

 

 

 

 

//简单类型注解
let age: number = 18
let name: string = 'yjy'
let isLoading: boolean = false
let nullValue: null = null
let underfinevalu: undefined = undefined

//数组类型注解
// let arr: number[]=[1,2,3,4]
let arr: string[]
arr = ['ni']

// 函数类型注解，本质是给参数、返回值注解
// 参数和返回值分开注解
// 定义函数表达式
const add1 = (a: number, b: number): number => {
  return a + b
}
// 使用函数
add1(1, 2)
//参数和返回值一起注解,只针对函数表达式
// type类型声明
type add2 = (a: number, b: number) => number
// 定义函数表达式
const add3: add2 = (a, b) => {
  return a + b
}
//  使用函数
add3(1, 2)

//  函数可选参数
const add4 = (a: number, b?: number): number => {
  if (b) {
    return a + b
  } else {
    return a
  }
}

// 函数无返回值,下面是错误，不能return出去
const add5 = (a: number, b?: number): void => {
  if (b) {
    return a + b
  } else {
    return a
  }
}


// 联合类型注解,一个变量可以赋予多个类型
let num: (number | string | number[])
num = 1;
num = '1'
num = [1, 2, 3]


// 类型别名
// 使用type将一个联合类型变成一个简单类型注解方式
type num = (number | string | number[])
let num1: num
num1 = 1
num1 = '1'
num1 = [1, 2, 3]

let foo: (number | string[])

let arr2Str = (a: (number | string)[], b: string): string => {
  return a.join(b)
}


// 对对象类型进行注解
// 方法1：使用接口interface
// 定义接口
interface num1 {
  name: string,
  age: number
}
// 使用接口
const num2: num1 = {
  name: '殷金勇',
  age: 1
}
// 定义可选的接口
interface num1 {
  name: string,
  age1?: number
}
// 使用接口
const num3 = {
  name: '1'
}

// 接口的继承
interface q {
  name: string,
  age: number
}
interface qq extends q {
  number: number
}

let qqq: qq = {
  name: '1',
  age: 1,
  number: 11
}


interface data {
  title: string,
  content: string
}

interface response {
  code: number,
  msg: string,
  data: data
}

// 使用type注解对象
type data1 = {
  title: string,
  content: string
}

type response1 = {
  code: number,
  msg: string,
  data: data1
}


// 字面量类型
let num11: number
let num111: 100

// 联合类型+字面量类型 = 更加确定数据类型
type num111= 1 | 2
const num1111: num111 =1
const num11111: num111= 3

// 类型推论
let qww =1

function addd(a: number,b: number){
  return a+b
}

// any类型
let adweda: any ={name:111}
adweda =1
adweda =2
adweda =null

// 泛型接口
interface tt<T>{
  name:string,
  age: number
  price:T
}
interface User{
  number: number
}
let aef: tt<User> ={
  name:'11',
  age:11,
  price:{
    number:11
  }
}

// 泛型别名
type tt1<T>={
  name:string,
  age: number
  price:T
}
type User1{
  number: number
}
let aef1: tt1<User1> ={
  name:'11',
  age:11,
  price:{
    number:11
  }
}

// 泛型函数
function fun<T>(a: T,b: T){
 let dewa: T
}

fun<number>
fun(1,3)

// 泛型约束
//定义接口
interface LengthObj{
  length: number
}

//泛型约束
function logLen<T extends LengthObj>(obj: T){
  console.log(obj.length)
}