Typescript入门 (1)

一.Typescript开发环境搭建

1. 下载Node.js

//node官网
https://nodejs.org/zh-cn/

2. 安装Node.js
3. 使用npm全局安装typescript

//1.进入命令行
//2.输入以下代码
npm install typescript -g

4. 创建一个ts文件
5. 使用tsc对ts文件进行编译

//1.进入命令行
//2.进入ts文件所在目录
//3.输入以下命令：
tsc xxx.js

二、静态类型

基础静态类型

//number
const count:number=18
//string
const myName:string="偷一只猪ma"
//null,undefined,boolean,void,symbol

对象静态类型

//对象
const myObject:{
   name:string,
   age:number
}={
   name:"偷一只猪ma",
   age:18
}

//数组
const myArray:string[]=['小红','小象','小红象']

//类
class Person{}
const my:Person=new Person()

//函数类型
const myFunc:()=>string=()=>{return ""}

三.函数参数注解

function add({one, two}:{one:number,two:number}){
  return one+ two
}
const sum=add({one:1,two:2})

四.数组类型注解

const numberArr:number[]=[1,2,3]
const strArr:string[]=['1','2','3']
const undefinedArr:undefined[]=[undefined,undefined]
const arr:(string|number)[]=[1,'string',2]

//方法1
const myBoy:{name:string,age:number}[]=[
 {name:'xt',age:18},
 {name:'ljy',age:17}
]

//方法2 等价于
//type alias 类型别名
type Boys={name:string,age:number}
const myBoy:Boys[]=[
 {name:'xt',age:18},
 {name:'ljy',age:17}
]

//方法3 等价于
//类
class Boys{
  name:string;
  age:nubmer;
}
const myBoy:Boys[]=[
 {name:'xt',age:18},
 {name:'ljy',age:17}
]

五.元组的使用和类型约束

csv或者excel格式的导出的文件，产生的数据结构转化成js时，用元组去管理比较合适

//数组
//const myboy:(string|number)[]=['xt','ljy',18]

//元组
const myboy:[string,string,number]=['xt','ljy',18]
//csv(过时啦～～～)
const myboy:[string,string,number][]=[
 ['xt','boy',18],
 ['ljy','boy',17]
]

六.初识interface

interface Boy{
  name:string;
  age:number;
  gender:string
  waistline?:nubmer //‘?’表示waistline为可选属性
}
const boy={
  name:'xt',
  age:18,
  gender:'male'
}
const getResume=(boy:Boy)=>{
  console.log(boy.name+'年龄是'+boy.age)
  boy.waistline&&console.log(boy.name+'腰围是'+boy.waistline)
}
getResume(boy)

七.再识interface

interface Boy{
   name:string;
   [propname:string]:any; //key:value键值对其中key为string，value为任意类型
   say():string;//say()返回值为string类型
}
interface Man extends Boy{ //接口的扩展
    children:boolean
}
class myBoy implements Boy{ //类实现接口
    name='ljy';
    sex='male',
    say(){
     return "欢迎光临！"
    }
}
const boy={
   name:'xt',
   sex:'male',
   say(){
     return "欢迎光临！"
   }
}
const getResume=(boy:Boy)=>{
  boy.sex&&console.log(boy.name+'性别是'+boy.sex)
}
getResume(boy)

芜湖～～没了是不可能滴
后续请看Typescript入门（2）