安装: npm install -g typescript
安装之后检测版本 : tsc-v
TypeScript 转换为 JavaScript 代码 : tsc XX.ts
实时编译:通过tsc --init 生成tsconfig.json配置文件,修改json中的"outDir": "./编译后的文件名",IDE设置:
vsCode:点击任务-运行任务-选择typescript-选择watch监听 webstorm:www.cnblogs.com/pangchunlei…
console.log('hello ts!')
//ts数据类型
语法:let a:类型 = 值
//数值
let num:number = 0
console.log(num);
//字符串
let str:string = 'tcc'
console.log(str);
//布尔
let flag:boolean = true
//数组
let arr:Array<number> = [1,2,3] //way1:数组为数值
let arr1:string[] = ['a','b'] //way2:数组为字符串
let arr3:any[] = ['a',1,true,{'b':1}]
console.log(arr, arr1,arr3);
//元组
let arr2:[string,number,boolean] = ['a',1,true]
console.log(arr2);
//枚举enum
enum PayWay {
wechat,
allipay,
card,
cash
} //不设置值则默认为索引
let way1:PayWay = PayWay.wechat
console.log(way1);
enum Flag {
success = 1,
fail = -1
} //赋值则为值
let flags:Flag = Flag.success
console.log(flags);
enum Color {
red,
blue = 2,
yellow
} //不赋值则为索引,前一个赋值了则以前一个为基准+1
let colors:Color = Color.yellow
console.log(colors);
//any
let tcc:any = 'girl'
console.log(tcc);
//void 表示方法没有返回值
function f():void{
console.log(123);
}
f()
//有返回值,为数值//返回值需与定义类型一致 //函数声明
function n():number{
return 222
}
n()
//匿名函数
let func = function():number{
return 2223
}
func()
//传参 和可选参? 可选参写在最后,age参数放在前面会警告,可以设置默认参数
function funcs(name:string,sexy:string = 'girl',age?:number):string{
return 'aaa'
}
funcs('tcc')
//重载
function getInfo(name:string):string;
function getInfo(age:number):string;
function getInfo(sexy:string,flag:boolean):string
function getInfo(str:any,flag?:any):any{
if(flag){
console.log('flag存在');
}else {
if(typeof str === 'string'){
console.log('name');
return str
}else {
console.log('age');
return str
}
}
}
getInfo('tcc',true)
//class特征:
//1.继承
//public 父类、子类、外部都可以访问
//protected 父类、子类可以访问
//private 父类私有
class Person{
protected name:string;
constructor(n:string) {
this.name = n
};
like():void{
console.log(this.name)
}
}
class PP extends Person{
constructor(name:string){
super (name)
}
// like():void{
// console.log(this.name + 'like eat pineapple');
// }
hate():void{
console.log(this.name + 'hate cheat');
}
}
let person = new PP('tanchuchu')
person.like()
person.hate()
//实例方法、静态方法
class Per{
public name: string;
static nn:string = 'xiaohong';
constructor(nnn:string) {
this.name = nnn
}
like():void{
console.log(this.name + 'like ZJM');
}
static work():void{
console.log(this.nn + 'is working');
}
}
let pers = new Per('xiaoming')
Per.work()
//不管是静态方法还是静态成员,都是类级别存在的
也就是说随着类的加载而加载,优先于对象的存在
而非静态成员和方法是对象级别的存在
所以在静态方法中调用非静态的成员或方法(此时还不存在对象),是不可能的,但是反过来是可以的:非静态中调用静态。于是也就有静态方法中不能使用this和super关键字
//2.多态 多态也是一种继承
class Animal{
public name:string
constructor(name:string) {
this.name = name
}
eat():void{
console.log('吃什么呢');
}
}
class Dog extends Animal{
constructor(name:string) {
super(name);
}
eat() {
console.log(this.name + '' + 'eat bone');
}
}
class Cat extends Animal{
constructor(name:string) {
super(name);
}
eat() {
console.log(this.name + '' + 'eat maoliang');
}
}
//抽象类abstract 该类是一种标准 继承该类就必须实现其抽象方法
abstract class Plant {
public name:string;
constructor(name:string) {
this.name = name
}
abstract charater(): any; //抽象类方法不包含具体实现方法且必须在派生的子类中实现
need():void{
console.log('非抽象方法可以不实现');
}
}
// let plant = new Plant() //错误写法 抽象类不能被直接实例化
class Flower extends Plant{
constructor(name:string) {
super(name);
}
charater(): void { //继承抽象类必须就必须包含抽象类里面的抽象方法
console.log('this.name:' + this.name);
}
}
class Tree extends Plant{
constructor(name:string) {
super(name);
}
charater(): void {
console.log('this.name:' + this.name);
}
}
let res = new Flower('小花')
res.charater()
//3.封装 体现在上面两点特征中
//ts中的接口的用途
//1、属性类接口 关键词interface
interface FullName{
firstname:string,
lastname:string
}
function getName(name:FullName){
}
// way1:
getName({firstname:'tan',lastname:'chuchu'}) //只接受约束的参数名,不允许其他参数加入
//way2:
let obj = {
firstname:'tan',
lastname:'chuchu',
age:18
}
getName(obj) //这种方式接受其他参数存在 同时必须包含约束的参数
//2、函数类接口
//a.加密的函数类接口
interface encrypt {
(usename:string,password:number):string
}
let md5:encrypt = function (usename:string,password:number):string{
return usename+password
}
console.log(md5('tanchuchu', 954110));
let sha1:encrypt = function(name:string,password:number):string{
return name+password
}
console.log(sha1('tanchuchu', 954110));
//b.可索引接口 对象、数组使用 (不常用)
//b.1 可索引接口对数组的约束
interface userArr {
[index:number]:string
}
let arrr:userArr = ['aa','bb']
console.log(arrr[0]);
//b.2可索引接口对对象的约束
interface userObj {
[index:string]:string
}
let userobj:userObj = {name:'张三'}
console.log(userobj);
//3.类类型接口 关键词----实现扩展接口:implements 类似抽象类
interface Animals{
name:string,
like(like:string):void //必须包含这些属性或方法 ,参数可以不传,但方法必须实现
}
class Pigs implements Animals {
name:string
constructor(name:string){
this.name = name
}
like(like:string){
console.log(this.name+like);
}
}
let pig = new Pigs('zjm')
pig.like('grace')
//接口扩展 接口可以继承接口
interface animal{
eat():void
}//定义基础约束接口
interface People extends animal{
work():void
}//继承基础约束接口=拥有eat和work两个约束方法
class Man implements People{ //扩展接口
name:string
constructor(name:string) {
this.name = name
}
eat() {
console.log(this.name + 'eat');
}
work(){
console.log(this.name + 'coding');
}
}
let m = new Man('xiaoming')
m.eat()
m.work()