如何在ANT design pro架构中引入第一个TypeScrpit程序

大项目中，主流的前端框架，都使用了TypeScript。虽然TypeScrpit的灵活性没有JavaScrpit好但是TypeScript的优势也是比较多

1. 静态输入

静态类型化是一种功能，可以在开发人员编写脚本时检测错误。查找并修复错误是当今开发团队的迫切需求。有了这项功能，就会允许开发人员编写更健壮的代码并对其进行维护，以便使得代码质量更好、更清晰。

2. 大型的开发项目

有时为了改进开发项目，需要对代码库进行小的增量更改。这些小小的变化可能会产生严重的、意想不到的后果，因此有必要撤销这些变化。使用TypeScript工具来进行重构更变的容易、快捷。

3. 更好的协作

当发开大型项目时，会有许多开发人员，此时乱码和错误的机也会增加。类型安全是一种在编码期间检测错误的功能，而不是在编译项目时检测错误。这为开发团队创建了一个更高效的编码和调试过程。

4. 更强的生产力

干净的 ECMAScript 6 代码，自动完成和动态输入等因素有助于提高开发人员的工作效率。这些功能也有助于编译器创建优化的代码。

那我们如何在主流的ant design Pro 上运用TypeScrpit

1，新建一个在Ant Design pro 项目中，新建tsx结尾的文件

我们知道 ts 结尾的是TypeScript文件的标志 但是，在React中，如果要把react和TypeScrpit结合，我们就必须使用tsx。

2，示例代码

import React from 'react';

interface HelloProps {
name: string,
age: number,
arg: any
}

enum Direction {
one=1,
two=2
}

class Animal {
move(distanceInMeters: number = 0) {
console.log(`Animal moved ${distanceInMeters}m.`);
}
}

class Dog extends Animal {
bark () {
alert('Woof! Woof!');
}
}

let identity =(arg: number): JSX.Element=> {
let temp = (<div>{arg}</div>)
return temp;
}

let pets =(arg: Set<string>): JSX.Element=> {
let temp = null
for (let pet in pets) {
temp =( <div>{pet}</div>) // "species"
}
return temp;
}
export class Hello extends React.Component<HelloProps, {}>{
public render() {
return (
<div>
姓名：{this.props.name}
年龄：{this.props.age}
arg:{this.props.arg}
</div>
);
};
}

export class main extends React.Component{
public render() {
let tember = new Dog()
tember.bark()
return (
<div>
{pets(new Set(["Cat", "Dog", "Hamster"]))}
<Hello name={"666"} age={Direction.two} arg={identity(1)}/>
</div>
);
};
}

export class Hello extends React.Component<HelloProps, {}>{
public render() {
return (
<div>
姓名：{this.props.name}
年龄：{this.props.age}
arg:{this.props.arg}
</div>
);
};
}

export class main extends React.Component{
public render() {
let tember = new Dog()
tember.bark()
return (
<div>
{pets(new Set(["Cat", "Dog", "Hamster"]))}
<Hello name={"666"} age={Direction.two} arg={identity(1)}/>
</div>
);
};
}

我们在文件中插入以上测试代码，我们的项目就成功引入了TS了。

• 点赞
• 收藏
• 分享
• 文章举报