TypeScript用法介绍、webpack配置ts

TypeScript是什么？

TypeScript是微软公司开发的一款开源的JavaScript超集语言！
JavaScript超集： 当前任何JavaScript都是合法的TypeScript代码！
TypeScript主要为JavaScript提供了类型系统和ES6语法的支持！
Flow是一个类型检查工具，TypeScript是一种开发语言！
TypeScript有自己的编译工具，我们写好的TypeScript代码最终会通过编译器编译成JavaScript代码进行运行！angular、vue、react都是支持ts的。

安装

TypeScript命令行工具的安装（TS编译器）

npm i typescript -g

安装好了之后，全局会提供一个tsc命令给我们使用！

编写TypeScript代码

通过tsc进行编译，最终运行

ts配置文件的说明

1. 创建配置文件

tsc --init

2. 设置配置项 （tsconfig.json）
   • target: es5 指的就是将ts代码要转换成哪个版本的js代码 es5 es3
   • module: 指的就是将ts代码转换成js代码之后，使用的模块化的标准是什么
   • outDir: 指的就是将ts代码转换成js代码之后，js代码存放的文件夹路径
   • rootDir: 指的就是要将哪个目录中的ts代码进型转换，ts代码的存放路径
   • strict: 是否要将ts代码转换为严格模式的js代码！
   • allowJs: true 允许ts语法中引入js的模块
3. 使用配置文件

tsc -p ./tsconfig.json

ts 如何配置webpack 4.0

yarn add ts-loader -D
……
webpack.config.js 中的配置
module： {
	rules: [{
		test: /\.tsx$/,
		use: 'ts-loader',
		exclude: /node_modules/
	}]
}

ts的几种类型及用法

1. ts中类型的介绍

// number
let a: number = 10
let b: number = NaN
let c: number = Infinity
let d: number = 0xA12 //16进制
let e: number = 0b1010101 //2进制
let f: number = 0o75 //8进制

//string
let str1: string = ‘这是一个字符串’ //单、双引号均可
let str2: string = `这是一个模板字符串${a}` //模板字符串，可以放变量

//boolean
let flag1: boolean = true; //false

//数组
//Array<数据类型>
let arr: Array = [1, 2, 3, 4]
// 数据类型 []
let arr1: number[] = [1, 2, 3]

//元组类型（Tuple）
//该类型 允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。比如定义以下数组
let arr2: [number, string] = [5, ‘s’]
arr2[1] = ‘b’
arr2[0] = 1

//void 空值 (无返回值)
let res: void = undefined;

//undefined
// null
let res1: undefined = undefined;
let res2: null = null;

//any
let somevar: any = 10
somevar = ‘10’
somevar = undefined

//never类型
//永远不可能有返回值的类型设置， 比如死循环
function n(): never {
while (true) {}
}

//object类型
let o: object = {}
let o1: object = []

//对象类型
let o2: {name: string, age: number} = {
name: ‘gc’,
age: 15
}

//enum枚举类型 g= 0/1/-1
enum gender {
male,
female,
unknow
}
let g: gender = gender.male

//类型断言
let str4: any = ‘abc’
// let l: number = str4.length
let l: number = (<string>str4).length

2. ts中的类

 class Person {
  names: string  //与es6 不同的是， ts中属性必须声明，需要指定类型
  constructor(name: string) {
    this.names = name  //声明好属性之后，属性必须赋值一个默认值或者在构造函数中进行初始化
  }
  sayHello (msg: string): void {
    console.log(msg)
    // return 'abc'
  }
}

3. ts中类的继承

class Animal {
  age: number
  constructor (age: number) {
    this.age = age;
  }
  eat () {
    console.log("吃啥呢")
  }
}

class Dog extends Animal {
  type: string
  constructor (type: string, age: number) {
    super(age)
    this.type = type
  }
  //子类中如果出现和父类同名的方法 ，则会重写父类的方法了
  eat () {
    console.log("吃西红柿炒番茄")
  }
}
var dog = new Dog('中华田园犬', 18)
dog.eat()  //实现了Dog对Animal的继承

4. ts中类成员的访问修饰符

//访问修饰符
//指的就是可以在类的成员前通过添加关键字来设置当前成员的访问权限
//public  公开的。默认所有人都可以进行访问
//private 私有的,只能在当前类中进行访问，不能在任何实例上调用
//protected  受保护的,只能在当前类或者子类中进行访问，不能在任何实例上调用

enum Color {
  red,
  yellow,
  blue
}

class Car {
  //如果不加访问修饰符，默认公开 所有成员都可以访问
  color: Color
  constructor () {
    this.color = Color.red
    //this.run()
  }
  private run() {}
  protected load() {}
}

let byd = new Car()
//byd.color 可以访问
// byd.run()  不可以访问
// byd.load()  不可以访问

class Audi extends Car {
  sayHi() {
    console.log(this.color)
    // this.load() 可以访问
  }
}

5. readonly只读属性修饰符，参数属性修饰符

class Cat {
  readonly name: string
  constructor(public type: string) {
    this.name = '加菲'
  }
}

var cat = new Cat('中华田园猫')
//cat.name = '123'  报错不可更改

6. ts中类成员存取器

class People {
  private _name: string = ''
  //属性存取器 利用set，get对参数进行操作
  get name(): string {
    return this._name
  }
  set name(value: string) {
    //设置添加的校验逻辑
    if(value.length < 2 || value.length > 5) {
      throw new Error('名字不合法')
    }
    this._name = value
  }
}

var p = new People();
p.name = '这个名字很长'

7. ts中的接口的作用及应用

//可以理解成一种规范
//例如option 需要url，type，data，success
//接口用interface 进行声明

interface AjaxOption {
  url?: string, //可选属性 ？
  type: string,
  data: object,
  success(data: object): void
}

 function ajax (option: AjaxOption) {}

 ajax({
    // url: "http:www.baidu.com",  //url是可选属性，可写可不写，其他三个属性不写则报错
    type: "get",
    data: {},
    success(data) {}
 })

 interface Point {
   readonly x: number,
   y: number,
   [propName: string]: any   //为多余的属性定义，如下边ps1的成员z
 }

 let ps: Point = {
   x: 10,
   y: 10
 }

ps.x = 1111 //x属性为只读属性，赋值报错

let ps1: Point = {
  x: 1,
  y: 2,
  z: 3  //z属性为未声明的属性
}

8. ts中函数类型的接口

let sum: Suminterface = function (a:number, b: number) {
  return a + b
}

interface Suminterface {
  (a: number, b: number): number   //a、b是number类型  返回值也是number类型
}

9. ts中的类 类型的接口

interface PersonInter {
  name: string,
  age: number,
  eat(): void
}

class jj implements PersonInter{
  name = 'jj';
  age = 11;
  eat() {}
}

10. ts中接口的继承

//接口继承接口
interface TwoDPoint {
  x: number,
  y: number
}

interface ThreeDPoint extends TwoDPoint {
  z: number
}
let ps2: ThreeDPoint = {
  z: 100,
  x: 1,
  y: 4
}

// 接口继承类
class Bird {
  type: string = '黄鹂'
  fly(): void {}
}

interface Fly extends Bird {}

let fs: Fly = {
  type: '白鹭',
  fly(): void {}
}

以上是typescript的全部内容，码字不易，且读且珍惜！