最近公司项目开始统一使用Typescript了，所以自己也是开始认真的学习了一下typescript,还是很有收获的！下面分享给大家
基础知识
- 基础
let isDone: boolean = false;
let decimal: number = 6;
let color: string = "blue";
// 数组，有两种写法
let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3];
// 元组(Tuple)
let x: [string, number] = ["hello", 10];
// 元组类型是一个不可变的数组，长度、类型是不可变的。
// 当添加越界的元素时，它的类型会被限制为元组中每个类型的联合类型
x.push('123')
x.push(123)
x.push(true) // error, 不能添加非字符串和 number 的值
// 枚举 通过enum则不能修改定义好的值了
enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;
// const Color1 = { Red: 1, Green: 2, Blue : 4}
// 上面Color1可以修改里面的值 例如Color.Red = 5; 枚举就无法修改了
//枚举的成员从0开始递增，并且key 和 value 会互相映射
enum Colors { Red, Yellow, Blue }
Colors['Red'] === 0 // true 从0开始递增
Colors[0] === 'Red' // 相互映射
// 枚举事实上会编译成如下
var Color;
(function (Color) {
Color[Color["Red"] = 0] = "Red";
Color[Color["Yellow"] = 1] = "Yellow";
Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}));
// 不确定的可以先声明为any
let notSure: any = 4;
// 声明没有返回值
function warnUser(): void {
alert("This is my warning message");
}
let u: undefined = undefined;
let n: null = null;
// 类型永远没返回
function error(message: string): never {
throw new Error(message);
}
// 类型主张，就是知道的比编译器多，主动告诉编译器更多信息，有两种写法
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
let strLength: number = (someValue as string).length;
- 封装
private/protected/public
- interface 接口
interface SystemConfig {
attr1: string;
attr2: number;
func1(): string;
func2(): void;
}
<!-- 我们给软件定了一个系统参数的配置接口，他定义了系统配置的形状，有两个属性attr1和attr2，两个方法func1和func2，这样如果定义了const systemConfig: SystemConfig = {},那systemConfig就不能随意修改了，他有形状了。 -->
也可以用implements来实现接口，这样可以实现类似更为灵活的继承，如：
class A extends BaseClass implements BaseInterface1, BaseInterface2 {}
<!-- 类A继承了BaseClass，并且继承了BaseInterface1和BaseInterface2两个接口 -->
// 接口也是可以继承接口的
interface Fa {
surname: string
}
interface Son extends Fa {
name: string
}
const obj: Son = {
surname : 'z',
name: 'zc'
}
class Fa {
constructor() {}
suck(){
}
}
interface Son extends Fa {
suck():void;
name: string;
}
- 命名空间 module/namespace
namespace Module1 {
export interface SubModule1 {}
export interface SubModule2 {}
}
const module: Module1.SubModule = {}
- 声明文件 declare
declare 定义的类型只会用于编译时的检查，编译结果中会被删除。
在开发过程中不可避免要引用其他第三方的 JavaScript 的库。虽然通过直接引用可以调用库的类和方法，但是却无法使用TypeScript 诸如类型检查等特性功能。为了解决这个问题，需要将这些库里的函数和方法体去掉后只保留导出类型声明，而产生了一个描述 JavaScript 库和模块信息的声明文件。通过引用这个声明文件，就可以借用 TypeScript 的各种特性来使用库文件了。
假如我们想使用第三方库，比如 jQuery，我们通常这样获取一个 id 是 foo 的元素：
$('#foo');
// 或
jQuery('#foo');
但是在 TypeScript 中，我们并不知道 $ 或 jQuery 是什么东西：
jQuery('#foo');
// index.ts(1,1): error TS2304: Cannot find name 'jQuery'.
这时，我们需要使用 declare 关键字来定义它的类型，帮助 TypeScript 判断我们传入的参数类型对不对：
declare var jQuery: (selector: string) => any;
jQuery('#foo');
declare 定义的类型只会用于编译时的检查，编译结果中会被删除。
上例的编译结果是：
jQuery('#foo');
声明文件
声明文件以 .d.ts 为后缀，例如：
runoob.d.ts
声明文件或模块的语法格式如下：
declare module Module_Name {
}
TypeScript 引入声明文件语法格式：
/// <reference path = " runoob.d.ts" />
- 泛型
function makeState<S>() {
let state: S
function getState() {
return state
}
function setState(x: S) {
state = x
}
return { getState, setState }
}
// 限制它就只能输入输出number和string类型
function makeState<S extends number | string>() {
let state: S
function getState() {
return state
}
function setState(x: S) {
state = x
}
return { getState, setState }
}
// 如果我传入boolean类型
const boolState = makeState<boolean>()
// 泛型的默认类型
function makeState<S extends number | string = number>()
// https://segmentfault.com/a/1190000021219586
泛型其实可以当作普通函数在声明时的一个参数，这个参数代表类型。
我们可以给函数值参数设置默认值，
也可以通过typescipt的泛型给函数类型参数设置默认值。
function regularFunc(x = 2)
regularFunc()
function genericFunc<T = number>()
genericFunc()
其实上面已经涉及到泛型约束了，我们再来看一下更具体的泛型约束
//泛型无法知道具体的类型，所以无法操作它的属性和方法
function Test<T> (a:T):void {
console.log(a.length); // error
}
Test<string>('1')
interface hasLengthProp {
length : number;
}
function Test<T extends hasLengthProp>(a:T):void {
console.log(a.length);
}
- 别名
type strAria = string; // 给 string 类型定义了 strAria别名
const str: strAria = 'abc';
type fnAria = () => string;
function (callback:fnAria):void {
callback();
}
// 我们使用 type 定了一个字符串字面量类型 EventNames，它只能取三种字符串中的一种
type EventName = 'xm' | 'xh' | 'xb';
const str : EventName = 'xb'
const elseStr : EventName = 'xf' // error, 不在这几个名字当中
- 声明合并
就是说声明两个同样的接口、类或者函数，会进行合并操作。
合并的属性的类型必须是唯一的
interface Alarm {
price: number;
alert(s: string): string;
}
interface Alarm {
weight: number;
alert(s: string, n: number): string;
}
//===> 相当于
interface Alarm {
price: number;
weight: number;
alert(s: string, n: number): string;
}
demo
我们可以先做一个简单的 demo 来感受一下 TypeScript 的魅力。首先在 src/page 新建一个 Demo.tsx.
在其中定义一个无状态组件 Hello。
import React from 'react';
const Hello = ({ name }) => <div>Hello,{name}</div>;
接下来我们使用它，
const App = () => <Hello />;
export default App;
我们发现他抛出了如下错误 :
不能将类型“{}”分配给类型“{ name: any; }”。类型“{}”中缺少属性“name”。
因为我们使用了 name，Typescript 认为他是必填参数。如果不存在便认为程序错误，并造成编译失败。这可以帮助我们避免很多低级错误。
我们也可以使用 Class 语法来声明组件，代码如下：
class Message extends React.Component<{
message: string;
}> {
public render() {
return <div>{this.props.message}</div>;
}
}
我们可以通过 <> 的第一个参数来指定 props 的类型。通过第二个参数来指定 state 的类型
代码如下：
class Message extends React.Component<
{
message: string;
},
{
count: number;
}
> {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
public render() {
return (
<div>
{this.props.message}
{this.state.count}
</div>
);
}
}
在这里，我们定义了一个 包含 count 的 state ，count 的类型为 number。然后在类 constructor 内部初始化 state。其余使用方式与 javascript 中相同。
我们可以自行修改 count，
public increment = () => {
const { count } = this.state;
this.setState({
count: count + 1
});
};
interface IProps {
aProps: string;
bProps: string;
}
interface IState {
aState: string;
bState: string;
}
class App extends React.PureComponent<IProps, IState> {
state = {
aState: '',
bState: '',
};
}
TS 对 类装饰器的静态解析还不支持, 建议React 和 Redux 的绑定函数 connect 用函数写法
const mapStateToProps = (state: {}, ownProps: IProps) => {};
const mapDispatchToProps = {};
export default connect(mapStateToProps, mapDispatchToProps)(App);
以上是自己的一点点对typescript的基础知识的了解，当然以上肯定会存在很多不足的地方，我会继续更加深入的学习，欢迎各位提出宝贵的意见或建议，也希望能帮助到你从中获得一些知识！
认真学前端 QQ群：619069335
网友评论