TypeScript 入门 ｜ 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第9天

1.什么是TypeScript

是JavaScript超集，兼容所有js特性

基本语法

基本类型

相比于JavaScript，typescript语法是变量名称后加上：数据类型

js:const hello  = "Hello World!"
ts:const hello : string = "Hello World!"

对象类型

• 如果是对象，需要提前通过interface关键字定义好类型才可以使用
• readonly可以限制属性的只读
• 属性后加上？表示可选属性
• 如果属性名是变量，采用[]定义
• any是ts中的任何类型
• | 表示可选的值

js：
const obj={id:"1001","name":"test",age:10}
ts:
const obj:Person={id:"1001","name":"test",age:10}
interface:Person{
readonly id:string;
name:"test" | "teat2";
age?:number;
[key:string]:any;

}

函数类型

js：
function add(a,b){
return a+b;
}
ts:
function add(a:number,b:number):number{
return a+b;
}

js：
const add=(a,b)=> a+b;

ts:
const add=(a:number,b:number)=>number=(a,b)=> a+b;
或者
interface Add{
(a:number,b:number):number;
}
const add:Add=(a,b)=> a+b;

函数特性

重载

多个同名的函数，函数的参数类型不同或者数量不同或者返回值类型不同

function add(type:'number'):number;
function add(type:'number',random?:number):number;
function add(type:'number'):string;

数组类型

type T1=number[];
type T2=Array<string | number>
type T3=[number,string]
interface T4=[key:number]:any

空类型

type ET=()=>void;

任意类型

type Any=any;

枚举类型

enum En{a="1",b="2"}

泛型

type Fn=Array<number>;
type Fn=<T extends number>={taget:T}=>T[];//extends表示类型约束
type Fn=Array<{[bieming:name]:number}>;//泛型别名
test as Fn<string,T>  //通过as断言为正确类型

高级类型

联合交叉类型

interface Type1{};
interface Type2{}
type MyList=Array<Type1 | Type2> //联合类型
type MyList=Array<Type1 & Type2> //交叉类型
类型保护：MyList仅能访问联合类型中的交集部分
类型谓词：MyList中参数满足Type1可以访问Type1部分，满足Type2可以访问Type2部分

keyof类型索引:type MyType=keyof {(types:'number',random:number)},等价于type MyType= 'number'| 'random'；

函数返回值类型

extends表示类型推断 infer表示定义类型变量

2.为什么学习TypeScript

• react支持
• 2020.9 vue3.0支持 特性
• 动态类型：对类型的检查是在运行期，对象的多态性是与生俱来的
• 静态类型：对类型的检查是在编译期，可读性强 可维护性强

弱类型：数据类型可以被忽略
强类型：如果一个变量被指定了某一个类型,如果不经过强制数据类型的转换,则永远是这个数据类

3 工程应用

• 浏览器web
• node