TS笔记

Ts笔记

一、类型推断

发生在没有指定类型时，会根据初始值自动推断变量类型

let str = 'asdasdasds'
str = 0 //报错： Type 'number' is not assignable to type 'string'.

二、类型断言/注解 as

有些时候编译器不能推断出变量的类型，

但我们非常确定变量是某种类型时 : as number/string/...

let arr = [1,2,3]
const result = arr.find(item=> {
    item> 2
}) as number  

html元素

/*
    HTMLAnchorElement,  <a>
    HTMLPargraphElement, <p>
    HTMLDivElement       <div>
    HTMLImageElement    <img>
*/
const a  = document.querySelector('#id') as HTMLAnchorElement
a && a.href //这样才知道a有href属性

三、类型基础&联合类型&函数

//基础类型
let v1: string = 'asd'
let v2: number = 123
let v3: boolean = true
let v4: null = null
let v5: undefined = undefined
let v6: symbol = Symbol(123)
let v7: bigInt = BigInt("223565679085")

//联合类型
let str: string | null = null        //str可能是string类型也可能是null类型
let num: 1 | 2 | 3 = 2；   			//限制值为 1或2或3
let arr: (number | string)[] = [1,2,'asd']	//数组里有可能同时两种类型，提示只有两者类型共有的方法

//函数
//void 专门用在函数返回值
function MyFn(a: number, b: string):void {
	return a+b   //报错 void没有返回值
}
function MyFn(a: number, b: string, C?: boolean, ...rest: number[]):string {
	return a+b   //ok
}
const f = MyFn(20, 'a', true, 1,2,3,4)

复杂类型

//数组 ---2种方式
let arr: number[] = [1, 2, 3]
let arr1: Array<string> = ['a', 'b', 'c']
//元组
let tup: [number, string, number?] = [1, 'a', 2] 	//可选可以[1, 'a']
tup[0] = 'a' 			//报错
//枚举
/*用来定义一些固定的值， 
1. 可以通过下标直接访问
2. 默认从0下标开始
*/
/*
数字型枚举 
 打印MyEnum
{
  '0': 'up',
  '1': 'down',
  '2': 'left',
  '3': 'right',
  up: 0,
  down: 1,
  left: 2,
  right: 3
}
*/
enum MyEnum {
    'up',
    'down',
    'left',
    'right'
}
MyEnum.up //0
MyEnum[0] //up
/*
3. 属性可以不打引号
4. 可以指定下标，下面的属性会自动推断
*/
enum MyEnum {
     up = 100，
     down
}
/*
5. 可以进行字符型枚举
    !失去了MyEnum[UP]=='up'的能力
*/
enum MyEnum {
     up = 'UP'
}
MyEnum.up // UP
MyEnum['up'] // UP

接口

• interface 只能定义对象, 也可以是实例对象
• 必须实现接口里面的所有内容，且不能多不能少
• 定义对象优先interface

interface Person {
    name: string,
    age: number
}
/*继承
1. 父接口所有属性方法不用再写一遍，
2. 不可以重写父类方法
*/
interface Itman extends Person {
    skill: string[],

}
const p1: Itman = {
    name: 'blank',
    age: 21,
    skill: ['js','vue']
}

泛型接口

interface Student<T> {
    id: T
    name: string 
}
let stu : Student<number> = {
    id: 0x110,
    name: 'blank'
}
console.log(stu);

别名 type

• type 可以定义所有类型

//值别名
type b = 0 | 1
//类型别名
type MyType = string | number
type myType2 = string & number
//--- 函数别名
type fnType = (a: number, bb: number)=> number
let fn: fnType = (a, b)=> {
    return a+b
}
//--- 对象别名
type student = {
    name: string,
    height: number,
    girlfriend?: student,
    study: (subject: string) => string,
    back: ()=>void
}
let stu: student = {...}
stu.girlfriend?.name  //对于可省略属性需要加 ?.

 

泛型 <T>

基本使用

function myFn<T>(a: T, b: T): T[] {
    return [a,b]
}
myFn<number>(1,2)
myFn('a',2) //报错： 不写指明T，会根据第一个参数推断T

添加约束

1. 泛型T可以继承接口，必须实现接口所有属性、方法，可以超出接口没有的

interface ILength {
    length: number,
    sayHi: () => void,
}
// T 继承了ILength， 所以T必须有ILength所有属性、方法
function getId<T extends ILength>(val: T) {
	val.length
	val.sayHi()
}

//T 可以有超出 ILength的属性、方法
let so = {
    length: 123,
    sayHi() {
        console.log("sayhi")
    },
    father: 'lzy'
}
getId(so)

多个变量

K extends Keyof T 即 Son类型限定了 传入的变量只能是Father类型的键

function getProp<T, K extends keyof T>(obj: T, key: K) {
    return obj[key]
}
console.log(getProp({name: 'lzy'}, 'name'))
console.log(getProp({name: 'lzy'}, 'age')) //报错

class中使用ts

interface ILength {
    length: number,
    sayHi: () => void,
}
//实现多个接口
class A implements ILength,B{
    //定义实例属性，必须要在下面得到初始化值
    length: number;
    constructor(length:number) {
        this.length = length
    }
    sayHi() {
        console.log('hi');
    }
}
let a = new A(123)

修饰符

• public: 公有的可以在任何地方可以被访问和修改(类中属性和方法默认为publish)
• private: 私有的仅在当前类可访问和修改
• protected: 仅当前类与子类(继承类)可以访问和修改
• readonly: 只读修饰符, 仅可访问不可修改

any 类型

1. 失去了只能提示
2. 隐式any：
   1. 函数参数不定义类型
   2. 定义变量不定义类型也不给初始值

运行ts文件

1. tsc demo.ts
   # 生成一个demo.js 文件
   2. 在node环境执行
   
   ```bash
   ts-node demo.ts