TS学习笔记

1. 准备

1. 使用vscode,安装node

2. 安装typescript和ts-node

npm install typescript -g
npm install ts-node -g

ts兼容js,ts需要编译转成js运行

2. 语法

1. 规定类型

let a: number=1
let b: string = '张善'
let c: boolean = false
let d: null = null
let e: undefined = undefined
let f: symbol = Symbol()
//同理数组
let g: number[] = [1, 8, 8, 6]
let h: boolean[] = [false, true]
let i: Array<number> = [1, 8, 8, 6]
//数组可以上数字或者字符串
let j: (number | string)[] = [1, 8, 8, '6']
//要么是数字要么是字符串数组
let k: number | string[] = ['1', '8', '8']
//类型别名
type l = (number | string)[]
let m: l = [1, 8, 8, '6']
//函数规定类型
const n = (n1: number, n2: number): number => {
    return n1 + n2
}
//与上一种相同
const o: (n1: number, n2: number) => number = (n1, n2) => {
    return n1 + n2
}
//无返回值
function p(n1: string): void {
    console.log("你好" + n1);
}
//?表示参数可传可不传,有?参数放后面
function q(n1: string, n2?: string): void {
    console.log("你好" + n1);
}
//对象
let r: { n1: string; n2(): void } = {
    n1: "张善",
    n2() { }
}
//接口只能为对象指定类型,type可以给任意对象指定别名
interface s {
    n1: string;
    n2(): void
}
let t: s = {
    n1: "张善",
    n2() { }
}
//继承
interface u extends s {
    n3(): void
}
let v: u = {
    n1: "张善",
    n2() { },
    n3() { }
}
//用as实现类型断言
let w=document.getElementById('x') as HTMLAnchorElement
//任意类型,不推荐使用,默认就是any
let w1:any
let w3={x:1,y:2}
//下俩种相同,typeof只能查询变量或者属性的
function w2(point:{x:number,y:number}){}
function w4(point:typeof w3){}

2. 自面量类型

//如a的类型就是bc,某个特定的字符串也可以是ts中的类型
const a="bc"
function c1(params:"1"|"2"|"3") {
    console.log(params);
}

3. 枚举

enum a3{
    Up,
    Down
}
function c2(params:a3) {
    console.log(params);
}
//如果有值,每个枚举的成员有初始值
enum a4{
    Up=1,
    Down=2
}

4. 高级类型

1. class

class Person {
    readonly age: number
    gender: String
    constructor(age: number, gender: String) {
        this.age=age
        this.gender=gender
    }
    //修饰符默认是public,private是只能本类用,protected是本类及其子类
    //readonly只读除了构造方法之外不能修改
   public move(){
        console.log("走");
    }
}
//类继承俩种extends父类,或者implements接口;js只有继承,实现接口是ts提供的
class Student extends Person{
   private bark(){
        console.log("学习");
    }
}
new Student(1,"s").move()

2. 类型兼容性

//两种类型系统：1 Structural Type System（结构化类型系统） 2 Nominal Type System（标明类型系统）。
//ts 采用的是结构化类型系统，也叫做 duck typing （鸭子类型），类型检查关注的是值所具有的形状。
//对于对象类型来说,成员多的可以赋值给成员少的
//接口之间的兼容类似

class Point{
    b:String
}
class Point1{
    a:number
    b:String
}
const p1:Point=new Point1()

//函数兼容考虑:参数个数,参数类型,返回值类型
//参数个数参数少的赋值过参数多的
type F1 = (a: number) => void
type F2 = (a: number, b: number) => void
let f1: F1=(a: number) => {}
let f2: F2=f1

3. 交叉类型

interface Person1 { name: string }
interface Contact { phone: string }
type PersonDetail = Person1 & Contact
let obj: PersonDetail = {
  name: '1',
  phone: '0'
}

4. 泛型

//泛型收束指定更具体的类型,或添加约束
function id<Type>(value: Type[]): Type[] {
    console.log(value.length)
    return value
}
interface ILen{
    length:number
}
function id1<Type extends ILen>(value: Type): Type {
    console.log(value.length)
    return value
}
function getProp<Type, Key extends keyof Type>(obj: Type, key: Key) {
    return obj[key]
}
let person4 = { name: 'jack', age: 18 }
getProp(person4, 'name')

5. 泛型工具类

interface Props {
    id: string
    children: number[]
}
//构建出一个所有属性可选的类型
type PartialProps = Partial<Props>
//所有属性只读
type ReadonlyProps = Readonly<Props>
//选一组属性构建新类型
type PickProps = Pick<Props, 'id'|'children'>
type RecordObj = Record<'a' | 'b' | 'c', string[]>
let obj6: RecordObj = {
  a: ['1'],
  b: ['2'],
  c: ['3']
}

6. 索引签名类型

interface AnyObject <T>{
    [key: string]: T
}

7. 映射类型

type k1="a"|"b"|"c"
type k2={a:number,b:number,c:number}
type k3={[Key in k1]:number}
type k4={[Key in keyof k1]:number}
//查询属性的类型
type k5=k2["a"]
type k6=k2["a"|"b"]
type k7=k2[keyof k2]

3. ts的俩种文件类型

.ts和.d.ts结尾

.d.ts的是类型声明文件:可以用来给已经存在的js提供类型信息或者实现类型共享