TypeScript

TypeScript

image.png

优点：功能更强大，生态也更健全、更完善
缺点：语言本身多了很多概念，属于渐进式，项目初期会增加一些成本

TS配置：

安装命令：

yarn add typescript --dev
yarn tsc --init

手动编译命令：yarn tsc xx.ts（手动转化xx.ts文件为js）

tsconfig.json配置

//es2015是es6,平时说的es6有时也指包含es2015及之后更新的内容
"target": "es5", //输出的代码转化格式
"lib": ['es2015', 'DOM'],
"outDir": "dist", //编译文件输出文件夹
"rootDir": "src", 
"sourceMap": true, //开启源代码映射，方便调试
"strict": true,  //开启严格模式，严格模式需要明确指定类型
"strictNullChecks": false,  //开启严格模式，严格模式需要明确指定类型是否检查Null
//const a:boolean = null;如果想要不报错，需要设置"strictNullChecks": false
//const h:symbol = Symbol(); target设置为es5时会报错，任何es6中新增对象都会报错，因为设置es5，默认标准库引入的是es5的标准库；
//解决方法：target:'es2015'；或者target:'es5',lib:['es2015', 'DOM']
//标准库就是内置对象所对应的声明，代码中使用内置对象就必须引入对应的标准库，否则ts找不到所对应的类型=>报错

//TS中object类型不单指对象，还可以用数组，函数
//const foo:object = function(){}
//const fooA:object = []
//const fooB:object = {}

知识点：

1.ts文件编译

//枚举转化会影响编辑后代码

enum PostStatus {

Draft = 0,

Unpublished = 1,

Published = 2

}

// 枚举类型

const post = {

title: 'Hello',

content: 'Typescript is a typed xx',

status: PostStatus.Draft // 0 1 2

}

编译后：

var PostStatus;

(function (PostStatus) {

PostStatus[PostStatus["Draft"] = 0] = "Draft";

PostStatus[PostStatus["Unpublished"] = 1] = "Unpublished";

PostStatus[PostStatus["Published"] = 2] = "Published";

})(PostStatus || (PostStatus = {}));


// 枚举类型
var post = {
title: 'Hello',
content: 'Typescript is a typed xx',
status: PostStatus.Draft // 0 1 2
};

// 若是代码中不需要获取枚举Key值，则可以将枚举定义成常量
const enum PostStatus {
Draft = 0,
Unpublished = 1,
Published = 2
}
// 枚举类型
const post = {
title: 'Hello',
content: 'Typescript is a typed xx',
status: PostStatus.Draft // 0 1 2
}

//编译后：

// 枚举类型
var post = {
title: 'Hello',
content: 'Typescript is a typed xx',
status: 0 /* Draft */ // 0 1 2
};

2.TS隐式类型推断

let age = 18
Age = '122'  // 会报错，因为上面已经推断出age是number类型

3.TS类型断言

const nums = [100, 12, 122]
const res = nums.find(i => i > 0)
const square = res * res
const num1 = res as number
const num2 = <number> res //注意jsx不能使用尖括号格式推断，会与标签有冲突

4.TS中interface中使用分号或者不用符号，只是做代码约束，实际编译后是删除掉的

interface中设置readonly时，变量初始化后不能修改

interface Post{
title: string
subtitle: string
readonly summary: string
}
// 设置接口动态变量，格式如下
interface Test{
[prop: string]: string
}
const test:Test = {title: '2233', sub: '12'} 

5.对接口的实现

interface Run {
  run(distance: number): void
}
interface Eat {
  eat(food: string): void
}
class Person1 implements Eat, Run {
  eat(food: string):void{
  console.log(`优雅进餐${food}`)
}
run(distance: number){
  console.log(`直立行走:${distance}`)
}
}
class Animal implements Eat, Run{
  eat(food: string):void{
  console.log(`呼噜呼噜${food}`)
  }
  run(distance: number){
    console.log(`爬行:${distance}`)
  }
}

6.抽象类

abstract class Animal2 {
  eat(food: string):void{
  console.log(`呼噜呼噜${food}`)
}
abstract run(distance: number):void
}
class Dog extends Animal2{
  run(distance: number){
    console.log(`爬行:${distance}`)
  }
}
const d2 = new Dog()
d2.eat("test")
d2.run(111)

7.泛型：定义接口或类时未指定具体类型，使用时再传递类型，目的：复用