ts基本的用法

156 阅读2分钟

1. ts本地环境

npm i -g typescript ts-node

初始化仓库 tsc --init

  • 编译ts文件为js文件 tsc index.ts

yarn init -y

//修改scripts
{
  "name": "ts-demo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start":"tsc index.ts"
  }
}

3.基本类型

let str:string = 'xxx';
let num:number=1000;
let bool:boolean =true;

4.数组的定义

  • 字符串类型的数组

第一种 自变量方式 let arr:string[]=['1111']

第二种 实例化 let arr:Array =['111']

  • 数组的数组类型

第一种 自变量方式 let arr:number[]=[11,11]

第二种 实例化 let arr:Array =[11,1]

5.对象的定义 interface 接口

定义的每个属性都必须加类型,还有要告我有什么属性

特点:只要写了interface接口,定义对象时智能的提示

interface 对象名{
    属性:数据类型
    属性1:数据类型
} 
let 对象名1:对象名={}

接口定义 
修饰符 ? 可填可不填 !必须填
interface User{
    name:string,
    age?:number
}
//根据User 类型定义对象
let user1:user={
    name:"张麻子",
}
console.log(user1);
user1.age =200;
console.log(user1);
张麻子 200


数组包对象
语法 let 对象名:接口名[对象的类型名] = {}
一个数组里面有个对象后面是数组
let arr:User[] = [{name:"xxx",age:40}],


对象包对象
对象了在定义一个对象
interface Food{
    area:string,
    food:string,
    price:number
}
interface User{
    name:string,
    age?:number,    //修饰符 ?【可选项】  !【必须有】   修饰符:
    like?:string[],  //该属性数一个字符串数组
    eat?:Food
}
let user1:User ={
 name:"二爷",
    age:18,
    like:['吃凉粉'],
    eat:{
    	area:"县城",
    	food:"面粉",
        price:1
	}

}

6.函数的定义

关于返回值 :如果是对象 返回类型自己定义interface 即可

如果没有返回值: 如何写返回类型? void any

void :空 一般用于 函数没有return 时 (没有返回值)

any: 表示任何数据都可以,且any类型的数据 可以 任意的赋值取值

interface Data{
      a:number,
      b:number
}
function sum(a:number,b:number):Data{
    let data:Data ={a:a,b:b};
    return data;
}
let num:Data=sum(100,200)

列子
//传入 身高 体重 BMI=(体重/身高/身高)
function Bmi(h:Number,w:Number):number{
    return w/h/h;
}
let b:Number = Bmi(1.7,50)

//要求 传入任意的数据类型  打印一下形参  return '1000'
    function fn(data:any):String{
        console.log(data);
        return'1000'
    }
    let str:string=fn([100,200,300])

7.类的定义

类名其实就是对象类型

let aa = new XXX() aa:XXX

//Es6类的原型链的
//Person name age coler eat:fn
//Student work:'学习' read:fn

class Person{
    constructor(name:String,age:Number,color:String){
        this.name=name;
        this.age = agg;
        this.color=color;
        
    }
    eat(food:String):String{
        return '正在吃东西'+food
    }
}

//继承了方法 和属性
class Student extends Person{
    constructor(name:String,age:Number,color:String,work:String){
        //超类
        super(name,age,color);
        this.work=work;
    
    }
    read(book:String):String{
        return '我在月兔' + book
    }
}