TS的基本用法

安装TS

Node和浏览器不能直接运行TS，需要把TS转化成JS

实现TS向JS的转变

1. npm i typescript -g     #全局安装TS

2. tsc -v      #查看版本

3. tsc index.ts   #编译ts文件生成js文件

4. node index.js  #执行js代码

简化运行TS步骤 ts-node可以编译和执行ts文件

1. npm i -g ts-node     #全局安装ts-node包

2. ts-node index.ts      #将ts转化为js，然后运行js代码

TS基础类型

原始类型

number,string,boolean,undefined,null,symbol

冒号后面的内容叫：类型注解

let username: string = "张老师";
let age: number = 24;
let off:boolean = true;

数组类型

let arr: string[] = ['1'];
let arr1: (string | number | null | boolean)[] = [true, null, 2, 'wo', 1, 2, 3, 'uihguih'];
let arr2: [number, string] = [1, '1'];

元组

let position: [number,number] = [1,2]

元组可以指定长度，类型

对象类型

let obj:{name:string,age:number}={name:'张三',age:22}；
let obj2:{name:string,age:number}={name:'李四',age:24}；

类型别名

相同的类型能重复使用

type my = { name: string; age: number }；
type my1 = { name: string; age: number ;friends:my}；
let obj: my = { name: '张三', age: 24 }；
let obj1: my = { name: '李四', age: 28 }；
let obj2:my1={name: '李四', age: 28,friends:{ name: '王五', age: 30 }}；

函数类型

给函数添加类型实际给参数和返回值添加类型

//普通函数
function fn (num1:number,num2:number):number{
    return num1+num2
}

//箭头函数
const fn1=(num1:number,num2:number):number => {
    return num1+num2
}

//同时指定参数和返回值类型
const fn3:(num1:number,num2:number)=>number=(num1,num2)=>{
    return num1+num2
}

//void类型，没有返回值
const fn4=function (username:string):void{
    console.log('hello'+username);
}

//可选参数
function myslice(start?:number,end?:number){
    console.log('起始索引',start,'索引结束',end);
}
myslice()
myslice(10)
myslice(10,20)

TS访问修饰符

private：在当前类中定义的属性和方法
protected：访问当前类和子类
public：当前类、子类和实例化对象

	当前类	子类	实例化对象
private 私有	可以
protected 受保护的	可以	可以
public 公开的	可以	可以	可以

私有修饰符

只能够在该类的内部进行访问，实例对象并不能够访问

class Father {
    private name :String
    constructor(name:String){
        this.name=name
    }
}

const father =new Father('huihui')
father.name

继承该类的子类不能访问

class Father {
    private name :String
    constructor(name:String){
        this.name=name
    }
}

class Son extends Father{
    say(){
        console.log(`我的名字是${this.name}`);
    }
}

受保护修饰符

跟私有修饰符很相似，实例对象同样不能访问受保护的属性

class Father {
    protected name :String
    constructor(name:String){
        this.name=name
    }
}

const father =new Father('huihui')
father.name

protected 成员在子类中仍然可以访问

class Father {
    protected name :String
    constructor(name:String){
        this.name=name
    }
}

class Son extends Father{
    say(){
        console.log(`我的名字是${this.name}`);
    }
}

public

公开的在哪都能访问

class Father { 
    public name :String 
    constructor(name:String){ 
        this.name=name 
    }
} 
class Son extends Father{ 
    say(){
        console.log(`我的名字是${this.name}`);
    }
}

枚举类型

enum type {
    up = 1,
    down = 2,
    left = 3,
    right = 4
}

function choose(direct: type) {
    
}
choose(type.down)

type Direction = 1 | 2 | 3 | 4

function hand(direct: Direction) {

}

hand(1)

默认从0自增也可以设定初始值然后依次自增

interface 接口

interface type {
    name: string
    address(): string
    run(): number
}

class Person implements type {
    name: string
    constructor(name: string) {
        this.name = name
    }

    address():string{
        return `${this.name}去北京`
    }

    run(){
        return 666
    }
}

let p1 = new Person('张三')
console.log(p1.address());

泛型

1. 多个泛型变量的情况

泛型的类型变量可以有多个，并且类型变量之间还可以约束

function getData<T,k extends keyof T>(obj:T,key:k){
    return obj[key]
}
getData({name:'张三',age:18},'name')

2.泛型接口

接口也可以配合泛型来使用，以增加其灵活性，增强其复用性

// 泛型接口
interface type<T> {
    id: (val: T) => T
    ids: () => T[]
}

let obj: type<number> = {
    id(val) {
        return 1
    },
    ids() {
        return [1, 2, 3]
    }
}

3.泛型数组

实际上js的数组在ts上就是一个泛型接口

当我们在使用数组时，TS会根据数组的不同类型，来自动将类型变量设置为相应的类型

4.泛型类

class也可以配合泛型来使用

实例化对象需要加类型

// 泛型类
class Person <T>{
    name:T
    say:(a:T,b:T)=>T
}

let P =new Person<number>()
P.name=1

实例化对象不需要加类型

class Person<T>{
    name: T
    say: (a: T, b: T) => T

    constructor(val: T) {
        this.name = val
    }
}
let P = new Person(100)
P.name=1

5.泛型工具类型

TS内置了一些常用的工具类型，来简化TS中的一些常见操作，他们都是基于泛型实现的

Partial< Type >（可选类型）

用来构造一个类型，将Type的所有属性设置为可选

interface Props {
    id: string
    children: number[]
}

type PropsType = Partial<Props>

let p1: Props = {
    id: '12',
    children: [1]
}

let p2: PropsType = {
    id: '12',
    children: [1,3]
}

Readonly< Type >（只读类型）

用来构造一个类型将Type的所有属性都设置为只读

interface Props {
    id: string
    children: number[]
}


type PropsType = Readonly<Props>
let p1: PropsType = {
    id: '12',
    children: [1, 3]
}

p1.id=12 //这里会报错 无法为 “id” 赋值，因为它是只读属性

Pick< Type,Keys >（从Type中选择一组属性来构造新类型）

interface Props {
    id: string
    title: string
    children: number[]
}

type PickProps = Pick<Props, 'id' | 'title'>

Pick工具类型有两个变量：1.选择谁的属性 2.选择哪几个属性

第二个类型变量传入的属性，只能是第一个变量中存在属性

头灶出来的PickProps,只有id和title两个属性类型

Record< Keys,Type > （构造一个独享类型属性键为Keys,属性值为Type）

// 1.使用Record工具
type Recordobj = Record<'a'|'b'|'c',string[]>

// 2.使用传统方法
type Recordobj1={
    a:string[]
    b:number[]
    c:string[]
}

let obj :Recordobj1={
    a:['a'],
    b:[1],
    c:['c']
}

TypeScript相关知识