typescript 学习第一周

学习目标：

一周计划：

• 基础类型、变量声明，将其基本概念看完。
• 记录出来与javascript不一样的地方

---

学习内容：

1、 基础类型
2、 变量声明

---

---

前言

由于typescript出来蛮久的啦，再加上公司也有人再用了，本着别人会我得了解的大前提，便开始要学习一波，作为笔记来使用。参考的资料主要来源于https://typescript.bootcss.com/basic-types.html

---

一、基础类型

1.元组

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同

// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error

2.枚举

enum类型是对JavaScript标准数据类型的一个补充。使用枚举类型可以为一组数值赋予友好的名字。

enum Color {Red = 1, Green, Blue}  // 这是手动为数组起编号，默认为0
let c: Color = Color.Green;
console.log(c)   //输出结果为2

3.任意值any/unknown

不确定数据的类型，不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查；在实际的开发中不建议使用，因为他可以赋值给任何变量，将变量变为any,推荐使用unknown

let notSure: any = 4;
notSure.toFixed(); 

4.空值

当一个函数没有返回值时，你通常会见到其返回值类型是void，只可以定义为null和undefined；不过他们也有自己的类型；默认null、undefined能代表所有的数据类型，但当你指定了–strictNullChecks标记，null和undefined只能赋值给void和它们各自，typescript鼓励使用–strictNullChecks标记，如果允许为空值的话，那就使用联合类型string | null | undefined

let unusable: void = null;

5.never

never类型表示的是那些永不存在的值的类型，never类型是任何类型的子类型，也可以赋值给任何类型；然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。 即使any也不可以赋值给never。

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}

6.字面量/联合类型

不能重新赋值

let a: 5

let b: boolean|string   //  此时的b只能写布尔值或者字符串

7.类型断言

常用于联合类型，类型断言并不是普通意义上的类型转换，不能强行转为类型中不存在的类型

let someValue: any = "this is a string";   // 这是任意类型的，下面把其断言为string
 
let strLength: number = (<string>someValue).length;
// 也可以写为这个样子，在使用jsx 的时候必须写为这个形式
let strLength: number = (someValue as string).length;

二、变量声明

1.let

在语法上与var没什么区别，主要是在语义上面；let使用的是词法作用域或块作用域，在作用域外是不能访问的，在声明之前也不能读或写

2.const

拥有与let相同的作用域规则，但是不能对它们重新赋值。
代码如下（示例）：

3.解构

let [first, ...rest] = [1, 2, 3, 4];
console.log(first); // outputs 1
console.log(rest); // outputs [ 2, 3, 4 ]

//默认数据
let {a:'a', b} = o;
//指定数据类型
let {a, b}: {a: string, b: number} = o;

4.对象/数组的声明

// 对象
let a: {name:string,[propName:string]:any}
a = {name:'小明',age:10}


//数组
let b: number[]    // 数组中必须全都是数字
let c: Array<string>  // 数组中必须全是字符串

5.函数的声明

//这是声明传入方法中的参数的类型和返回值的类型
function sum(a:number,b:number):number{
    return a+b
}


let a : (n1:number,n2:number)=>number
a = function(a1,a2){
	return a1+a2
}

6.类型的别名

type myType = 1|2|3
let a: myType
a = 1

三.编译（tsconfig.json）

这个文件如果只是写了 {}，那就会编辑文件中的所有的ts文件

1.include

用来指定哪些ts文件需要编译

// ** 表示目录
// * 表示文件
"include":[
	"./src/**/*"
]

2.exclude

用来指定哪些ts文件不需要编译

// ** 表示目录
// * 表示文件
// 默认值是['node_modules','bower_components','jspa_packages']
"exclude":[
	"./src/**/*"
]

3.compilerOptions

"compilerOptions":{
	// 用来指定ts被编译为es的版本
	"target":"es2015"，
	// 用来指定使用的模块化规范
	"module":"es2015",
	// 用来指定项目中要使用的库，一般不需要动，大都是浏览器中用到的插件
	"lib":[],
	// 用来指定编译后文件所在的目录
	"outDir":"./dist",
	// 将代码合并为一个文件,全局中的文件
	"outFile":"./dist/app.js"
	// 以下代码默认都是false
	// 是否对js文件编译
	"allowJs":"true",
	// 是否检查js文件
	"checkJs":"true",
	// 是否移除注释，在打包文件中
	"removeComments":"true",
	// 不生成编译文件
	"noEmit":"true",
	// 不生成编译文件，当有错误的时候
	"noEmitOnError":"true",

	// 这是严格模式的总开关
	"strict":"false",
	// 用来设置编译后的文件是否使用严格模式
	"alwaysStrict":"true",
	// 不允许隐式any类型
	"noImplicitAny":"true",
	// 不允许不明确类型的this
	"noImplicitThis":"true",
	// 严格检查空值
	"strictNullChecks":"true",
}

---