js与ts的区别不大，个人认为：ts就是加了些强制性，进行约束。
1.安装
npm install typescript -g
tsc --version
2.编写个HelloWorld来试试
进入编程文件夹，1- npm init -y 生成package.json文件，2- tsc --init 创建tsconfig.json文件，3- npm install @types/node --dev-save ：解决模块的声明文件问题
4- 编写 HelloWorld.ts：
var a:string = "HelloWorld"
console.log(a)
此时的文件是 ts文件，在编辑器内（例：webstorm）：打开Terminal，输入 tsc HelloWorld.ts ，这时候就会生成HelloWorld.js文件
3.TypeScript中的类型介绍
Undefined :
Number:数值类型;
string : 字符串类型;
Boolean: 布尔类型；
enum：枚举类型；//很多值是多个并且是固定 , 如：春、夏、秋、冬
any : 任意类型，一个牛X的类型；
void：空类型；
Array : 数组类型;
Tuple : 元祖类型；
Null ：空类型。
var age:number = 18
var lee:string = "leesession"
var b:boolean = true
enum REN{ nan , nv ,yao}
console.log(REN.yao) //返回了2，这是索引index，跟数组很想。
enum REN{ nan = '男', nv = '女', yao= '妖' }
console.log(REN.yao) //返回了妖 这个字
let arr1:number[ ] //声明一个数值类型的数组
let arr2:Array<string> //声明一个字符串类型的数组
let d:Date = new Date()
//正则
let reg1:RegExp = new RegExp("jspang") //表示字符串规则里含有jspang
let reg2:RegExp = new RegExp("jspang",'gi')
//推荐
let reg3:RegExp = /jspang/
let reg4:RegExp = /jspang/gi
4.TypeScript的函数
1- 声明（定义）函数必须加 function 关键字；
2- 函数名与变量名一样，命名规则按照标识符规则；
3- 函数参数可有可无，多个参数之间用逗号隔开；
4- 每个参数参数由名字与类型组成，之间用分号隔开；
5- 函数的返回值可有可无，没有时，返回类型为 void；
6- 大括号中是函数体。
function searchXiaoJieJie(age:number):string{
return '找到了'+age+'岁的小姐姐'
}
var age:number = 18
var result:string = searchXiaoJieJie(age)
// ?表示可传参，可不传
function searchXiaoJieJie2(age:number,stature?:string):string{...}
//表示有默认参数
function searchXiaoJieJie2(age:number=18,stature:string='苗条'):string{...}
//剩余参数就是形参是一个数组，传递几个实参过来都可以直接存在形参的数组中
function searchXiaoJieJie3(...xuqiu:string[]):string{...}
var result:string = searchXiaoJieJie3('22岁','大长腿','瓜子脸','水蛇腰')
5.类
模拟一个小姐姐的类，小姐姐需要有年龄，有姓名，会说“小哥哥好”。这里的constructor 和 react 中理解相同
class XiaoJieJie{
name:string;
age:number;
constructor(name:string,age:number){
this.name = name
this.age = age
}
say(){
console.log('小哥哥好')
}
}
let jiejie:XiaoJieJie = new XiaoJieJie('王祖贤',18)
jiejie.say()
在ts类中，跟后台的语言都一样，有修饰符之分
public:公有修饰符，可以在类内或者类外使用public修饰的属性或者行为，默认修饰符。
protected:受保护的修饰符，可以本类和子类中使用protected修饰的属性和行为。
private : 私有修饰符，只可以在类内使用private修饰的属性和行为。
class XiaoJieJie2{
public sex:string
protected name:string
private age:number
public constructor(sex:string,name:string,age:number){
this.sex=sex
this.name=name
this.age=age
}
public sayHello(){
console.log('小哥哥好')
}
protected sayLove(){
console.log('我爱你')
}
}
var jiejie2:XiaoJieJie2 = new XiaoJieJie2('女','热巴',22)
console.log(jiejie2.sex)
console.log(jiejie2.name) //报错
console.log(jiejie2.age) //报错
jiejie2.sayHello()
jiejie2.sayLove() //报错
只读
class Man{
public readonly sex:string = '男'
}
var man:Man = new Man()
man.sex='女'
类的继承(react就是如此:class 组件 extends Component)
定义父类
class Jspang{
public name:string
public age : number
public skill: string
constructor(name:string,age:number,skill:string){
this.name = name
this.age = age
this.skill = skill
}
public interest(){
console.log('找小姐姐')
}
}
let jspangObj:Jspang = new Jspang('技术胖',18,'web')
class JsShuai extends Jspang{
public xingxiang:string = '帅气'
public zhuangQian(){
console.log('一天赚了一个亿')
}
}
let shuai = new JsShuai("技术帅",5,'演讲')
类的重写
通过super关键字调用了父类的方法，实现了技能的增加
class JsShuai extends Jspang{
public xingxiang:string = '帅气'
public interest(){
super.interest()
console.log('建立电商平台')
}
public zhuangQian(){
console.log('一天赚了一个亿')
}
}
从 技术胖 那里学习
网友评论