TypeScript基础

什么是TypeScript

JS是动态类型（在执行阶段才进行类型的匹配）的语言，TS是静态类型（在编译阶段进行类型的匹配，因此在编译阶段就可以暴露大部分错误）的语言。
JS和TS都是弱类型语言（会自动做类型转换，而在强类型语言中字符串和数字是无法相加的）。
相比JS，TS可读性和可维护性都增强了。TS基于JS，兼容所有JS特性，支持共存。TS经过TS编译器转为JS。

数据类型

字面量：

let a:1|2|3|5;

object：
类型自定义，用大写字母I开头来表示这是一个类型，用于和普通对象进行区分。（详见后面接口部分）

object中的函数：
函数声明：

函数重载：相同的函数，根据传入不同的参数类型，对应返回不同的类型。
为同一个函数提供多个函数类型定义来进行函数重载，编译器会根据这个列表去处理函数的调用；
为了让编译器能够选择正确的检查类型，它与JavaScript里的处理流程相似。 它查找重载列表，尝试使用第一个重载定义。 如果匹配的话就使用这个。 因此，在定义重载的时候，一定要把最精确的定义放在最前面。

function getInfo(name: string): string;
function getInfo(age: number): number;

// 注意这里的 any 并不是重载列表的一部分
function getInfo(str: any): any {
  if (typeof str === 'string') {
    return 'my name is ' + str;
  } else {
    return 'my age is ' + str;
  }
}
console.log(getInfo('range'));

可选参数、默认参数和剩余参数：

function getInfo(name: string, age?: number): string {
  // age? 表示该参数为可选参数，并且可选参数必须放在参数的末尾。
  if (!age) {
    return `${name} --- age: Secret`;
  } else {
    return `${name} --- ${age}`;
  }
}
let myName: string = 'range';
let myAge: number = 20;
console.log(getInfo(myName, myAge));

function getName(name: string = 'range') {
  return name;
}
console.log(getName());

function sum(a: number, ...numbers: number[]): number {
  let ans = 0;
  numbers.forEach(number => {
    ans += number;
  });
  return ans * a;
}
console.log(sum(2, 3, 4, 2043));

array：

let arr1:string[];//表示字符串数组
let arr2:number[];//表示arr2是一个数组且数字里都存数字

tuple:长度固定的数组

let arr1:[string,number];
arr1=['abc',123]

enum

enum Gender{
    female=0,
    male=1
}
//let obj:{name:string,age:number,sex:0|1}
let obj:{name:string,age:number,sex:Gender}
obj={name:'abc',age:15,sex:Gender.male}

|与&使用场景

let a:string|number;

let obj:{name:string}&{age:number}
obj={name:'abc',age:12}

类型断言:通过as关键字或者尖括号，来告诉解析器变量的实际类型

let s:string;
let e:unknown;
e='hello';
s=e as string;或 s=<string>e

类型别名：给类型起个别的名字

type mytype=string;//给string类型起了个别名叫mytype
let a:string;//
let b:mytype;//b也是string类型

TS新增：抽象类、接口、泛型

属性修饰符：
public、private（private修饰的属性类外部访问不到，但是可以通过对外暴露几个方法来使外部访问到这个属性。属性存取器：getter()、setter()）、protected（只能在当前类和子类中访问到，通过实例访问不到）
抽象类：专门用来被继承的类，不能直接用它创建实例。

abstract class Animal{
	abstract sayHello():void;//抽象方法只能定义在抽象类中，不包含具体的实现，子类必须对抽象方法进行重写
}

接口：用来定义一个类结构，一个规范。
类关键字是class，接口关键字是interface。接口可以在定义的时候去限制类的结构，有点类似于抽象类，但是抽象类中既可以有实际的方法也可以有抽象方法，接口中所有属性和方法都没有具体的值。

interface IClass{
    name:string;
    age:number;
    sayHello():void;
}
interface IClass{//interface允许重复声明，效果是合并到了一起
    sex:string;
}
const obj:IClass={
    name:'abc',
    age:12,
    sex:'male',
    sayHello(){
        console.log('hello')
    }
}
//用类去实现一个接口：
class myClass implements IClass{
    name: string;
    age: number;
    sex:string;
    constructor(name:string,age:number,sex:string){
        this.name=name;
        this.age=age;
        this.sex=sex;
    }
    sayHello(): void {
        throw new Error("Method not implemented.");
    }
}

泛型：在定义函数或者类时，有时候类型不确定，调用的时候才知道，就可以用泛型。用来解决类、接口、方法的可复用性。

function fn<T>(a:T):T{
    return a;
}
let res1=fn(10);//不指定泛型，TS编译器自动推断 是number型
let res2=fn<string>('hello')//指定泛型是string类型
//泛型可以同时指定多个
function fn2<S,T>(a:S,b:T):number{
    return 123;
}
//泛型T可以指定为某一个interface的子类
interface IInter{
    length:number;
}
function fn3<T extends IInter>(a:T):number{
    return a.length;
}
fn3({length:2});//总之传入的参数a必须有length属性
fn3([1,2,3]);

TS开发环境搭建

1,下载nodejs
2,全局安装typescript ：npm i -g typescript 3,创建一个后缀为ts的文件
4，tsc xxx.ts

TS编译器配置并使用webpack打包ts代码

npm init -y//生成package.json文件

npm i -D webpack webpack-cli typescript ts-loader

npm i -D html-webpack-plugin
npm i -D webpack-dev-server//自动起一个webpack服务器并打开浏览器,且自动编译

编写webpack配置文件webpack.config.js:

const path=require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
    entry:"./test_ts.ts",
    output:{
        path:path.resolve(__dirname,'dist'),//__dirname是nodejs的变量表示当前文件的目录绝对路径
        filename:"bundle.js",
        clean:true,//保证每次文件夹目录下每次都是最新的文件，旧文件清空
    },
    module:{
        rules:[{
            test:/\.ts$/,
            use:'ts-loader',//ts转js
            exclude:/node-modules/
        }]
    },
    plugins:[
        new HtmlWebpackPlugin({
            //title:'这是我自定义的HTML title'
            template:"./test.html"
        }),
    ],
    mode:'development'
}

编写ts编译器配置文件：tsconfig.json

{
    "compilerOptions": {
        "target": "ES2015",
        "module": "ES2015",
        "strict":true,
    }
}

修改package.json文件：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",//用build命令运行webpack
    "start":"webpack serve --open"//用npm start启动webpack服务器且同时打开网页
  },

运行命令让webpack对项目进行打包：

npm run build//可以通过build命令运行webpack

React+TypeScript开发环境搭建

aka老师react+TS