浅谈typescript基础语法

如果有Java语法基础和javascript语法基础，那么学习typescript将是一段快乐的旅程，我们开始吧！

typescript编译选项

项目目录：

是tsconfig.json文件，这个json文件是支持写注释的，最后编译的js文件可以通过设置去除注释

{
    "include": [
        "./src/**/*"
    ],
    "exclude": [
        "./src/hello/**/*"
    ],
    "compilerOptions":{
        "target":"ES6",
        "module": "amd",
        "lib": ["DOM","ES2015"],
        "outDir": "./dist",
        "outFile": "./dist/app.js",
        // 是否编译js和检查js,和移除注释，默认为false
        "allowJs": false,
        "checkJs": false,
        "removeComments": true,
        "noEmit": false,    //不生成编译后产生的文件，几乎不用，一般用于在学习ts使用时，稍微检查下语法
        "noEmitOnError": false,   //当有错误时，不生成编译文件
    }
}

类与构造函数

class Animal{
    name:string;
    age:number;
    height:string;
    constructor(name:string,age:number,height:string){
        this.name = name;
        this.age = age;
        this.height = height;
    };
    sayHello(){
        console.log("我的名字是"+this.name+"我"+this.age+"岁"+"我的身高是："+this.height);
    }
}

let cat = new Animal("阿猫",20,'168');
let dog = new Animal("阿狗",30,'110');
cat.sayHello();
dog.sayHello();

继承与super父类初始化

(function(){
    class Animal{
        name:string;
        age:number;
        constructor(name:string,age:number){
            this.name = name;
            this.age = age;
        }
        sayHello(){
            console.log(`姓名为：${this.name},年龄为:${this.age}`);
        }
    }

    class Dog extends Animal{
        gender:string;
        constructor(name:string,age:number,gender:string){
            super(name,age);
            this.gender = gender;
        }
        sayHello(){
            super.sayHello();
            console.log(`性别为：${this.gender}`);
        }
    }
    const dog = new Dog("大狗",1000,"韩国妖狗");
    dog.sayHello();

	// 抽象类
    abstract class Car {
        price:string;
        brand:string;
        constructor(price:string,brand:string) {
            this.price = price;
            this.brand = brand;
        }
        abstract run():void;
    }

    class benChi extends Car{
        run(){
            console.log("奔驰可以带四个妹子上路");
        }
    }
    
    const glc = new benChi("30万","glc200");
    glc.run()

	// 使用getter/setter进行属性封装
    class City{
        private name:string;
        private size:number;
        getName(){
            return this.name;
        }
        setName(value:string){
            this.name = value
        }
        getSize(){
            return this.size;
        }
        setSize(value:number){
            this.size = value
        }
        // 定义有参数构造，就没有无参构造
        // constructor(name:string,size:number){
        //     this.name = name;
        //     this.size = size;
        // }
    }
    const shenZhen = new City();
    shenZhen.setName('深圳');
    shenZhen.setSize(25000);
    console.log('城市名:'+shenZhen.getName() + '  GDP为:' + shenZhen.getSize());
    
})()

构造器简便方法

class Test {
	//声明public,相当于定义了成员变量，并在构造方法中初始化
    constructor(public name:string,public age:number) {}
}
const t = new Test("黄杰",20)
console.log(t);    //Test {name: "黄杰", age: 20}

ts函数声明与定义函数体

// ts函数类型声明，定义
let mySum:(x:number,y:number)=>number = function(x:number,y:number){
    return x+y
}
console.log(mySum(1,2));

ts可选参数与参数默认值

// 可选参数与形参默认值
function buildName(firstName:string,lastName:string = 'cat',secondName?:string){
    return secondName ? firstName + ' ' + secondName+ ' '  + lastName : firstName+ ' ' + lastName;
}

console.log(buildName('tom','dog','hello'));  //tom hello dog
// 可选参数没有赋值会被定义成undefined，所以一般使用if判断是否为undefined
console.log(buildName('tom','dog'));    //index.js:9 tom dog

ts数组声明定义与函数可变参数

// 数组必须要声明时初始化
// let arr1:number[] 会报错arr1不存在
let arr1:number[] = [12];    
arr1.push(1)
console.log(arr1);

// 可变参数
function push(array:any[],...rest:any[]){
    console.log(rest);    //[2, 3, 4]
    rest.forEach(item=>{
        array.push(item)
    })
}
let arr2:number[] = [1]
push(arr2,2,3,4)
console.log(arr2);   //[1, 2, 3, 4]

在webpack中配置使用typescript

初始化package.json文件

在新建文件夹下执行npm init -y初始化package.json文件
在scripts节点下新增build打包配置

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

安装和配置webpack

1. 执行命令：npm i webpack webpack-cli -D
2. 项目根目录下，创建 webpack.config.js 配置文件
3. 在配置文件中配置：

const path = require('path')

module.exports = {
    mode:'production',
    entry:path.join(__dirname,'./src/index.ts'), //打包入口文件
    output:{     //打包的出口文件
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    },
    module:{
        rules:[
            {test:'/\.ts$',loader:'ts-loader',exclude:/node_modules/}   //解析ts的loader
        ]
    }
}

4 下载typescript和ts-loader依赖

package.json文件的开发依赖中出现以下配置信息

  "devDependencies": {
    "ts-loader": "^8.0.17",
    "typescript": "^4.2.3",
    "webpack": "^5.24.4",
    "webpack-cli": "^4.5.0"
  }

配置tsconfig.json文件

tsconfig.json的编译选项很多，可以参考本文 typescript编译选项

{
    "compilerOptions": {
        "target":"ES6",
        "module": "amd",
        "lib": ["DOM","ES2015"],
        "strict": true
    }
}

打包代码

新疆好的src文件夹下index.ts文件里编写一段ts代码，运行npm run build最终在dist文件夹下生成bundle.js文件