未加星标

A practical introduction to TypeScript for PHP developers

字体大小 | |
[开发(php) 所属分类 开发(php) | 发布者 店小二04 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

Most developers I know should be classified with the trendy word polyglot. Polyglot means a person that speaks multiple languages, where as for programmers they're (programming) languages. Even if you consider yourself as aphp developer, you're likely more diverse.

Programming languages rise and fall in relevance, so your skillset and routine varies over time - depending on trends as well as the line of work you're in. Let's take a practical look at why you might find TypeScript a worthy language to use in 2017 and beyond.


A practical introduction to TypeScript for PHP developers

Adding a new language is always an intimidating task, since there is always some overhead in learning not just the language, but the ecosystem around the language. Another hurdle is that adding a new language often requires that you embrace it in a greenfield project.

A greenfield project might be a good way to try a technology, if the scope is limited and risk in general is low. For many kicking off a new project or a undertaking a major rewrite is not an option, but you can still evolve and apply good ideas and fresh concepts in your work. The value of legacy in web development is understated.

This is an area I've foundTypeScript to be very useful for and I think many developers can benefit from taking a closer look at it. TypeScript compiles down to javascript & can be adopted gradually, chances are you'll have plenty of code you can use it on.

Let's examine five separate points that are an advantage when considering adopting TypeScript.

Low overhead in getting started Great tooling for your favourite editor Familiar syntax for async programming Type Definition files Stability and adoption 1. Low overhead in getting started

Because TypeScript builds directly on standard JavaScript, there is no syntax shock. TypeScript adds syntax and features ontop of standard JavaScript / ECMAscript, but compiles down to regular browser (and Node.js) compatible JavaScript.

As said TypeScript needs to be converted from TypeScript to executable JavaScript, there needs to be a conversion process. This does not signal a massive process that needs to be configured and fine tuned. You can do this, and many do but at a minimum you'll need to install a single executable that does the conversion.

Take for example the TypeScript file (hello.ts) below:

let president: string = 'donald';
console.log('hello ' + president);

This will compile down to regular JavaScript with a single command:

tsc hello.ts

with the output being a JavaScript file (hello.js):

var president = 'donald';
console.log('hello ' + president);

You can decide if you want to store just the output code to your version control, or if you would prefer to have a deployment time script done it at that time.

2. Great tooling for your favourite editor

In the above code you saw us define the president to be a variable of type string. This is the name-defining feature of TypeScript, which is handy but not very useful in our case. Before we move forward to tooling, it's worth noting that you can apply typing gradually in TypeScript.

Types don't need to be defined, and in fact they are automatically set with a language feature called type inference . In the example below, consider that when we don't define the type of the variable, it is assumed to be of the type it was initially set to be:


A practical introduction to TypeScript for PHP developers

You can specify it to be of type "any" if you wish to avoid error highlighting, but all in all any file that is renamed from .js files to .ts files are valid TypeScript by default. This brings us back to the point, which was tooling.

In addition to being just a compiler, TypeScript also provides APIs and tools for editors to inspect code during development time. This is especially useful for large applications, but allows catching common errors in smaller applications. Code completion is also working as shown in the above clip.

Good tools are only good if you use them, luckily the TypeScript APIs are open and can be used by many editors. In the case of PHP, many developers are used to using PHPStorm from JetBrains. Out of the box the IDE offers integration with TypeScript that also manages the compilation.

See how our example project is setup to support TypeScript files (.ts) in PHPStorm, complete with code completion and compiler errors reported in the integrated console:


A practical introduction to TypeScript for PHP developers

There are a number of compiler options that can be done to configure how the TypeScript compiler works, but these are done universally using the tsconfig.json file that works regardless of your development environment.

3. Familiar syntax for async programming

Asynchronous programming is the hallmark of JavaScript. The ability to continue execution while I/O operations were performed was essential when creating user interface development in the browser, but also unlocks performance benefits when creating networked applications.

Over the time there have been a number of asynchronous development patterns in JavaScript. The most traditional one is using callback functions, which can lead to miserable syntax in larger applications. This was followed by Promises and Generators. From the pair Promises were more approachable and are now widely used.

The TypeScript compiler enables developing with both Promises and Generators by targeting the older ES5 JavaScript standard. However in the upcoming ES7/ES2017 standard there is a new option: Asynchronous functions (async/await). They might be familiar to you from Hacklang or C# , but since since TypeScript 2.1 the feature is available for ES5 browsers and since the TypeScript language builds on JavaScript it is already standard syntax.

The async/await syntax allows writing asynchronous code that looks a lot like synchronous code, so it's easy to understand with a traditional synchronous programming background. If you consider the following example you see some of the concepts mentioned above for together to create something that's quite reasonable for a PHP developer:

sendTweet('Polar bears are behind global warming!');
setInterval(() => {
console.log('world goes on...')
},1000);
async function sendTweet(message){
await callTwitterAPI(message);
console.log('media frenzy ensues');
}
function callTwitterAPI(message){
return new Promise<void>(resolve => {
setTimeout(() => {console.log('tweet sent ok')resolve();
}, 5000);
});
}

In the above example the keywords are bolded so that you see where they are located. Essentially you need to define a function that is asynchronous (with the async keyword) and the within that function you can pause execution within the function to wait for a promise to resolve (or be rejected).

In the example there is a delay of 5 seconds when sending the tweet, so the output is

Reggan:ts janit$ node tweet.js
world goes on...
world goes on...
world goes on...
world goes on...
tweet sent ok
media frenzy ensues
world goes on...
world goes on...
world goes on... 4. Type Definition files

In the above section we looked at how to create an a function that works asynchronously. That example was artifical, so let's improve upon that by using a simple HTTP library called Axios , which has a promise based API that can be used with async/await.

Working with a library's API can be quite cumbersome because you don't have access to code completion and so fort, but to help with this we an use interfaces in TypeScript. Just like in PHP interfaces define the structure of an API, but not the implementation. Together with the Reference annotation in TypeScript, we can point to what we want to have references to at development time - without adding complexity to our build process.

In our case we will simply download the Axios type definition file and start working (this time in Visual Studio Code ) to see how adding the reference enables code completion in your editor to files that are otherwise unconnected. In fact in this case the Axios library is loaded from a remote CDN. Let's see how this works in practise:


A practical introduction to TypeScript for PHP developers

Note that the target file itself has essentially nothing to do with TypeScript. There is a separate interface definition file. You can quite easily write Type Definition files yourself to add type information to existing JavaScript files without modifying them.

In fact there are situations when you can't change the loaded JavaScript. One example is Google Analytics, which has an extensive API that would be nicer to work with proper IDE support. Luckily there is already a wide range of Type Definition files created by the TS community under a project called Definitely Typed .

You've got thousands of prewritten definitions available through the Git repository , which you can simply store in your own VCS. The recommended method is to use the Node.js NPM as tool to load and manage Type Declaration files: Simplified Declaration File ( .d.ts ) Acquisition

5. Stability and adoption

There's a lot more to the language that was mentioned in this article, but most of the above it is even not exclusive to it. As TypeScript builds on top of the official JavaScript specification (ECMAScript), things like async/await, the module system, classes and more are not exclusive to it - but are future proof JavaScript concepts.

During my years of working with Symfony I've grown used to the stability of it. While the syntax may be verbose some times, there are many ways of doing things, I've yet to experience a total collapse of the dungeon (mind me that I was not in the scene when Symfony2 launched ;).

TypeScript and it's JavaScript base represent a similar plateau of stability to me. While the JavaScript scene is described as a hectic place where churn is great, the language itself has been well maintained. Stagnation up until 2009 or so was an issue, but now there is a new JavaScript standard released every year.

As for TypeScript, it was originally an effort purely from Microsoft, but now the developer and userbases are more diverse. The project has a public roadmap that they've managed to adhere to quite well. While the language has evolved, the adoption has grown - especially as a tool for writing frameworks and libraries such as Angular, Ember and NativeScript.

With this background I'm pretty certain that TypeScript will be around in five years in some form or another. And at worst I would have compiled my code to standard JavaScript and continue from there with other tools. TypeScript is easy to adopt, but just as easy to scrap.

本文开发(php)相关术语:php代码审计工具 php开发工程师 移动开发者大会 移动互联网开发 web开发工程师 软件开发流程 软件开发工程师

分页:12
转载请注明
本文标题:A practical introduction to TypeScript for PHP developers
本站链接:http://www.codesec.net/view/530353.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 开发(php) | 评论(0) | 阅读(31)