Typescript

概述

Typescript是为了解决javascript的系统问题，大大提高了代码的可靠程度

强类型与弱类型（类型安全）

强类型：语言上声明明确的类型，不允许隐式转换
如Math.floor('100') //报错
弱类型：不用声明明确的类型，允许隐式转换
如Math.floor('100') //不报错

变量类型允许随时改变的特点不是强弱类型的差异

静态类型与动态类型（类型检查）

静态类型：变量声明时它的类型就是明确的

动态类型：变量声明时它的类型就是不明确的，变量名是没有类型的，变量中存放的值是有类型的，变量类型可以随时变化

在js中可以这样
var foo = 100
foo = 'abc' 
而静态类型是不允许这样使用的。

javascript自有类型系统的问题

javascript类型系统特征是：弱语言与动态类型，脚本语言没有编译环节，缺乏了系统的可靠性
弱类型的问题如下：

const obj = {}
obj.aaa()     //得等到运行代码的时候才会发现有错误，
当设置了一个定时器的时候 等到定时器触发了才会触发函数发现错误，而强类型的语言是没有这个问题的，
会在编译的时候发现这个毛病


function sum (a+b){
	return a+b;
}
console.log(sum(50,50))			//100
console.log(sum(50,'50'))    //5050        在运行函数的时候不会检查函数参数有没有问题 都可以运行，导致了输出
结果和预期不大一样的问题，而强类型的语言会在传参的时候发现这个问题

const obj={}
obj[true]=1  //这样的定义在js是没有问题的 会把true变成字符串 调用的时候需要用obj['true']

弱语言在小型系统开发的时候可以通过一些方法解决数据类型的问题，但在大型系统开发的时候不推荐使用

强类型的优势

1.错误更早暴露
2.代码更智能，编码能准确，
3.重构更加牢靠
4.减少不必要的类型判断

Flow静态类型检查方案

flow

2014年facebook推出的js的类型检查器

function square(n:number){   //类型注解
	return n*n;
}
square('100')

使用flow的基本语法见博客flow

编译移除注解的两种方式：

1.使用 flow-remove-types

npm install -g flow-remove-types
 flow-remove-types src/ --out-dir build/ //把src下面的文件夹输出到dist中

2.使用babel

npm install @babel/core @babel/cli @babel/present-flow
添加.babelrc 在里面添加

{
	"presets":["@babel/presets-flow"]
}

然后运行 npx babel src -d dist

也可以这样用

npm install babel-plugin-transform-flow-strip-types

babel 的 plugin 中加入该插件

{"presets":
 ["es2015", "stage-2"],
"plugins": ["transform-runtime", "transform-flow-strip-types"],
"comments": false}

可以直接用vscode下载flow language support支持flow

Typescript语言规范与基本运用

Typescript：javascript的超集，可以将新特性转化成javascript，可以编译支持到es3
缺点是：1.语言本身多了很多概念，接口，泛型，枚举等等
2.项目初期，Typescript会增加一些成本

ts常见的语法和js差不多不过在每次定义的时候定义类型，可以用export{}来确保跟其他ts文件成员没有冲突

函数参数

funciton func1(a:number,b?:number=10):string {    //b为可选参数 加了个? 默认值是10 返回的值必须是字符串
return'aaa'
}

mixed和any的区别

两者都是用来表示随意的参数类型
但是mixed是强类型，一旦被确认为某个类型的时候就不能再转换，
any是弱类型，可以转换。

断言

var res=arr.find(i=>i>0);
const num = res as number //明确告诉编译器res肯定number类型

接口

编译完成的接口并不会出现在编译后的文件中，为有结构的数据进行约束

interface Post{
title:String,
content:String，
subtitle?:String   //可选
readonly summary:String  //只读
}
function printPost(post:Post){
console.log(post.title+" " + post.content )
}
printPost({
	title:'123',
	content:'2131'
})



interface Cache{
	[prop:string]:string   //自定义属性
}
const cache:Cache={}
cache.aaa='aaaaa'

类

class Person{
name:string 
private age:number   //私有属性 不能直接用person.age获取
protected gender:boolean  //子类可以用
   construct (name:string,age:number){
   this.name=name,this.age=age}
   sayHi(msg:string):void{}
}

class Student extend Person{
	private construct(name:string,age:number){   //私有
		super(name,age)
	}
	static create (name:string,age:number){
		return new Student(name,age)
	}
}
得用const jack=Student.create('jack',18)

泛型

function createArray<T>(length:number,value:string) string[]{
	const arr=Array<T>(length).fill(value)
	return arr;
}
const res = createArray<String>(3,'foo')

声明

import {camelCase} from 'loadsh'
declare function camelCase(str:string):string