临沂网站服务器价格,电子商城官网,公司网站市场价,订餐网站开发方案如果你看不到代码所操作的数据或数据类型#xff0c;代码就很难理解。这就是类型系统的一大优势#xff1a;通过写出类型#xff0c;让你的代码的读者可以看到它们#xff0c;而且这也将使得你的代码变得易懂。 要记住的事情#xff1a;
既代表有效状态又代表无效状态的类… 如果你看不到代码所操作的数据或数据类型代码就很难理解。这就是类型系统的一大优势通过写出类型让你的代码的读者可以看到它们而且这也将使得你的代码变得易懂。 要记住的事情
既代表有效状态又代表无效状态的类型很可能使得代码混乱容易出错优先选择只代表有效状态的类型。即使它们较长或较难表达但最终会为你节省时间和较少痛苦
假设你正在构建一个Web应用程序允许你选择一个页面加载该页面的内容然后显示它
interface State {pageText: string;isLoading: boolean;error?: string;
}当你编写代码来渲染页面时你需要考虑所有这些领域
function renderPage(state: State) {if (state.error) {return Error! Unable to load ${currentPage}: ${state.error};} else if (state.isLoading) {return Loading ${currentPage}...;}return h1${currentPage}/h1\n${state.pageText};
}上面的做法对吗如果 isLoading 和 error 都设置了呢是显示加载信息好还是错误信息好这个很难说目前信息量不够。
或者如果你要写一个changePage函数呢比如
async function changePage(state: State, newPage: string) {state.isLoading true;try {const response await fetch(getUrlForPage(newPage));if (!response.ok) {throw new Error(Error! Unable to load ${newPage}: ${response.statusText});}const text await response.text();state.isLoading false;state.pageText text;} catch(e) {state.error e;}
}这里有很多问题
在错误的情况下我们忘记将 state.isLoading 设置为 false我们没有清除 state.error所以如果之前的请求失败那么你会一直看到这个错误信息而不是加载信息如果用户在页面加载过程中再次刷新页面谁也不知道会发生什么。他们可能会看到一个新的页面然后出现一个错误或者看到第一个页面而不是第二个页面这取决于响应回来的顺序
问题在于状态包括的信息太少哪个请求失败了哪个正在加载或者包括的信息太多State 类型允许设置 isLoading 和 error即使这代表一个无效的状态。这使得 render() 和 changePage() 都无法很好地实现。
这里有一种更好的方式来表示应用状态
interface RequestPending {state: pending;
}
interface RequestError {state: error;error: string;
}
interface RequestSuccess {state: ok;error: string;
}
type RequestState RequestPending | RequestError | RequestSuccess;interface State {currentPage: string;requests: {[page: string]: RequestState};
}这里使用一个标签联合类型来明确地模拟网络请求可能处于的不同状态。尽管这个版本的状态要更长但它有一个巨大的优势就是不接受无效 状态。当前页面是基于显式建模的你发出的每个请求的状态也是基于显式建模的。因此renderPage 和 changePage 函数很容易实现
function renderPage(state: State) {const {currentPage} state;const requestState state.requests[currentPage];switch (requestState.state) {case pending:return Loading ${currentPage}...;case error:return Error! Unable to load ${currentPage}: ${requestState.error};case ok:return h1${currentPage}/h1\n${requestState.pageText};case default:return ;}
}async function changePage(state: State, newPage: string) {state.requests[newPage] {state: pending};state.currentPage newPage;try {const response await fetch(getUrlForPage(newPage));if (!response.ok) {throw new Error(Error! Unable to load ${newPage}: ${response.statusText});}const pageText await response.text();state.requests[newPage] {state: ok, pageText};} catch(e) {state.requests[newPage] {state: error, error: e};}
}和第一次实现相比歧义完全消失了。当前页面是什么很清楚每一个请求正好对应一个状态。如果用户在请求发出后改变了页面那也没有问题。旧的请求仍然会完成但不会影响 UI。
