Ant Design Pro快速入门——TypeScript
纯前端菜鸡，只有一些HTML、CSS和JavaScript的基础，最近配合的前端跑路了，想用Ant Design Pro来快速搭建一套中后台来管理数据，只能自己上了，主要自己也想试试水，从后端的视角看前端，整体偏向于实战。
TypeScript回顾
最近想做一个中后台项目，来管理我的机器学习数据，选定了Ant Design Pro，不过本人的前端技能还停留早期HTML+CSS+JS的水平，整个项目看的一脸懵，NodeJS、WebPack、TypeScript这些也都学习过，但没啥机会练手，等于白学，所以还是需要review一下TypeScript。
TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准，可以编译成纯JavaScript，编译出来的JavaScript可以运行在任何浏览器上。
安装及示例
npm install typescript -g # 安装
tsc -v # 查看版本，校验是否安装成功
新建一个hello.ts的文件，内容如下：
const hello:string="hello world"
console.log(hello)
执行tsc hello.ts，编译成hello.js，执行node hello.js，输出hello world。
静态类型
开发人员可以显示的定义变量、参数、返回值类型，使得许多错误在编译时就可以被发现，常见的类型包括number、string、boolean、array、tuple、enum等，即使不显示声明，TypeScript也会自动推导变量类型。
let a:number=1;
let b:string="hello";
let c:boolean=true;
let d:number[]=[1,2,3];
let e:[string,number]=["hello",1];
enum Color {Red,Green,Blue};
let f:Color=Color.Red;
let name="typescript"; // 推断类型为string
let id:string|number; //联合类型，表示一个变量可以是多种类型
id="123"
id=456;
基础语法
1. 变量声明
TypeScript可以通过let，const和var（不推荐）来声明变量：
//语法：[var|let|const] [变量名] : [类型] = 值;
let a:number=1;
const pi:number=3.14;
我觉得这里值得注意的是const，和我们理解的const还有些出入，这里标识的const的变量绑定不可变，所以在实际使用中你会看见变量会指向一个函数的情况。
2. 函数声明
/* 函数声明的语法
function function_name():return_type {
// 语句
return value;
}
*/
funciton add(x:number,y:number):number{
return x+y;
}
//可选参数用?，这样在使用时就可以不传入
function getFullName(firstName: string, lastName?: string):string{
return `${firstName} ${lastName??""}`;
}
console.log(getFullName("111"))
console.log(getFullName("111","222"))
//如果不知道参数有多少个，可以使用剩余参数
function add(...items:number[]){
let sum:number = 0;
var i;
for(i=0;i<items.length;i++){
sum=sum+items[i];
}
return sum;
}
console.log(add(1,2,3,4,5));
3.类声明
class Person{
name:string;
age:number;
constructor(name:string,age:number){
this.name=name;
this.age=age;
}
greet():void{
console.log(`My name is ${this.name} and I am ${this.age} years old.`);
}
}
let john=new Person('John',30);
john.greet();
4.接口
Typescript提供了接口（interface）来定义对象的类型，接口可以定义对象的结构，比如：
interface Person{
name:string;
age:number;
greet():void;
}
class Student implements Person{
name:string;
age:number;
private sex:string; //访问修饰符
constructor(name:string,age:number,sex:string){
this.name=name;
this.age=age;
this.sex=sex;
}
greet():void{
console.log(`My name is ${this.name} and I am ${this.age} years old,${this.sex}.`);
}
}
let john=new Student('John',30,'male');
john.greet();
tsc编译后的代码如下：
var Student = /** @class */ (function () {
function Student(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
Student.prototype.greet = function () {
console.log("My name is ".concat(this.name, " and I am ").concat(this.age, " years old,").concat(this.sex, "."));
};
return Student;
}());
var john = new Student('John', 30, 'male');
john.greet();
5.抽象类
abstract class Animal {
abstract makeSound(): void;
}
class Dog extends Animal {
makeSound(): void {
console.log("汪汪");
}
}
6.泛型
泛型（generic）是TypeScript中一个重要的特性，它可以用来定义函数、接口、类等类型，使得类型可以接受一个或多个参数，这些参数可以作为类型一部分，从而实现更灵活的类型定义。
//泛型方法
function identity<T>(arg: T): T {
return arg;
}
let output = identity<string>("myString");
//泛型类示例
class Person {
first: string;
last: string;
constructor(first: string, last: string) {
this.first = first;
this.last = last;
}
}
/*
泛型类
*/
class MyInstance<T> {
t:T;
constructor(t:T) {
this.t=t;
}
print():void {
console.log(this.t);
}
}
var ins=new MyInstance<Person>(new Person("a","b"));
ins.print();
7. 类型别名
类型别名（type alias）是一个用户定义的类型名，它用来给一个现有类型起一个新名字，从而可以更清晰地表示意图，比如:
type UserID=string
type Timestamp=numer;;
const id:UserID="123";
const createAt:Timestamp=Date.now();
8. 类型断言
类型断言类似于其他语言中的类型转换，比如：
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length; //尖括号语法
let strLength: number = (someValue as string).length; //as语法
9. 异步编程
async function fetchData(){
//try...catch...也是支持的
try {
const[user,posts]=await Promise.all([
fetchUser(),
fetchPosts()
]);
} catch (error) {
if (error instanceof Error){
console.error(error.message);
}
}
}
Promise是JavaScript中用于处理异步操作的一种机制，它允许开发者以一种同步的方式来处理异步操作，并使用then方法来处理异步操作的结果。
10. 循环
像for 循环、while就不说了，ES6提供了for...of循环，用于遍历可迭代对象（Iterable），比如数组、字符串等，有些人可能会用for...in循环，但是这个循环不小心用错了，可能输出结果和你想象的不一样，比如：
const numbers:number[]=[1,2,3,4,5]
var number;
for(number in numbers){
console.log(number);
}
他实际输出的是索引，而非值。
模块化
在TypeScript中，模块化是指将代码拆分为独立的模块（文件），通过import和export关键字进行组织和复用，import用于导入模块，export用于导出模块。
//math.ts
export function add(x:number,y:number):number{
return x+y;
}
export function sub(x:number,y:number):number{
return x-y;
}
//main.ts
import {add,sub} from './math';
console.log(add(1,2));
命名空间
在TypeScript中，命名空间（namespace）是一个用于组织代码的机制，它允许开发者将代码组织成模块，并通过命名空间来避免变量名冲突，语法格式如下：
namespace MyNamespace {
export interface MyInterface {
}
export class MyClass {
}
}
//成员访问通过【namespace.成员】的方式访问如：
MyNamespace.MyClass;
声明文件
我们在Antd Design Pro中，经常看到*.d.ts文件，这是声明文件，用于告诉TypeScript如何使用第三方JS库，其目的是让TypeScript知道这些库的类型，内容是纯类型声明，不包含具体实现，如typings.d.ts：
declare namespace API {
type CurrentUser = {
name?: string;
avatar?: string;
userid?: string;
email?: string;
signature?: string;
title?: string;
group?: string;
tags?: { key?: string; label?: string }[];
notifyCount?: number;
unreadCount?: number;
country?: string;
access?: string;
geographic?: {
province?: { label?: string; key?: string };
city?: { label?: string; key?: string };
};
address?: string;
phone?: string;
};
}
编写TS代码时，编译器可通过tsconfig.json配置自动生成.d.ts：
{
"compilerOptions": {
"declaration": true,
"declarationMap": true,
"declarationDir": "./types"
}
}
菜就多练，去这个网站做做测验吧。
浙公网安备 33010602011771号