TypeScript快速入门

TypeScript是什么？

JavaScript是动态类型的 不能声明变量的类型 后期维护成本高。

1. 以JavaScript为基础构建的语言
2. 可以在任何支持JavaScript的平台中执行
3. 是一个JavaScript的超集
4. TypeScript扩展了JavaScript，并添加了类型 TS不能被JS解析器直接执行

TypeScript增加了什么？

类型、支持ES的新特性、添加了ES不具备的新特性、丰富的配置选项、强大的开发工具

TypeScript开发环境的搭建

1. 下载node.js
2. 安装node.js
3. 使用npm安装typescript

进入cmd 执行：npm install -g
typescript 查看版本：tsc -V

4. 创建一个ts文件
5. 使用tsc对ts文件进行编译

进入cmd 进入ts文件所在的目录
执行命令：tsc xxx.ts

语法

let 变量 ：类型;
let 变量：类型=值；
function fn（参数：类型，参数：类型）: 类型 { … }

TypeScript的类型声明

//声明一个变量a，同时指定它的类型是number
let a: number;
//a的类型设置为了number，在以后使用的过程中a的值只能是数字
a = 20;
a = 3;
//a='hello' //变量a的类型是number，不能赋值字符串。

//如果变量的声明和赋值是同时进行的，ts可以自动对变量进行类型检测；
let b = false;
//b='a';
b = true;

//参数的类型也可以声明,f():number{}中的：number是声明函数返回值的类型
function sum(a: number, b: number): number {
    return a + b;
}

console.log(sum(123, 456))


TypeScript中的类型
number、string、boolean、字面量(其本身，限制变量的值就是该字面量的值)、any（ * 任意类型）、unknown（ *  类型安全的any）、void（空值undefined）、never（没有值，不能是任何值）、object、array、tuple（[1,2] 元素，ts新增类型，固定长度数组）、enum（enum{a，b} 枚举，ts新增类型）
//字面量，使用字面量进行类型声明
let a: 10;
a = 10;
//a=11; // 限制a的值只能是10
let b: 1 | 2;  //限制b的值只能是1或2；
let c: boolean | string;  //限制c的类型只能是Boolean或string

//any，变量类型是任意类型，相当于ts关闭了类型检测
let d: any;
d = 1;
d = true;
//声明变量不指定类型，则ts解析器会自动检测变量的类型为any（隐式的any）
let e;
e = d;

//unknown,unknown类型的值不能赋值给别人。
let f: unknown;
f = 1;
f = true;
f = 'hello'
let g: string;
if (typeof f === 'string') {
    g = f;
}
//类型断言，可以用来告诉解析器变量的实际类型
/*
* 语法：
* 变量 as 类型
* <类型> 变量
* */
g = f as string;
g = <string>f;

//void 用来表示空 表示函数没有返回值
function fn(): void {
}

//never 表示永远不会有结果
function f1(): never {
    throw new Error('报错了')
}

//object,表示一个js对象
let h: object;
h = {}
h = function () {
}
//{}  用来指定对象中可以包含哪些属性
//语法：{属性名；类型，属性名：类型，...}
//在属性名后面加上？，表示属性是可选的
let l: { name: string }
l = {name: 'ls'}
let s: { name: string, age?: number }
s = {name: 'ls'}
//表示可以增加任意属性，属性值可以是任意类型
let t: { name: string, [propName: string]: any }
t = {name: 'ls', age: 18, sex: "男"}

/*
* 设置函数结构的类型声明
* 语法：（形参：类型，形参：类型，...）=>返回值类型
* */
let w: (a: number, b: number) => number

w = function (n1, n2) {
    return n1 + n2;
}

/*
* 数组类型声明
* 语法：
*     类型[]
*     Array<类型>
* */
//any ,string[]表示字符串数组
let arr: string[];
arr = ['1', '2']
//也可以用以下方式表达
let newArr: Array<number>
newArr = [1, 2, 3];

/*
* tuple元组，元组是固定长度的数组
* 语法：[类型，类型，类型，...]
* */
//表示只能有两个元素
let z: [string, string]
z = ['1', '2']

/*
* enum 枚举
*
* */
enum Sex {
    Male,
    Female,
}

let i: { name: string, sex: Sex }
i = {
    name: 'ls',
    sex: Sex.Female  //'female'
}
console.log(i.sex === Sex.Female)

//&表示同时
let j: { name: string } & { age: number }
j = {
    name: 'zhangsan',
    age: 18
}

//类型的别名
type myType = 1 | 2 | 3 | 4 | 5;
let k: myType
let q: myType
let m: myType