安装
使用方式1
需要node.js环境，npm install -g ts
tsc -v 查看ts的版本；tsc index.ts编译成index.js文件
*自动编译成js
image.png
如此编译后的ts文件在js文件目录，更多请看tsconfig.json配置详解
使用方式2
npm install -g typescript
npm install -g ts-node
ts-node demo.ts
数据类型
// ts中的10个数据类型
/*
布尔（boolean）
数字
字符串
数组
元组（tuple）
枚举（enum）
任意（any）
null和undefined
void类型
never类型
*/
var bool:boolean=true;
console.log(bool)
var nums:number=123;
console.log(nums);
var str:string="我是字符串类型";
console.log(str);
// 数组的两种定义方式
var arr:number[]=[12334,324];
console.log("第一种数组方式：",arr)
var arr1:Array<number>=[123]
console.log("第二种数组方式：",arr1)
//数组中的元组(为数组中得到每一个数，声明类型)
var arr2:[number,string]=[12,"str"];
console.log(arr2);
// 枚举
//数字枚举（有自增，有反向映射）
enum color{red=1,blue=2,success=4,error=3}
console.log(color)
//反向映射如：{1: "red", 2: "blue", 3: "error", 4: "success", red: 1, blue: 2, success: 4, error: 3}
console.log(color.blue)//都没有赋值，访问的是下标，某一个没有赋值，访问的是之前的数+1
//异构枚举
enum Person {
name = 1,
love = 'LOVE',
age = 2,
hobby = 'HOBBY'
}
console.log(Person)
//字符串枚举 （无反向映射）
enum Person1 {
name = 'NAME',
age = 'AGE',
love = 'LOVE',
hobby = 'HOBBY'
}
console.log(Person1)
// 任意类型
var renyi:any=[12,"234"];
console.log(renyi)
// never类型 表示从来不能能出现的类型
// var xx:never;
// xx=(()=>{
// var aa:any= new Error("异常")
// throw aa;
// // throw aa.name;
// })();
函数
// 函数的定义 2种
function run1():number{
return 213123;
}
console.log(run1())
var run2=function():number{
return 123;
}
console.log(run2())
//函数中的参数问题
// 1、ts中形参的个数必须和实参数量一直，这里出现一个可选参数？
function run3(name:string,age?:number):void{
if(age){
console.log(age)
}else{
console.log(name)
}
}
run3("李木子");
// 2、默认参数
// 3、剩余参数
// 4、函数的重载
// 两个及两个以上的同名函数，参数个数不同,类型不同，即不同的参数执行不同的方法
// 上边是声明
function add (arg1: string, arg2?: string): string
function add (arg1: number, arg2: number): number
// 因为我们在下边有具体函数的实现，所以这里并不需要添加 declare 关键字
// 下边是实现
function add (arg1: string | number, arg2?: string | number) {
// 在实现上我们要注意严格判断两个参数的类型是否相等，而不能简单的写一个 arg1 + arg2
if (typeof arg1 === 'string' && typeof arg2 === 'string') {
console.log(1)
return arg1 + arg2
} else if (typeof arg1 === 'number' && typeof arg2 === 'number') {
console.log(2)
return arg1 + arg2
}
}
add("1")
es5中的类和继承
//es5中的类额和继承
//原型继承和对象的冒充
//构造函数1
function Persion(name,age){
this.name=name;
this.age=age;
this.runs=function(){
console.log("es5的构造方法");
}
}
//原型继承
Persion.prototype.names="原型的names";
Persion.prototype.fnss=function(){
console.log("原型继承的names方法")
}
// 静态方法
Persion.fns=function(){
console.log("我是es5中的静态方法")
}
// new Persion().fnss()
// Persion.fns()
//构造函数2
function web(value,index,age){
this.value=value+1;
this.index=index+1;
//对象额冒充继承
Persion.call(this,name,age);//继承persion 并且可以给构造函数传参，缺点是无法继承父类原型上的方法和静态方法，只能继承构造函数中
}
let w=new web("李四",1,12);
w.runs()
//原型继承可以调用构造函数也可以使用父类的原型但是，不能给父类传参，所以采用组合的方式继承；
web.prototype=Persion.prototype;
let w2=new web("李四",1,12);
w2.fnss();
console.log(w2.names);
//静态方法不能被继承
es6中的类和继承
// es6中的类和继承
class myclass{
constructor(name,age){
this.name=name+1;
this.age=age;
}
//方法
getInfos(){
console.log("es6的构造函数方法")
}
//静态方法
static infos(){
console.log("es6的静态方法")
}
}
myclass.prototype.names="es6原型names";
myclass.prototype.fnes6=function(){
console.log("es6原型链上的方法")
}
// 第二个类实现继承
class myclass2 extends myclass{
constructor(name,age,index){
super(name,age)/*实例化子类的时候把子类的数据传给父类*/
// super指向的是当前对象的原型对象 指向父类
this.index=index;
}
}
let es6=new myclass2("name",12,"index")
console.log(es6.names)
es6.getInfos()
console.log(es6.name)
ts中的类和继承
//typescript 类的定义和使用
class TsPersion{
name:string;
constructor(name:string){
this.name=name;
}
getnames():string{
return this.name;
}
static sd(){
console.log("sd")
}
}
let p1=new TsPersion("李三");
console.log(p1.getnames());
// ts类的继承
class persion2 extends TsPersion{
constructor(name:string){
super(name);
}
}
let p2=new persion2("李四");
console.log(p2.name,)
// ts类的修饰符
// public 不写，默认是public,任意类都可访问
// private 私有属性，只在当前类可以访问
// protected 当前 类及其子类可以访问,外部不可访问（包括）
class protectPersion{
protected name:string;
constructor(name:string){
this.name=name;
}
getname(){
console.log(this.name);
}
}
let protects=new protectPersion("保护的名字");
console.log(protects.name);//报错 ，name只在当前的类里边使用
console.log(protects.getname());//使用当前类的name 属性
//ts 类的静态属性和静态方法、抽象类和多态
class Person{
static sex="男";
constructor(sex:string){
//静态属性
Person.sex=sex;
}
static fnPerson(){
//静态方法只能调用静态属性
console.log(Person.sex);
}
}
Person.fnPerson();
//
网友评论