TypeScript

JavaScript能做的事 , TypeScript 也能做 ! TypeScript额外增加了类型 , 这一说法可以看做 Java类对象属性等信息 !

语言	文件后缀
JavaScript	.js
TypeScript	.ts

目前很多浏览器不支持 ts文件 , 可以通过 ts 编译成 js

TS编译JS

1. 全局安装TypeScirpt (npm安装) ==sudo npm i -g typescript==

2. 在项目根路径 TypeScirpt初始化 ==tsc --init==

   执行该命令后 , 跟路径会多了 tsconfig.json配置文件 , 入门只需关注 =="target": "es2016"==键值对(es2016编译标准)

3. 编译转化指令 手动编译 : ==tsc== 自动编译 : ==tsc -w==

变量声明

TS使用的是 ==变量名: + 类型== 标注类型 , 可以避免 JS使用的 弱类型问题

类型首字母是小写

// javascript 类型
let dan = 'Sans';
// typescript 类型
let dan:string = 'Sans';

定义的类型可能为null 那么我们可以这样设置

let dan:date | null = new Date(); // 以防可能为null的问

类对象

一般用于接口的数据汇集和复用的情况

// 接口
interface CatType{
	// 标注类型
    id: string;
    url: string;
    height: string;
    width: string;
}

// 类对象
class Cat implements CatType{
    
    // 标注类型
    id: string;
    url: string;
    height: string;
    width: string;
    
	// 构造函数 
    // 参数检查类型
    constructor(id: string, url: string, height: number, width: number){
        this.id = id;
        this.url = url;
        this.height = height;
        this.width = width;
    }
    
    // 方法
    // 传递参数 data 类型为 CatType
    // 返回类型 void
    public static addData(data: CatType): void{
    	const cat: Cat = new Cat(data.id, data.url, data.height, data.width);
        console.log(cat.id);
       	console.log(cat.url);
        // 类型转换
        console.log(cat.height.toString());
        console.log(cat.width.toString());
    }
    
}

定义/调用 任何东西都需要 标注类型/检查类型

inerface接口

通常用于为对象进行类型定义 , 可以进行提前定义好他们的 属性名/属性类型

interface dan {
	one: number;
    jian: string;
    three: number;
    lian: string;
    test?: boolean;
}

实现接口的前提里面的键值对一定需要一直 , 否者报错 除非该接口的 属性名后面加问号 ? 代表 可选属性

接收API

fetch进行演示

// 返回泛型对象(不确定类型)
async function getJSON<T>(url: string): Promise<T>{
	const resp: Response = await fetch(url);
    const json: Promise<T> = await resp.json();
    return json;
}
/* 假如JSON数据为 : 
	
*/

// 提取数据
async function getData(): Promise<T>{
    try{
        // 确定返回类型
     	const json: CatType[] = await getJSON<CatType[]>(url);
        const data: CatType = json[0];
    }catch(err: Error | unknown){
        let msg: string;
        if(err instanceof Error){
        	msg = err.message;
        }else{
        	msg = String(err);
        }
        console.log(msg);
    }
}