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
}
}