TypeScript基本知识

环境搭建

• 下载并安装nodejs，LTS版长期维护版
  下载地址： https://nodejs.org/en/
  检测是否安装成功： node -v。 （安装完node，其npm也自动安装成功）
  
• npm全局安装typescript

# 安装cnpm，cnpm国内镜像源
npm install -g cnpm -registry=https://registry.npm.taobao.org 
# 检查cnpm是否安装成功
cnpm -v

# 更新npm
npm install -g npm@9.1.2
# 查看npm
npm -v
# 安装typescript
npm i -g typescript
# 检查ts是否安装成功
tsc

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

类型声明

let a: string;
let b: number;
let c: boolean=false; // 声明变量为bool型并赋值
let a: 10; // 可以使用字面量进行类型声明

let a: string|number; // 可以使用或连接多个类型
let d: any; // 表示任意类型
d=1;
d='hello';
d=true;

let m unkonwn; // 未知类型
a='hi';
// 类型断言，告诉解析器变量的实际类型
s=a as string;
s=<string>a;

//a表示一个js的对象
let a: object;
a={};
a=function(){};

// 属性名后面加？，表示可选,age字段可选
let b: {name:string,age?:number};
b={name:"lily"};

//[proName:string]:any任意类型的属性
let c: {name:string,[proName:string]:any};
c={name:"lily",age:5,address:'beijing'};

// d为函数
let d: (a:number,b:number)=>number;
d=function(n1,n2):number{
	return n1+n2;
}

// 数组
let a: string[];
let a: number[];
let a: Array<number>;

//元组，元素值是固定的
let h: [string,number];

// 枚举
enum Color {Red, Green, Blue}
let c: Color = Color.Green;

tsconfig.json文件编译选项

{
  "compilerOptions": {
    "module": "commonjs", // 指定模块化的规范
    "target": "es5",  // 指定es版本
    "sourceMap": true,
   // "lib": [], // 用来指定要使用的库
    "outDir": "./dist", // 指定编译后的文件目录
    "outFile": "./dist/app.js", // 将代码合并为为一个文件，所有全局作用域中的代码会合并到一个文件中
    "allowJs": false, // 是否队js进行编译，默认false
    "checkJs": false, // 是否检查js是否符合语法规范，默认false
    "removeComments": true, // 编译时是否移除注释
    "noEmitOnError": false, // 有错误时不生成编译文件
    "alwaysStrict": true, // 用来设置编译后的文件是否为严格模式，有模块导入默认进入严格模式
    "noImplicitAny": true, // 不允许隐式any类型
    "noImplicitThis": true, // 不允许不明确类型的this，不明确代码中会有波浪线
    "strictNullChecks": true, // 严格检查空值

  },
  "exclude": [
    "node_modules"
  ],
    "include": [
        "./src/**/*"
    ] // 指定ts编译目录

}

使用webpackage打包ts代码

npm init -y # 项目初始化,生成package.json

cnpm i -D webpack webpack-cli typescript ts-loader # 下载包及开发依赖

npm run build  # 打包编译指令

cnpm i -D html-webpack-plugin # 下载插件
cnpm i -D webpack-dev-server 
cnpm i -D clean-webpack-plugin # 编译前清楚dist目录下的文件。执行npm run build会先清空dist目录的文件

cnpm i -D @babel/core @babel/preset-env babel-loader core-js # 解决兼容性问题

webpack.config.js文件

const path=require('path');

// 引入插件
const HTMLWebpackPlugin=require('html-webpack-plugin');
const { CleanWebpackPlugin } =require('clean-webpack-plugin');

// 所有配置信息
module.exports={
    // 指定入口文件
    entry: "./src/index.js", // 指定入口文件
    output: {
        path: path.resolve(__dirname,'dist'), // 指定打包文件目录
        filename: "bundle.js", // 打包后文件的文件
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [
                    {
                        loader: "babel-loader", // 指定加载器
                        options: {
                           presets:[
                               [
                                   "@babel/preset-env", // 指定环境插件
                                   {
                                       targets:{
                                           "chrome":"88" // 指定目标浏览器
                                       },
                                       "corejs":"3", // 指定corejs版本
                                       "useBuiltIns":"usage" // 按需加载
                                   }
                               ]
                           ]


                        },
                    },
                    'ts-loader'
                ],
                exclude: /node-modules/,
            }
        ]
    },

    // 配置webpack插件
    plugins: [
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            title: "这是一个自定义title"
        }),
    ],

    // 用来设置引用模块
    resolve: {
        extensions: ['.ts','.js']
    },
}

面向对象-类

class Person{
    // 直接定义的属性为实例属性,需要创建实例对象去访问
    name:string='Lily';
    // 在属性前定义static关键字，可以定义类属性，使用类即可访问
    static age:number=18;
    // 只读属性不可修改
    readonly address:string="shanghai";

    sayHello(){
        console.log("hi 大家好")
    };

};

const per=new Person();

console.log(per,per.name,Person.age);

per.sayHello();

// 构造函数和this
class  Dog{
    name:string;
    age:number;


    // 构造函数，在对象创建时候调用
    constructor(name:string,age:number) {
        // 实例方法中，this表示当前实例，可通过this向新建的对象中添加属性
        this.name=name;
        this.age=age;
    };

    bark(){
        alert("wangwnagwnag");
    }
}


const dog1=new Dog("xiaohuang",4);
const dog2=new Dog("xiaohei",2);

console.log(dog1);
console.log(dog2);

接口

interface IPerson { 
    firstName:string, 
    lastName:string, 
    sayHi: ()=>string 
} 
 
var customer:IPerson = { 
    firstName:"Tom",
    lastName:"Hanks", 
    sayHi: ():string =>{return "Hi there"} 
} 
 
console.log("Customer 对象 ") 
console.log(customer.firstName) 
console.log(customer.lastName) 
console.log(customer.sayHi())  
 
var employee:IPerson = { 
    firstName:"Jim",
    lastName:"Blakes", 
    sayHi: ():string =>{return "Hello!!!"} 
} 
 
console.log("Employee  对象 ") 
console.log(employee.firstName) 
console.log(employee.lastName)

泛型