这是我参加「第四届青训营」笔记创作活动的第六天。因为这次项目技术栈选择了TypeScript和React，在之前都没有学过，于是就自己先学一点，浅写一个笔记。本篇文章介绍了TS，以及使用前怎么安装并简单使用TS，TS的基本类型。

1、TypeScript是什么？

以JavaScript为基础构建的语言
可以在任何支持JavaScrpit的平台中执行
一个JavaScrpit的超集
TypeScript扩展了JavaScrpit，并添加了类型
TS不能被JS解析器直接执行，应先将TS编译为JS

2、TypeScrpit增加了什么？

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

3、TypeScript开发环境搭建

安装Node.js，注意一版不选择最新版。
使用npm全局安装typescript：npm i -g typescript
创建ts文件
使用tsc对ts进行编译：tsc xxx.ts(目录上会多一个相同文件名的js文件，这便是通过编译的文件,可编译任何版本的js，默认es3)

4、基本类型

4.1 类型声明

//number、string、boolean必须为小写
let a:number;//声明一个变量a同时，指定类型为number，在以后使用过程中只能是数组
a = 10;
a = "hello";//会报错，不能将类型“string”分配给类型“number”，但还是能够编译成功，因为符合js语法规范
let b:string;
b='abc';

let c:boolean=false;

//如果变量的声明和赋值同时进行，TS可以自动对变量进行类型检测
let d=false;

在函数中也可以使用类型声明，在参数和返回值中使用。JS中的函数是不考虑参数的类型和个数的，这样在传参的时候可能会得到错误的结果，而在ts中指定了类型避免了这种错误，举个例子：

//相加两个数加起来
//js
function sum(a,b){
    return a+b
}
console.log(sum(123,'456'))//'123456'
//ts，参数返回值都为number
function sum(a:number,b:number):number{
    return a+b
}
console.log(sum(123,456))//579

4.2类型

4.2.1 字母量、any、unknown、void、never

//字面量声明，声明和不能修改
let a:10;//a为10

//使用|来连接多个类型（联合类型）
let b:'male'|'female';
b='female';
b='male';
b='a';//会报错，不能将类型“"a"”分配给类型“"male" | "female"”

//any 表示任意类型，一个变量设置any后相当于对该变量关闭了TS的类型检查，相当于JS
let d: any;
d = 1;
d = "f";
d = true;

//unkonw 表示未知类型的值
let e: unknown;
e = 10;
e = "hello";
e = true;

//d的类型是any，它可以给任何值赋值
let s: string;
s = d;
e = "hello";
s = e;//会报错，不能将类型“unknown”分配给类型“string”
export {};

//unknown实际上是一个类型安全的any，不能直接赋值给其他变量
if(typeof e==='string'){
    s=e;
}
//类型断言,告诉解析器变量实际类型
s=e as string
s=<string>e

//void 表示空，以函数为例，就表示没有返回值的函数
function fn(): void {}
//never 表示永远不会返回结果
function fn2(): never {
  throw new Error("报错");
}

4.2.2 object、箭头函数、数组、枚举

//object表示一个js对象
let a: object;
a = {};
a = function () {};
//指定对象中可以有哪些属性
//语法：{属性名：属性值，属性名：属性值}，必须一一对应
//语法：{属性名：属性值，属性名？：属性值}，属性名加？，表示可选选项
//语法：{属性名：属性值，[propName: string]: any}，处理第一个，其他参数任意

let b: { name: string };
b = { name: "wh" };
let c: { name: string; age?: number };
c = { name: "wh" };
let d: { name: string; [propName: string]: any };
d = { name: "wh" };
d = { name: "wh", age: 21 };

//函数结构的类型声明
//箭头函数语法：（形参：类型，形象：类型...）=>返回值/
let e: (a: number, b: number) => number;

//数组声明：类型[]、Array<类型>
let s: string[]; //string[] 表示字符串数组
s = ["a", "b", "v"];
let n: number[]; //number[] 表示数值数组
let g: Array<number>;

//元组，固定长度的数组
let h: [string, number];
h = ["w", 12];
h = ["d", 1, 23]; //不能将类型“[string, number, number]”分配给类型“[string, number]”。源具有 3 个元素，但目标仅允许 2 个。

//enum枚举
enum Gender {
  Male = 0,
  Female = 1,
}
let i: { name: string; gender: Gender };
i = {
  name: "h",
  gender: Gender.Female,
};
console.log(i.gender === Gender.Male); //true;

//&同时
let j: { name: string } & { gender: Gender };
//类型的别名
type myType = 1 | 2 | 3 | 4 | 5;
let k: myType;
k = 5;

码字不易

TypeScript基础入门第一弹 | 青训营笔记