TypeScript - 初始

一、初始
是什么？
1. 由微软公司在 2012 年正式发布的免费开源编程语言，
2. 是javascript 的一个超集，也就是说TS是建立在Js 之上的，最后都会转成Js进行识别.
为什么用它？
1.任何新语言的出现，都会有出现的理由；那必定是重要性的突破 才会有大家现如今的认可
2. 众所周知，js是一种自由松散语言(动态类型语言)，语法规则并不是那么严格，所以，我们平常开发中，更容易犯错，有时候还不容易排查
优点：1.理解-更容易程序和开发者理解
2.回避错误-杜绝出现常见和编译错误
3.包容性-完全兼容js,支持第三方
缺点： 1.增加学习成本
2. 短期内在增加一些开发成本
所以，应该根据项目情况，来分析
3.通过TypeScript编译器或Babel将TypeScript代码转换为JavaScript代码，它是静态语言类型
它的作用是什么？
1. type + script = typeScript 规则性的js,有助于统一参数类型规范，参数失误时，立即有报错提示，避免更大漏洞，也就是将动态类型转换为静态类型
2.可以突出显示代码中的意外行为，从而减少错误的机会， 让开发更具创造性，提高生产力
3.极大增强JavaScript编写应用的开发和调试环节，让JavaScript能够方便用于编写大型应用和进行多人协作
4.完善的Api
安装
1. 安装步骤
1. 全局下载依赖包 npm install -g typescript
2. 新建hello.ts文件,默认编译后缀为ts,而react 中后缀默认是.tsx
3.终端 编译ts文件 tsc hello.ts
（编译文件时，默认生成对应的.js文件)

	2. ts-node的使用
		1. 下载npm install -g  ts-node

2. 虽然不需要重复的文件了，并且可以直接看到编译结果 删除掉生成对应的js 但是速度会相对 比上述慢

二、JS中的typeScript (类型)
1. 推论类型
1. TS知道Js语言，并会在许多情况下自动为您生成类型
let helloWorld = “Hello World”;
// ^ = let helloWorld: string

2.定义类型
	为什么会有这个类型呢？
		1.使用动态数据编程的时候，自动推断类型就变得困难，为了解决这些情况，TS支持JS 语言的扩展
	使用方法
		1. 对象 用interface 表示对象的形状 

interface User {
name: string;
id:
}
2. 字符串，数字类型 用：表示后面的类型
let helloWorld: string
3.由于JavaScript支持类和面向对象的编程，因此TypeScript也支持。您可以对类使用接口声明：
interface User {
name: string;
id: number;
}

class UserAccount {
name: string;
id: number;

constructor(name: string, id: number) {
this.name = name;
this.id = id;
}
}

const user: User = new UserAccount(“Murphy”, 1);
3.组成类型
1. 为什么会有这个类型呢？
可以通过组合简单类型来创建复杂类型。这样做有两种流行的方式：联合和泛型。
子主题 2
联合
1.使用联合，您可以声明一个类型可以是许多类型之一
type MyBool = true | false;
泛型
1. 为类型提供变量，如数组，有泛型的数组必须满足其要求，没有泛型的数组，则可以包含任何内容
type StringArray = Array;
type NumberArray = Array;
type ObjectWithNameArray = Array<{ name: string }>;
4.结构类型系统
TypeScript的核心原则之一是类型检查重点在于值的形状。有时称为“鸭式打字”或“结构式打字”。

在结构类型系统中，如果两个对象具有相同的形状，则将它们视为相同的类型。
形状匹配只需要对象字段的子集即可匹配。
const point3 = { x: 12, y: 26, z: 89 };
printPoint(point3); // prints “12, 26”

const rect = { x: 33, y: 3, width: 30, height: 80 };
printPoint(rect); // prints “33, 3”

const color = { hex: “#187ABF” };
printPoint(color);
Argument of type ‘{ hex: string; }’ is not assignable to parameter of type ‘Point’.
Type ‘{ hex: string; }’ is missing the following

三、静态类型检查器
什么是？
在不运行代码的情况下检测代码中的错误称为静态检查。根据要操作的值的种类来确定是什么错误和什么不是错误，这称为静态类型检查
如果将代码从JavaScript移到TypeScript ，即使TypeScript认为代码有类型错误，也可以保证以相同的方式运行。

四、数据基本类型
1. 布尔类型（Boolean） let flag:boolean = true
2.数字类型（Number） let flag:number = 5 let flag:number = undefined
3.字符串类型（String） let flag:string = “5”
4.数组类型(Array)
let flag:array = [1,2,3]
let flag: number[] = [1,2,3]
5.undefined
let flag: undefined = undefined
6.null
let flag: null = null
7.any(任意数值)
let flag: any = 4； flag = “478343”
8.元组类型（起源于函数编程）
let flag:[string,number] = [“1”,3],
flag.push(‘89’) ,只能追加上述类型，否者会出现错误

五.Interface接口
概念
对对象的形状（shape）进行描述
运用
interface Person {
readonly id: number, //只读属性，不可重新再赋值
name: string,
age? number //可选可不选属性？
}
let viking: Person ={
id:1,
name: ‘cb’，
}
，
interface接口 和类 结合
// 声明了两个类，并且都有相同的函数，如何将其抽离出来呢？
// 通过interface 创建公共方法oneType (),实现继承allTypeCommont函数
interface oneType {
oneTypeFun(trigger: boolean): void;
}
interface twoTypeFun {
twoCheck(): void;
}
interface allTypeCommont extends oneType{
twoCheck(): void;
}

class Car implements oneType{
oneTypeFun(trigger: boolean){}
}
class CatTwo implements oneType,twoTypeFun{
oneTypeFun(trigger: boolean){}
twoCheck(){}
}
class CatThree implements allTypeCommont{
oneTypeFun(trigger: boolean){}
twoCheck(){}
}
interface 和 type 类型别名各自使用场景区别

六.function 函数
运用
const add = (x: number ,y: number , z?: number) => {
if(typeof z == ‘number’){
return x + y + z;
}else{
return x + y;
}

}
console.log(add(1,2))
interface isType {
(x: number, y: number, z?:number ): number
}
let add2: isType = add
约定输入和输出
function add(x:number, y:number,z?:number):number{
return x+y
}

class 类使用
typeScript 中的类
public : 修饰的属性或方法市是共有的
private: 修饰的属性或方法是私有的，（只有我和我的家人可以使用，其他人都不可以）
protected： 修饰的属性或方法是被保护的（和private相似，但是它在派生类中仍然可以访问）
readonly 修饰符
只读
类和接口

七. 其他
联合类型 （类型1 | 类型2）
let numbetr: number | string
访问类型只能访问两个类型中的共同属性，否者会报错
交叉类型（类型1 & 类型2）
访问类型两者都必须满足，否者会报错
interface Iname(){
name:string}
type Iperson = Iname & {age: number}
let person：Iperson = {name:‘123’, age:123}
类型推断 (as)
const str= input as string
// 联合类型 string | number 但是访问类型属性的时候，只能访问两个类型中的共同属性，否者会报错
function getLengthFun(iptContent: string | number):number {
// 类型推断 as
const str = iptContent as string
if(str.length){
return str.length;
}else{
const number = iptContent as number;
return number.toString().length;
}
}
类型断言
function getLengthFun2(iptContent: string | number):number {
if(typeof iptContent == ‘string’){
return iptContent.length;
}else{
return iptContent.toString().length;
}
枚举enum
数字枚举
enum Direction {
Up = 10,
Down,
Left,
Right,
}
console.log(Direction) // 10 11 12 13 枚举成员得值
onsole.log(Direction[0]) // up 访问枚举名字
字符串枚举
普通字符串枚举
enum Direction {
Up = ‘UP’,
down = ‘DOWN’
}
const value = ‘UP’
if(value == Direction.Up){
console.log(‘go up!’)
}
子主题 2
常量枚举
const enum Direction {
Up = ‘UP’,
down = ‘DOWN’
}
const value = ‘UP’
if(value == Direction.Up){
console.log(‘go up!’)
}
提升性能，但是不是所有的场合 都可以适用，只有常量才可以适用常量枚举
泛型
为什么使用它？
像是一个参数或是占位符号，不仅能够支持当前的数据类型，同时也能够支持未来的数据类型，提供了十分灵活的功能
单个类型情况
function echo(arg: T) : T{
return arg;
}
const result = echo(‘1234’)
function swag<T,U>(demo:[T,U]): [U,T]{
return [demo[1],demo[0]]

}
const newresult = swag([‘73823’,1323])
约定泛型
// 业务场景
// 当我们访问参数的一些属性时，会出现报错，如下
function getLengths(demo:T):T{
return demo.length //报错
}
const getData = getLengths(“123”)

// 如果我们能够提约束参数的类型，或者可以访问的属性，是不是就可以解决问题了呢？
// 所以，我们可以定义一个接口interface 来描述约束条件
interface LengthWise{
length: number
}
function getLength(demo:T): T {
console.log(demo.length)
return demo
}
//约定了限定条件，那么参数就必须是interface 所规定的类型才可以，否者会报错
const getData = getLength(“123”)
const getLen = getLength({length: 10})
const getArry = getLength([1,2,3])
通过interface 和extends 来对参数进行提前约定，避免出现错误
泛型类
特定一个可变的容器，给可变的容器贴上相应的标签，
class GenericNumber {
zeroValue: T;
add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };
类型别名 type aliase
为什么？
子主题 1
使用？
关键字 type
type allType = (x: number,y:number) => number
type isType = string | number
let demo:isType = ‘1234’
let demo:isType = true //报错 只允许是字符串和数字
子主题 3
声明文件
业务场景
1.在typeScript环境中引入第三方库如JQ，则jquery使用时会出现报错
2，大量框架也很会冗余，但是typeScript 中也帮大家提供了常见库里面的typeScript版本下面的第三方库如 jquery

	使用
		1. declare 关键子

declare var jQuery:(selector: string) => any (jQuery.d.ts文件)
注入上述文件之后，则其余地方就可以正常访问jQuery，参数补全，以及框架定义,方法等等提示
内置类型
如math.min / 正则表达式 / ES5最新的方法 / 鼠标右击查看类型定义，查看定义 就可以看到最底层的源码
…学习中