112. 基础

可以直接在.ts的文件里写javascipt。

运行ts有三种方法

1. webpack + babel(用babel把ts变成js文件)

2. Vite 2

   yarn create vite

   yarn create vite my-react-app --template react 

   会让选择用js还是ts，选择ts

   cd my-react-app
   yarn
   yarn dev

3. tsc

   tsc x.ts

使用tsc会比较麻烦，每次都需要把ts文件变成js文件，再用node执行，因此第一和第二种方法更通用。

tsx和ts的区别

tsx = ts + jsx

ts = ts

webpack + ts = ts + jsx

类型 vs 类

var x: string = 'hi'

就是在变量后面加个冒号:，然后加一个type

有两个bug需要注意下

typeof Object返回的是function

typeof null返回是object

JS中的类

面向对象编程有两种，

1. 基于class关键字

   class Person{
   	属性1
   	属性2
   	属性3
   	方法1
   	方法2
   	方法3
   }
   const p1 = new Person()
   p1.属性1
   p2.方法1（）

   可以看这篇文章

2. 基于原型

function Person(){
	var temp = {}
	temp.属性1
	temp.属性2
	temp.方法1
	temp.方法2
	return temp
}	
const p1 = Person()
p1.属性1
p1.方法1()

类型的两个好处

1. 减少bug

在运行之前就可以发现错误。

//js经典错误
const str = '1';
console.log(str + 1);//return 的是11

1. 可以做更牛逼的提示

TS的类型

const a: undefined = undefined;
const b: null = null;
const c: string = 'hi';
const d: boolean = true;
const e: symbol = Symbol('hi')
const f: bigint = 123n;
const obj:object = {}
const obj0:Object = {}
const arr:Array<string|number|null> = ['1','2',3,null]

const add = (a:number, b:number):number => a + b;
//输入a是一个number，输入一个b也是一个number，返回的也是number

TS的函数怎么写

1. 类型写在函数体

   const add1 = (a:number, b:number) => a + b

2. :后面

   const add2 = (a:number, b: number) => number = (a, b)=>a + b

3. type缩写

   type Add = (a: number, b: number)=> number
   const add3: Add = (a, b) => a + b

4. 有属性，只能用interface

   interface AddWithProps{
     (a:number, b:number):number
     xxx: string
   }
   const add2:AddWithProps = (a, b) => a + b;
   add2.xxx = 'yyy';

   TS中的any, unknown, void, never, enum, tuple

   any

   let a: any = "hi"
   a = 1

   unknown

   type B = {name: string}
   let b: unknown = JSON.parse('{"name":"frank"}')
   (b as B).name //断言

   通常使用在从外部获取到的数据，但是用之前需要明确

   void

   let print:() => void = function(){
   	console.log(1)
   	return 2
   }

   void用于函数return，表示空

   never

   type Dir = 1 ｜ 2 ｜ 3 ｜ 4
   let dir : Dir = 1
   
   switch(dir){
   	case 1:
   		break;
   	case 2:
   		break;
   	case 3:
   	 	break;
   	case 4:
   		break;
   	case undefined:
   		break;
   	default:
   		console.log(dir)
   		break;
   }

   never就是不应该出现的类型

type X = number & string //never
type Y = (1 | 2 |3) & (2 | 3 | 4)//2, 3

tuple

let p :[number, number] = [100,200]
let p2:[number, string, boolean] = [100, 'x', true]

元组是不可变更长度的数组

enum

enum Dir2{东, 南, 西, 北}
let d: Dir2 = Dir2.东
let d2: Dir2 = Dir2.西
console.log(d)

type Dir = "东" | "南" | "西" | "北"
type Dir3 = 0 | 1 | 2 | 3
let dir: Dir = "东"
let dir2: Dir = "男"

枚举, 不常用

如何给不同数据加type

范型就是给一个类型传一个参数

const a: Array<number> = [1, 2, 3]

Function不是范型

class是值还是类型？全都是

class A{

}
const B = A
const a:A = new A()

联合类型(|)和交叉类型(&)

联合类型

type A = {
  name:string;
  age:number;
}

type B = {
  name: string;
  gender: string;
}

const f = (n:number | B) =>{
  
}

联合类型还可以收窄数据范围

type A = 1 | 2

交叉类型

type A = number & string;
const a:A = 1
//会提示a是never，因为number和string没有交集

因此交叉类型不能是简单的将那八种类型组合

type A = {name: string} & {age:number}
const a :A = {name:"hi", age:5}

&一般是用来连接两个复杂类型

但是下面的例子会出现never，因为age出现了两种数据类型

type A = {name: string, age:boolean} & {age:number}
const a :A = {name:"hi", age:5}

怎么声明div的类型

const value = (document!.getElementById('xxx')! as HTMLInputElement).value
f(parseInt(value))