前端-TypeScript-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端-TypeScript。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

声明：我是一个后端的开发，只是比较感兴趣这个，如果有错误的地方请指正，但是不要喷我。

1.什么是TypeScript，即什么是TS

解释TS：可以理解为是JS的升级版本，众所众知，JS不像Java语言有类型的定义，所以编译器或者在编译的时候是没办法知道定义的类型是什么，是可以是数字类型的字符串等等。强类型可以规范代码，以及后期对代码的维护行更好。

2.使用它的好处是什么？

类型推演与类型匹配
开发编译时候会报错!!!
极大程度的避免了低级错误，定义方法和函数
支持JavaScript最新特性（包含ES6\7\8）
支持泛型

3.如何使用？

环境安装

npm install -g typescript

支持的数据类型
基本类型：Boolean、String、number、array、tuple（元祖）、enum、null、undefined、object、void、never、any
第一次听说这个类型元祖，就是固定长度固定类型的数组
number: 并没有严格的区分整形和浮点类型

emum : 枚举类型

enum Color{
	Red = "#颜色码值",
	Green,
	Black
}
let color = Color.Red

高级类型：
union: 组合类型
Literal: 预定义类型-- 字面量类型 Nullable: 可空类型

let union : string | number

any 类型和 unknown
any 可以为任意类型，是对象是方法是任意
unknow 不保证类型，但是能保证类型安全。

let randomValue: unkonw = 666;
randomValue = true;
randomValue = "12312312eee"
randomValue = {}

if(typeof randomValue === 'function'){
	randomValue ()
}
if(typeof randomValue === 'string'){
	randomValue.toUpperCase()
}

void 、undefined 、never

// never : 一个函数永远执行不完
function throwError(message: string, errorCode: number): never{
	throw {
		message,errorCode
	}
}

适配类型（类型断言）Type Assertions

let message : any;
message = "ads";
// 本质上此处虽然赋值成字符串类型但本质上类型还是any，所以不能使用string 自带的函数库
// 有点类型Java中的强制类型转换
let d = (<string>message).endWith("s");

// 另一种转换方式
let d = (message as string ).endWith("s");

函数类型

let log = function(message) {
	console.log(message)
}

let log2 = (message) => {
	console.log(message)
}

// ? 标识参数是可选项 
let log3 = (message: string, code?: number) => {
	console.log(message)
}

// 如果？不传递值则输出undefined 可以给一个默认值
let log4 = (message: string, code: number = 0){
	console.log(message)
}

interface 和 class

// 这里的interface 有点类似Java的Class 定义了一个对象，而不是接口
interface Point {
	x: number;
	y: number;
}

let drawPoint = (point: Point) => {
	console.log({x: point.x, y: point.y});
}
interface Point {
// X 就不是不选项
	x?: number;
	y: number;
}
// 接口里面的任意属性
interface Person {
  name: string;
  age?:number;
  [propName: string]: any
}
// 接口里面的只读属性
interface Person {
  readonly id: number
  name: string;
  age?:number;
  [propName: string]: any
}
let tom: Person = {
	id: 8988,
	name: 'tom',
	job: 'Java工程师'
}
// 只读属性不能够重新赋值
tom.id = 48

访问修饰符

接口，类，类的构造函数，访问修饰符，泛型等基本都和Java中的大同小异，感觉前端也在像模块化，对象化靠拢。

在编译的时候更友好，报错信息更明显，代码调试起来更方便。如果是后端入手前端可能会更好入手，学习起来会更方便，更好理解，虽然语法上略有出入，但是还是大同小异。

TS里面的函数

// 一个函数有输入和输出，要在TypeScript 中对其约束，需要把输入和输出都考虑到，其中函数生命的类型定义比较简单
function sum(x: number, y: number): number {
	return x + y;
}

// 函数的可选参数以及 参数的默认值
// 必选参数不能位于可选参数后面 如果非要这么写的话可以在后面的参数追加一个默认值
function buldName(firstName: string, lastName?: string){
	if(lastName){
		return firstName + '' + lastName;
	}else{
		return firstName;
	}
}